前端性能优化大纲

发表于 分类于
本文字数： 585 阅读时长 ≈ 1 分钟

性能指标

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。

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