关键渲染路径
浏览器从 HTML/CSS/JS 到首屏像素需经：构建 DOM、CSSOM、渲染树、布局、绘制、合成。阻塞资源（未 defer 的 JS）会拖慢首屏。
把关键 CSS 内联、JS 用 defer/async，减少阻塞，让首屏尽快可见可交互。
减少体积
压缩（gzip/brotli）、Tree-shaking、按需导入、删未用依赖，是降低 JS/CSS 体积最直接手段。
# 构建产物分析
npx vite-bundle-visualizer
# 用 brotli 压缩静态资源重排与重绘
改几何属性触发重排（layout，最贵）；改颜色触发重绘；改 transform/opacity 仅合成（最便宜）。批量读写避免强制同步布局。
// 反例：读写交替造成多次强制布局
for (const el of items) {
el.style.width = el.offsetWidth + 10 + 'px'; // 读后再写，强制重排
}
// 正解：先读后写，或用 transform 走合成层位移动画用 transform: translate 而非改 left/top，避免重排，走 GPU 合成更流畅。
图片优化
用现代格式（WebP/AVIF）、合适尺寸、loading="lazy"，并配合 srcset 按设备给分辨率，大幅省流量。
<img src="hero.avif" alt="主视觉"
loading="lazy" decoding="async"
width="1200" height="600">懒加载
路由级与组件级懒加载让首屏只加载必要代码，其余按需取。React 用 React.lazy + Suspense，Vue 用动态 import()。
const Settings = React.lazy(() => import('./Settings'));
<Suspense fallback={<Spinner/>}><Settings/></Suspense>代码分割
构建工具按路由/动态 import 自动拆包，配合长效缓存（内容哈希文件名），用户只下载当前需要的代码。
// 动态 import 触发分割
button.onclick = () => import('./heavyChart').then(m => m.render());过多小包会增加请求数与开销。按路由或明显独立的大模块分割，平衡并发与缓存。
Lighthouse 度量
Lighthouse 给出性能、可访问性、SEO 等评分与优化建议（FCP、LCP、CLS、TBT）。用它建立性能基线与回归门禁。
npx lighthouse https://yoursite.com --view常见陷阱与 FAQ
滚动中触发了重排/重绘重活（如改 top/height、同步布局）。改用 transform/opacity 合成，并用 will-change 谨慎提示。
可能阻塞资源太多（同步 JS、未内联关键 CSS）、图片过大、或第三方脚本拖慢。用 Performance 面板逐帧分析。
首屏关键模块被误懒加载会多一次请求。只对非首屏内容懒加载，首屏核心代码保持直接加载。