前端性能优化：核心指标与最佳实践

前端性能优化：核心指标与最佳实践核心指标与阈值（Web Vitals）LCP（Largest Contentful Paint）：最大内容绘制时间。优秀 ≤ 2.5s；需改进 2.5–4.0s；较差 > 4.0s。INP（Interaction to Next Paint）：交互到下一次绘制的延迟，替代 FID。优秀 ≤ 200ms；需改进 200–500ms；较差 > 500ms。CLS（Cumulative Layout Shift）：累计布局偏移。优秀 ≤ 0.1；需改进 0.1–0.25；较差 > 0.25。TTFB（Time To First Byte）：首字节时间。推荐 ≤ 800ms（依网络与后端而定，低于此值更稳）。诊断与监测使用 RUM（真实用户监测）与采样上报，按设备/网络分层分析。通过 `PerformanceObserver` 采集 LCP/INP/CLS：<script> const po = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { // 上报 entry.toJSON() console.log(entry.name, entry.value); }); }); po.observe({ type: 'largest-contentful-paint', buffered: true }); po.observe({ type: 'layout-shift', buffered: true }); po.observe({ type: 'interaction-to-next-paint', buffered: true }); </script> 关键优化策略关键路径优化：`preconnect`/ `dns-prefetch` 加速第三方域名握手；`preload` 关键 CSS/字体。减少 render-blocking：内联关键 CSS，非关键脚本 `defer`/`async`。资源与代码：代码分割与按需加载：`import()` 动态引入路由/组件。图片优化：现代格式（WebP/AVIF）、`loading="lazy"`、`srcset`/`sizes` 响应式。字体优化：`font-display: swap`，只打包必要字形子集。网络与后端：启用 HTTP/2/HTTP/3，压缩（Brotli/Gzip），CDN 边缘缓存。降低 TTFB：数据库索引、服务端缓存（如 Cache-Control、ETag）。交互与布局稳定：避免未占位的懒加载造成 CLS；为图片/广告预留尺寸。降低长任务：切分耗时逻辑，使用 `requestIdleCallback`/Web Worker。示例片段<!-- 预连接第三方域名 --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <!-- 预加载关键字体/CSS --> <link rel="preload" as="style" href="/styles/critical.css" /> <link rel="stylesheet" href="/styles/critical.css" /> <!-- 图片懒加载与响应式 --> <img src="/img/hero.webp" loading="lazy" srcset="/img/[email protected] 1x, /img/[email protected] 2x" sizes="(max-width: 768px) 100vw, 50vw" alt="Hero" /> <!-- 动态引入非关键模块 --> <script type="module"> document.querySelector('#open-chart')?.addEventListener('click', async () => { const { renderChart } = await import('/modules/chart.js'); renderChart(); }); </script> 落地清单（可检验）指标达标：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。首页关键资源全部启用 `preload`/`preconnect`，阻塞脚本改为 `defer`。图片资源覆盖 `lazy` 与响应式；字体仅加载必要字形。后端开启压缩与缓存策略；数据库热路径具备索引。