前端节流：优化页面性能的利器

节流（Throttling）是一种优化技术，用于控制函数的执行频率。当一个函数被频繁调用时，节流可以限制函数的执行频率，从而减少性能消耗。

一个常见的例子是在页面滚动事件中使用节流。当用户滚动页面时，会频繁触发滚动事件，如果每次滚动事件都执行一些复杂的操作，会导致页面变卡。通过使用节流，可以限制滚动事件的执行频率，例如每100ms执行一次，从而减少函数的执行次数，提升页面性能。

以下是一个使用节流的示例代码：

function throttle(func, delay) {
  let timerId;
  
  return function() {
    if (!timerId) {
      timerId = setTimeout(() => {
        func.apply(this, arguments);
        timerId = null;
      }, delay);
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  // 执行滚动事件的操作
}, 100));

在上面的例子中，throttle函数接受一个函数和延迟时间作为参数。当滚动事件触发时，throttle函数会通过设置定时器来延迟执行传入的函数。如果在延迟时间内再次触发滚动事件，定时器就会被清除，从而保证函数不会被频繁执行。