JavaScript 性能优化

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