前端性能优化大纲

加载时优化

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

运行时优化

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