13 个JavaScript 性能提升技巧分享

1. 使用事件委托优化事件处理

事件委托（Event Delegation）是一种常见的优化前端性能的方法。我们通过将事件监听器添加到较少的祖先元素上，然后利用事件冒泡的特性来处理事件。

这样做的好处在于可以减少事件处理程序的数量，降低内存使用，提高性能。尤其是在需要大量操作 DOM 元素时，这种优化效果更加明显。

示例：

// 定义一个包含大量按钮的父元素
let container = document.getElementsByClassName('container')[0];

// 委托处理按钮点击事件
container.addEventListener('click', function(event) {
  if (event.target.classList.contains('btn')) {
    console.log('clicked');
  }
});

2. 利用节流和防抖提高页面性能

节流（Throttle）和防抖（Debounce）都是基于函数的高频调用优化实现的。

节流是指在一定时间内（如 500ms）只执行一次特定的操作，而防抖则是在等待一段时间（如 500ms）后执行一次操作。

这两种方法可以避免函数在快速的连续调用中多次执行，从而降低 CPU 和内存的使用，提高页面性能。

示例：

// 点击按钮触发节流事件
function throttle(callback, delay) {
  let timerId;

  return function(event) {
    if (!timerId) {
      timerId = setTimeout(function() {
        callback(event);
        timerId = null;
      }, delay);
    }
  };
}

// 点击按钮触发防抖事件
function debounce(callback, delay) {
  let timerId;

  return function(event) {
    clearTimeout(timerId);
    timerId = setTimeout(function() {
      callback(event);
    }, delay);
  };
}

// 定义一个按钮元素
let button = document.getElementById('button');

// 节流处理按钮点击事件
button.addEventListener('click', throttle(function(event) {
  console.log('clicked');
}, 500));

// 防抖处理按钮点击事件
button.addEventListener('click', debounce(function(event) {
  console.log('clicked');
}, 500));

以上是“13 个JavaScript 性能提升技巧分享”中的两个示例，其中第一个演示了如何利用事件委托优化事件处理，第二个演示了如何利用节流和防抖提高页面性能。当然，整篇攻略中还有更多的优化技巧，建议仔细阅读学习。