理解性能优化的核心指标

• 关键渲染路径（CRP）与首次内容ful绘制（FCP）
• 交互时间（TTI）与总阻塞时间（TBT）
• Lighthouse 和 WebPageTest 工具的使用

代码层面的优化策略

• 避免全局变量污染，减少作用域链查找
• 使用事件委托减少事件监听器数量
• 节流（throttle）与防抖（debounce）的应用场景
• 减少重绘与回流（如使用 transform 替代 top/left）

加载性能优化

• 代码分割（Code Splitting）与动态导入（import()）
• 预加载关键资源（<link rel="preload">）
• 异步（async/defer）脚本加载策略
• 使用 Web Workers 处理密集型任务

内存管理与垃圾回收

• 识别内存泄漏（如闭包、游离的 DOM 引用）
• 使用 WeakMap 和 WeakSet 避免强引用
• 主动释放资源（如移除事件监听器、清理定时器）

网络请求优化

• 减少 HTTP 请求（合并文件、雪碧图）
• 启用 HTTP/2 或 HTTP/3 的多路复用
• 使用 Service Worker 实现离线缓存

框架与工具链优化

• React/Vue 的虚拟 DOM 调优（key 的正确使用）
• Webpack 配置优化（Tree Shaking、压缩混淆）
• 使用性能分析工具（Chrome DevTools、React Profiler）

实战案例分析

• 懒加载长列表（Intersection Observer API）
• 优化动画性能（requestAnimationFrame）
• 服务端渲染（SSR）与静态生成（SSG）的选择

持续监控与迭代

• 部署性能预算（Performance Budget）
• 自动化性能测试（CI/CD 集成 Lighthouse）
• 真实用户监控（RUM）数据分析

注：每个部分可展开为独立章节，配合代码示例和性能对比数据（如优化前后的 Lighthouse 分数）。