前端性能优化大纲
性能指标
FP,FCP,FMP,ATF,TTI,DCL,Load performance.now()
加载时优化
- 减少 HTTP 请求,重定向
- 使用 HTTP2
- 使用 SSR
- CDN
- 将 CSS 放在文件头部,JavaScript 文件放在底部,prefetch,preload
- iconfont
- 设置缓存(三级)
- Gzip
- 图片 webp 嗅探
- 资源加载(async,defer,预加载,懒加载,路由组件动态 Import)
- 通过 webpack 优化:base64,资源压缩,Tree shaking,ES Module,资源动态 Import,动态 Polyfill,拆包 chunk,DLL(通用优先打包抽离,利用浏览器缓存)
- 首屏 FP 加载优化(骨架屏)
- 服务端渲染,客户端预渲染
- 数据预取,包括接口数据,和加载详情页图片
- 服务器合理设置缓存策略
- 数据缓存
运行时优化
- 减少重绘重排
- 使用事件委托,节流,防抖
- 变量保存属性
- 避免页面卡顿 (16ms 内完成操作并渲染)requestAnimationFrame
- Web Workers
- 降低 CSS 选择器的复杂性
- 首页不加载不可视组件
- 减少组件层级
- 优先使用 Flex 布局
- 异步操作 RequestFrameAntmation,RequestIdleCallback,IntersectionObserver、MutationObserver,PostMessage。
从客户端层面,首屏减少和客户端交互,合并接口请求。