JavaScript的性能优化

JavaScript 性能优化是前端开发中非常重要的一部分，优化得当可以显著提升页面加载速度、交互流畅度以及减少不必要的资源消耗。

这里我会从 代码执行优化、渲染优化、内存管理、网络优化 等方面介绍 JavaScript 的性能优化方法。

1. 代码执行优化

减少不必要的计算

• 避免重复计算，可以使用变量缓存结果：

  //  不优化，每次循环都计算 length
  for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
  
  //  先缓存长度，减少计算次数
  for (let i = 0, len = arr.length; i < len; i++) { console.log(arr[i]); }
  

• 避免深层嵌套循环，可以用 Map 结构提升查询效率：

  let obj = {};
  for (let item of arr) {
    obj[item.id] = item;
  }
  console.log(obj[3]); // O(1) 查找
  

使用高效的数据结构

• 使用 数组 而不是 对象 进行顺序存储和遍历：

  let obj = { 0: "a", 1: "b" }; // 遍历比数组慢
  let arr = ["a", "b"]; // 数组遍历更快
  

• 使用 Map/Set 而不是 Object/Array：

  let map = new Map();
  map.set("key", "value"); // 查找更快
  

避免不必要的 DOM 操作

• DOM 操作开销大，应尽量减少 document.getElementById、innerHTML 的使用：

  // 直接修改 DOM，触发多次渲染
  let div = document.getElementById("box");
  div.innerHTML += "<p>New</p>";
  
  // 使用 DocumentFragment 批量操作 DOM
  let frag = document.createDocumentFragment();
  let p = document.createElement("p");
  p.textContent = "New";
  frag.appendChild(p);
  div.appendChild(frag);
  

2. 渲染优化

减少回流和重绘

• 回流：布局计算变化，比如 width、height、margin 变化时触发。

• 重绘：颜色、背景等改变但不影响布局。

优化方案：

• 合并样式修改：

  let div = document.getElementById("box");
  div.style.width = "100px";  // 每次都会触发渲染
  div.style.height = "100px";
  div.style.backgroundColor = "red";
  
  // 使用 CSS 类修改多个样式，减少重绘
  div.classList.add("new-style");
  

• 批量操作 DOM 时使用 display: none，避免多次回流

  let container = document.getElementById("container");
  container.style.display = "none";  // 先隐藏，减少回流
  for (let i = 0; i < 100; i++) {
    let newDiv = document.createElement("div");
    container.appendChild(newDiv);
  }
  container.style.display = "block";  // 再显示，减少性能损耗
  

• 避免逐帧计算 Layout

  // 触发多次回流
  let width = div.offsetWidth;
  div.style.width = width + 10 + "px";
  
  // 先获取数据，再修改
  let width = div.offsetWidth;
  let newWidth = width + 10 + "px";
  div.style.width = newWidth;
  

使用 CSS 进行动画

• JavaScript setInterval() 或 setTimeout() 可能导致掉帧，建议用 requestAnimationFrame()：

  function animate() {
    box.style.left = parseInt(box.style.left) + 1 + "px";
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
  

• 使用 transform 替代 top/left 进行动画

  /* 会触发回流 */
  div { position: absolute; top: 50px; }
  
  /* 使用 transform 只触发 GPU 处理，不影响布局 */
  div { transform: translateY(50px); }
  

3. 内存管理优化

避免内存泄漏

• 未清理的全局变量

  function foo() {
    a = 10; // 变量未定义，变成全局变量
  }
  

  解决方案：

  function foo() {
    let a = 10;
  }
  

• 闭包导致的变量泄漏

  function createClosure() {
    let arr = new Array(100000).fill("data"); // arr 不会被释放
    return function () { console.log(arr.length); };
  }
  let leak = createClosure();
  

   解决方案：

  function createClosure() {
    let arr = new Array(100000).fill("data");
    return function () {
      console.log(arr.length);
      arr = null; // 手动清理
    };
  }
  

• 未清理的定时器

  let timer = setInterval(() => console.log("running"), 1000);
  clearInterval(timer); // 清理定时器
  

4. 网络优化

使用 CDN 加速静态资源

• CDN（内容分发网络）可以加速 JavaScript 文件、CSS 文件等静态资源的加载：

  <script src="https://i0.wp.com/cdn.jsdelivr.net/npm/vue@3"></script>
  

减少 HTTP 请求

• 合并 JavaScript/CSS 文件，减少 HTTP 请求次数。

• 使用 HTTP/2 或 Brotli 压缩，提升加载速度。

Lazy Load（懒加载）

• 只有当图片进入视口时才加载：

  <img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      let lazyImages = document.querySelectorAll(".lazy");
      lazyImages.forEach(img => {
        img.src = img.dataset.src;
      });
    });
  </script>
  

原文链接：JavaScript的性能优化