一、引言：為什么 JS 性能優化至關重要？

1. 用戶體驗的直接影響：加載慢、交互卡頓如何流失用戶（引用 Google 研究：頁面加載延遲 1 秒，轉化率下降 7%）
2. 業務價值關聯：性能優化對 SEO、留存率、商業化指標的提升作用
3. 現代前端的性能挑戰：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>標簽加載（如廣告、統計腳本）
• 預加載與預連接：
  • <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