1️⃣ 页面加载性能优化（Loading / 首屏加载）

目标：缩短 FCP、LCP、白屏时间

方法：

1. 资源压缩与合并
   • 压缩 JS、CSS、HTML (terser, cssnano)
   • 合并小文件减少请求数
2. 按需加载 / 分包
   • 代码拆分 (Webpack dynamic import, Next.js React.lazy)
   • 首屏加载必要资源，其余延迟加载
3. 静态资源缓存
   • 利用浏览器缓存 (Cache-Control / ETag)
   • CDN 加速静态资源
4. SSR / SSG / 预渲染
   • Next.js SSR 或静态生成
   • React/Vue 使用服务器端渲染 → 首屏 HTML 已有内容
5. 优化字体
   • font-display: swap
   • 字体子集化，减少字体文件大小
6. 图片优化
   • WebP/AVIF 格式
   • 合理尺寸、懒加载、placeholder

2️⃣ 运行时性能优化（Render / 交互性能）

目标：减少 JS 执行时间、提高页面响应速度

方法：

1. 避免不必要的重绘 / 重排
   • 避免频繁操作 DOM
   • 使用 transform / opacity 做动画
   • 批量修改 DOM
2. 虚拟列表 / 列表优化
   • 列表项很多时使用虚拟滚动 (React Virtualized / Vue Virtual Scroller)
3. 函数和事件优化
   • React useCallback + memo 避免子组件重复渲染
   • Vue 函数方法放外层，避免重复创建
4. 防抖 / 节流
   • 高频事件（scroll, resize, input）使用 debounce 或 throttle
5. Web Worker
   • 将耗时计算放到 Worker 中，避免阻塞主线程
6. 减少 JS 体积
   • Tree Shaking
   • 避免大依赖库，按需引入

3️⃣ 网络性能优化（Network）

目标：减少请求次数、请求体积、加载延迟

方法：

1. CDN
   • 静态资源放 CDN
   • 静态内容离用户更近
2. HTTP/2 / HTTP/3
   • 多路复用，减少请求延迟
3. 懒加载
   • 图片、视频、组件按需加载
4. 压缩
   • Gzip / Brotli 压缩
5. 预加载 / 预取
   • /
   • 提前加载关键资源

4️⃣ 用户交互性能（响应 / FPS）

目标：保证动画流畅、交互不卡顿

方法：

1. CSS 动画优先 GPU 加速
   • transform, opacity
   • 避免 top/left 频繁布局计算
2. 避免长任务阻塞主线程
   • JS 计算切分，使用 requestIdleCallback 或 Web Worker
3. 减少 React/Vue 无效渲染
   • React memo, Vue v-once / computed 缓存

5️⃣ 性能监控与优化工具

• Chrome DevTools → Performance / Network / Lighthouse
• Lighthouse → 性能评分 & 改进建议
• Web Vitals API → 实时监控 FCP / LCP / CLS
• React Profiler / Vue Devtools → 检查组件渲染性能

6️⃣ 总结

让 首屏更快加载

• 路由懒加载
• 代码分割
• 去大依赖
• CDN
• 缓存
• 图片优化
• 骨架屏
• 预渲染 / Prerender

让 交互更流畅

• 避免重复渲染
• 虚拟列表
• Web Worker
• 动画优化（transform/opacity）

让 bundle 更小

• Tree-shaking
• 按需导入
• 压缩资源
• 构建工具优化