前端性能优化大纲

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

加载时优化

  • 减少 HTTP 请求
  • 使用 HTTP2
  • 使用 SSR
  • CDN
  • 将 CSS 放在文件头部，JavaScript 文件放在底部，prefetch，preload
  • iconfont
  • 设置缓存(三级)
  • 压缩文件（图片 webp，代码，gzip）
  • 资源加载（async，defer，预加载，懒加载，路由组件动态加载）
  • webpack 优化相关
  • 首屏 FP 加载优化（骨架屏）

运行时优化

  • 减少重绘重排（transforms，opacity）
  • 使用事件委托，节流，防抖
  • 变量保存属性
  • 避免页面卡顿 (16ms 内完成操作并渲染）requestAnimationFrame
  • Web Workers
  • 降低 CSS 选择器的复杂性