前端优化导读

前端性能优化的目标是：更快让用户看到可用界面、交互更跟手、带宽与算力更省。优化前先 度量，再 定位瓶颈，最后 小步改动可回滚。

优化维度速览

维度	常见手段
网络与加载	HTTP 缓存、CDN、压缩、HTTP/2、分包与按需加载、preload/prefetch
渲染与关键路径	减少阻塞 JS/CSS、关键 CSS、defer/async、减少布局抖动
资源体积	图片格式与尺寸、Tree Shaking、压缩与哈希文件名
运行时与交互	防抖节流、虚拟列表、拆分长任务、Web Worker
框架与工程	路由懒加载、memo、构建分析与拆包
度量与排查	Core Web Vitals、Performance 面板、线上 RUM

推荐阅读顺序

按编号 02 → 07 阅读即可覆盖绝大部分场景；其中 02～03 偏加载与渲染基础，07 适合遇到具体问题时的排查清单。

核心指标（简要）

指标	含义（简述）
LCP	最大内容绘制，偏大往往与资源体积、路由、SSR 有关
INP（替代原 FID 思路）	交互延迟，偏大与长任务、主线程拥挤有关
CLS	布局偏移，偏大与图片无尺寸、异步插入内容有关

详细排查步骤见 07、监控指标与问题排查。