前端性能优化大纲

性能指标

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。

从客户端层面,首屏减少和客户端交互,合并接口请求。