一、引言：为什么 JS 性能优化至关重要？
- 用户体验的直接影响：加载慢、交互卡顿如何流失用户（引用 Google 研究：页面加载延迟 1 秒，转化率下降 7%）
- 业务价值关联：性能优化对 SEO、留存率、商业化指标的提升作用
- 现代前端的性能挑战：SPA、大前端架构下 JS 体积膨胀、运行时复杂度增加的问题
二、性能诊断：如何精准定位问题？
2.1 核心性能指标解析
- 加载阶段：FP（首次绘制）、FCP（首次内容绘制）、LCP（最大内容绘制）
- 交互阶段：FID（首次输入延迟）、TTI（可交互时间）、CLS（累积布局偏移）
- 运行时：Long Task（长任务）、JS 执行耗时、内存占用
2.2 必备性能检测工具
- 浏览器原生工具：
- DevTools Performance 面板：录制 / 分析运行时性能（长任务、函数耗时）
- DevTools Network 面板：模拟弱网、分析资源加载顺序 / 阻塞关系
- Memory 面板：检测内存泄漏（快照对比、内存增长趋势）
- 自动化检测工具：
- Lighthouse：生成性能评分 + 优化建议（含 JS 执行、资源加载维度）
- WebPageTest：多地区 / 设备性能测试，可视化加载瀑布流
- 监控平台：
- 前端监控 SDK（如 Sentry、Fundebug）：捕获线上真实环境性能异常
- 自定义性能上报：基于
Performance API采集关键指标
三、加载阶段优化：让 JS 更快到达用户
3.1 代码体积瘦身
- 按需加载与代码分割：
- 路由级分割：基于
React.lazy/Vue异步组件+Suspense实现路由懒加载 - 组件级分割：非首屏组件、大功能模块动态导入（
import()语法） - 工具配置：Webpack
splitChunks拆分公共库，Tree-shaking 剔除死代码
- 路由级分割：基于
- 压缩与混淆：
- 代码压缩：Terser 压缩 JS（移除空格、变量名缩短、死代码删除）
- 文本压缩：Gzip/Brotli 压缩（Nginx 配置 + CDN 支持，Brotli 比 Gzip 压缩率高 15-20%）
- 依赖优化：
- 剔除冗余依赖：用
webpack-bundle-analyzer分析依赖体积，替换轻量库（如用dayjs替代moment.js） - 依赖按需引入：如 Lodash 仅导入
lodash-es/pick而非全量引入
- 剔除冗余依赖：用
3.2 加载策略优化
- 资源加载优先级控制：
- 关键 JS 前置：
<script defer>（并行加载，DOM 解析完成后执行） vs<script async>（加载完成后立即执行） - 非关键 JS 后置：动态创建
<script>标签加载（如广告、统计脚本）
- 关键 JS 前置：
- 预加载与预连接：
<link rel="preload">：提前加载首屏必需 JS（避免后续阻塞）<link rel="preconnect">：预建立 CDN 域名连接，减少 DNS/SSL 耗时
- CDN 与缓存策略：
- 静态 JS 资源 CDN 分发：降低网络延迟
- 强缓存（Cache-Control）+ 协商缓存（ETag）：减少重复加载
四、运行时优化：让 JS 执行更高效
4.1 执行效率优化
- 减少长任务阻塞主线程：
- 任务拆分：将耗时操作（如大数据处理）拆分为微任务（
queueMicrotask）或使用setTimeout分片执行 - 计算迁移：用 Web Workers 处理 CPU 密集型任务（如数据解析、复杂计算），避免阻塞 UI
- 任务拆分：将耗时操作（如大数据处理）拆分为微任务（
- 函数与循环优化：
- 避免不必要的函数嵌套：减少作用域链查找成本
- 循环性能：缓存数组长度（
for(let i=0, len=arr.length; i
