前端页面性能优化

前端页面性能优化，可以分为 关键指标（度量） 和 优化手段（落地方案） 两个维度来理解。

一、核心性能指标（Web Vitals & 常见指标）

目前业界比较统一的衡量标准是 Google Web Vitals 加上一些传统的性能指标：

1. 加载类指标

   • FCP（First Contentful Paint）：首次内容绘制（用户第一次看到文字或图片）。

   • LCP（Largest Contentful Paint）：最大内容绘制（页面主要内容加载完成）。

   • 白屏时间（TTFB + 资源加载）：用户从打开页面到看到第一个像样的内容的时间。

   • TTFB（Time To First Byte）：首字节时间，后端/网络延迟影响大。

2. 交互类指标

   • FID（First Input Delay）：首次输入延迟，用户第一次交互（点击/输入）到浏览器响应的时间。

   • INP（Interaction to Next Paint）：更全面的交互延迟衡量。

3. 稳定性指标

   • CLS（Cumulative Layout Shift）：累计布局偏移，衡量页面跳动（广告/图片未设尺寸等）。

4. 传统性能指标

   • 首屏渲染时间（First Screen Render）

   • 可交互时间（TTI, Time To Interactive）

   • 首次数据请求完成时间

   • 资源加载速度（JS/CSS/图片大小、数量）

   • 内存占用、帧率（FPS）

二、前端性能优化的主要方向

可以分为 网络传输优化、资源加载优化、渲染性能优化、运行时优化 四大类。

1. 网络传输层优化

• 减少请求数量：合并资源、HTTP/2 多路复用 。

• 压缩传输：开启 Gzip / Brotli。

• CDN 加速：静态资源就近分发。

• 缓存策略：HTTP 缓存（强缓存、协商缓存）、Service Worker 离线缓存。

• DNS 预解析：<link rel="dns-prefetch">

• 预加载/预获取：<link rel="preload"> / <link rel="prefetch">

2. 资源加载优化

• 代码拆分（Code Splitting）：Webpack/Vite 按需加载。

• Tree Shaking：去除未使用代码。

• 延迟加载（Lazy Load）：图片、视频、路由页面按需加载。

• 图片优化：

  • 使用 WebP/AVIF 替代 JPG/PNG

  • 响应式图片 srcset

  • 图片懒加载 loading="lazy"

• 字体优化：

  • 使用 font-display: swap

  • 子集化字体，减少体积。

3. 渲染性能优化

• 减少回流和重绘：批量修改 DOM、避免频繁操作样式。

• 合理使用 CSS 动画：尽量只改变 transform、opacity。

• 虚拟列表（Virtual List）：长列表只渲染可见区域。

• 骨架屏 / 占位符：减少白屏感知时间。

• SSR / SSG / CSR 混合：

  • 服务端渲染（SSR）减少白屏时间。

  • 静态生成（SSG）提升首屏速度。

4. 运行时优化

• 减少主线程阻塞：

  • 拆分大任务（使用 requestIdleCallback、requestAnimationFrame）

  • Web Worker 处理计算密集任务。

• 减少第三方库依赖：按需引入 lodash、moment 改用 dayjs。

• 性能监控与调优：

  • 使用 Performance API、Lighthouse 分析。

  • 监控线上 FCP/LCP/CLS。

三、整体优化思路（实战流程）

1. 监控现状：用 Lighthouse、Performance、Web Vitals 采集核心指标。

2. 优化加载速度：CDN、压缩、缓存、懒加载。

3. 优化白屏时间：SSR、骨架屏、关键 CSS 内联。

4. 优化交互流畅度：减少阻塞脚本、使用 Web Worker。

5. 优化用户体验：CLS 稳定布局，避免跳动。

👉 总结一句话：
前端性能优化的核心目标就是：
✅ 让内容更快显示（FCP/LCP）
✅ 让交互更快响应（FID/INP/TTI）
✅ 让页面更稳定（CLS）