JavaScript 性能優化是提高 Web 應用性能的關鍵步驟，特別是在處理大量數據、復雜計算或頻繁的 DOM 操作時。以下是一些常見的 JavaScript 性能優化技巧和策略：

文章目錄

• • @[TOC]
  • • 一、代碼層面優化
    • • 1. **減少全局變量**
      • 2. **避免使用 `with` 語句**
      • 3. **使用局部變量**
      • 4. **減少 DOM 操作**
      • 5. **使用事件委托**
      • 6. **避免內存泄漏**
      • 7. **使用閉包優化**
    • 二、數據結構和算法優化
    • • 1. **選擇合適的數據結構**
      • 2. **優化循環**
      • 3. **使用原生方法**
      • 4. **避免不必要的計算**
    • 三、網絡和加載優化
    • • 1. **減少 HTTP 請求**
      • 2. **使用懶加載**
      • 3. **壓縮和混淆代碼**
      • 4. **使用緩存**
    • 四、工具和調試
    • • 1. **使用性能分析工具**
      • 2. **使用 Lighthouse**
      • 3. **使用 Webpack 和 Babel**

一、代碼層面優化

1. 減少全局變量

• 問題：全局變量容易導致命名沖突，并且訪問速度較慢。
• 優化方法：使用模塊化編程，將變量和函數封裝在模塊中。

  // 不推薦
  var globalVar = 10;// 推薦
  const myModule = (() => {const localVar = 10;return {getVar: () => localVar};
  })();
  

2. 避免使用 with 語句

• 問題：with 語句會改變作用域鏈，導致性能下降。
• 優化方法：避免使用 with 語句，直接訪問對象屬性。

  // 不推薦
  with (obj) {console.log(property);
  }// 推薦
  console.log(obj.property);
  

3. 使用局部變量

• 問題：全局變量訪問速度較慢。
• 優化方法：在函數內部使用局部變量。

  function processArray(arr) {const len = arr.length; // 使用局部變量存儲長度for (let i = 0; i < len; i++) {// 處理 arr[i]}
  }
  

4. 減少 DOM 操作

• 問題：頻繁的 DOM 操作會導致性能下降。
• 優化方法：
  • 批量更新：使用文檔片段（DocumentFragment）批量更新 DOM。
  • 減少重繪和重排：合并多次 DOM 操作為一次。

  // 使用 DocumentFragment
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {const div = document.createElement('div');div.textContent = `Item ${i}`;fragment.appendChild(div);
  }
  document.body.appendChild(fragment);
  

5. 使用事件委托

• 問題：為大量元素綁定事件會導致性能下降。
• 優化方法：使用事件委托，將事件綁定到父元素上。

  // 不推薦
  const buttons = document.querySelectorAll('button');
  buttons