前端性能优化实战 从指标到落地

前端性能优化实战：从指标到落地指标体系核心指标：LCP（最大内容绘制）、INP（交互到下一次绘制，2024 起替代 FID）、CLS（累积布局偏移）。采集方式：`PerformanceObserver`、Lighthouse、Chrome 用户体验报告（CrUX）。关键优化策略资源加载：合理使用 `preload`、`prefetch`、`dns-prefetch` 与 `preconnect`。图片优化：优先 `AVIF/WebP`，按需加载（`loading="lazy"`），响应式图片（`srcset`/`sizes`）。代码分割：`dynamic import()` 与路由级拆分，减小初始包体；开启 Tree-shaking。缓存策略：静态资源设置 `Cache-Control: public, max-age=31536000, immutable`；开启 `ETag`/`Last-Modified` 校验。关键渲染路径：减少阻塞（压缩/内联关键 CSS，推迟非关键 JS）。监测与验证使用 Lighthouse、WebPageTest 与真实用户监测（RUM）闭环评估。在关键页面加入 `PerformanceObserver` 采集 INP 与 LCP，结合日志平台可视化。示例代码片段<link rel="preconnect" href="https://cdn.example.com" crossorigin> <link rel="preload" as="style" href="/css/critical.css"> <link rel="preload" as="image" href="/hero.avif" type="image/avif"> <img src="/hero.avif" loading="lazy" alt=""> // 采集 INP（简化示例） new PerformanceObserver((list) => { const entries = list.getEntriesByType('event'); // 上报 entries 的 duration 统计 INP 指标 }).observe({ type: 'event', buffered: true }); 注意事项INP 替代 FID 后，更关注持续交互响应时延；避免主线程长任务（>50ms）。图片与字体优先级合理调度，避免影响 LCP；字体建议使用 `font-display: swap`。