前端不再是纯纯切图仔，还要考虑很多性能优化上的问题
优化搞得好，升职加薪跑不了(～￣▽￣)～
「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。
构建环节
构建系统优化能提升研发效率。
常见优化
-
缓存占用
-
内存占用
-
多线程
-
使用Symlink
-
使用代理
-
体积优化
- treeshaking
- scopehoisting
- code-split
- Closure Compiler
- 去重复包
更快的构建工具
- webpack HMR
- ESBuild
- pnpm
- yarn
monorepo构建
- 使用lerna
- 使用rush
并行构建
- 公共组件抽离+预编译
- 分模块打包
- SourceMap单独构建
- 测试和构建分离
- E2E分离
架构支撑
- MPA架构
- 微前端架构
- SPA架构
网络环节
服务端
-
使用CDN
按地区分流； 按流量分流
-
Expires，Cache-control，Etags等
-
使用Gzip压缩
-
避免301/302重定向
-
压缩js和css包
-
输出缓冲
-
使用多个域名
-
使用HTTP2.0以上协议
-
使用websocket
-
使用webP/Apng/iconfont
服务端渲染
- 静态模板
- CAAS
- SSR
- BigPipe
前端
- 延迟加载
- 预加载
- 并行加载
- 减少HTTP请求
- 将css放页面顶部
- 将js放页面底部
- 减少DNS查询
- 缓存Ajax请求
- 尽量使用get方法
- 避免使用iframe
- 精简cookie
- 使用不带cookie的域名
架构升级
- SPA
- MPA
- 微前端
渲染环节
渲染优化保障是用户体验的流畅性的重要环节，而且渲染性能会影响内存和 CPU 的持续占有。
0-16ms 用户使用感好，网页流畅
1s 卡顿，体验感差
事件监听
样式读写
动画
减少DOM操作
- 使用FastDOM
- 使用documentfragement
- 合理利用display:none
- 精简Dom
优化主线的空闲时间
canvas
svg
应用环节
主要围绕着离线优化、热更和跨端渲染框架。
预加载页面
使用离线包
- 精简包
- 按需离线
热更新
- 局部更新
- 按需热更
跨端框架
- reactNative框架
- 小程序框架
- Flutter框架
使用离线存储
- APP cache
- Service Worker
- IndexedDB
- localstorage
- sessionstorage
- cookies
webview优化
- webview缓存池
- webview预加载
