JavaScript 性能优化实战指南

第一部分：性能瓶颈诊断 - 知其然，更要知其所以然

1. 性能测量工具是关键
   • 浏览器开发者工具 (DevTools)：
     • Performance (时间线) 面板：分析脚本执行时间、布局、绘制、合成等。
     • Memory 面板：追踪内存泄漏、快照对比。
     • Network 面板：分析资源加载、请求瀑布流。
     • Lighthouse/Audits 面板：综合性能评分与优化建议。
   • 性能监控 API：
     • Performance API (performance.now(), performance.mark(), performance.measure())：精准测量代码执行时间。
     • User Timing API：自定义测量关键用户旅程。
   • 线上性能监控 (RUM)： 收集真实用户的性能数据（如 FCP, LCP, FID, CLS, TTI）。
2. 识别常见性能瓶颈类型
   • 过长的 JavaScript 执行时间（主线程阻塞）。
   • 频繁且耗时的重排 (Reflow) 和重绘 (Repaint)。
   • 内存泄漏导致应用变慢甚至崩溃。
   • 网络请求过多或过大导致的加载延迟。
   • 低效的算法或数据结构。

第二部分：优化网络传输与加载 - 减少等待时间

1. 代码拆分 (Code Splitting)
   • 基于路由的动态导入 (如 React.lazy() + Suspense, Vue 异步组件)。
   • 按功能/模块拆分。
   • 利用 Webpack/Rollup/Vite 等构建工具的拆分能力。
2. 资源压缩与精简
   • JavaScript 压缩 (Terser, UglifyJS)。
   • 启用 Gzip/Brotli 压缩。
   • Tree Shaking：移除未使用的代码。
   • 删除未使用的 Polyfills。
3. 缓存策略优化
   • 合理设置 HTTP 缓存头 (Cache-Control, ETag)。
   • 利用 Service Worker 进行更精细的缓存控制（离线体验）。
   • 持久化缓存 (配置合理的构建输出文件名哈希策略)。
4. 优化资源加载顺序
   • 关键资源优先加载 (Preload)。
   • 非关键资源延迟加载 (Defer, Async)。
   • 图片/视频懒加载 (Lazy Loading)。

第三部分：优化 JavaScript 执行效率 - 让代码飞起来

1. 减少主线程负担
   • Web Workers： 将耗时计算移出主线程。
   • 任务调度： 使用 requestIdleCallback 或 setTimeout 拆分长任务。
   • 避免同步操作： 特别是在可能阻塞主线程的地方（如大规模同步 DOM 操作）。
2. 优化算法与数据结构
   • 选择时间复杂度更低的算法（如哈希表查找 O(1) vs 数组遍历 O(n)）。