前端页面性能优化，可以分为 关键指标（度量） 和 优化手段（落地方案） 两个维度来理解。
一、核心性能指标（Web Vitals & 常见指标）
目前业界比较统一的衡量标准是 Google Web Vitals 加上一些传统的性能指标：
-
加载类指标
-
++FCP（First Contentful Paint）：首次内容绘制（用户第一次看到文字或图片）。++
-
++LCP（Largest Contentful Paint）：最大内容绘制（页面主要内容加载完成）。++
-
++白屏时间（TTFB + 资源加载）：用户从打开页面到看到第一个像样的内容的时间。++
-
++TTFB（Time To First Byte）：首字节时间，后端/网络延迟影响大。++
-
-
交互类指标
-
FID（First Input Delay）：首次输入延迟，用户第一次交互（点击/输入）到浏览器响应的时间。
-
INP（Interaction to Next Paint）：更全面的交互延迟衡量。
-
-
稳定性指标
- ++CLS（Cumulative Layout Shift）：累计布局偏移，衡量页面跳动（广告/图片未设尺寸等）。++
-
传统性能指标
-
首屏渲染时间（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。
-
三、整体优化思路（实战流程）
-
监控现状：用 Lighthouse、Performance、Web Vitals 采集核心指标。
-
优化加载速度：CDN、压缩、缓存、懒加载。
-
优化白屏时间：SSR、骨架屏、关键 CSS 内联。
-
优化交互流畅度：减少阻塞脚本、使用 Web Worker。
-
优化用户体验：CLS 稳定布局，避免跳动。
👉 总结一句话：
前端性能优化的核心目标就是：
✅ 让内容更快显示（FCP/LCP）
✅ 让交互更快响应（FID/INP/TTI）
✅ 让页面更稳定（CLS）