前端性能优化大纲

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

性能指标

FP (First Paint) 首次绘制
FCP (First Contentful Paint) 首次内容绘制
FMP（First Meaningful Paint）首次绘制页面主要内容
LCP (Largest Contentful Paint) 最大内容渲染
TTI (Time to Interactive) 可交互时间
DCL (DomContentloaded)
L（load)
performance.now()

加载时优化

  • 网络：DNS 优化，减少 HTTP 请求，减少重定向，使用 HTTP2，CDN，Gzip，设置缓存(三级)，
  • 加载：延迟（async），异步（defer），预加载（preload，prefetch），懒加载（IntersectionObserver），CSS 放头部，JS 放尾部，骨架屏，动态 Polyfill
  • 图片：预加载，懒加载，iconfont，webp 嗅探
  • webpack：base64，压缩，Tree shaking，动态 Import，拆包 chunk，Dll1
  • 服务端渲染（SSR），客户端预渲染（Prerendering）
  • 数据预取，包括接口数据，和加载详情页图片

运行时优化

  • 减少回流重绘2
  • 变量保存属性，使用事件委托，节流，防抖
  • 减少组件层级，首页不加载不可视组件
  • Web Workers
  • 合并接口请求
  • 避免页面卡顿 (16ms 内完成操作并渲染）requestAnimationFrame，requestIdleCallback，IntersectionObserver，MutationObserver，ResizeObserver，PostMessage。