JS 防抖和节流：避免滥用事件处理程序中的 DOM 重新渲染

2023-11-26 11:34:45

序言

在当今快节奏的 Web 开发环境中，响应迅速且流畅的应用程序至关重要。然而，过度的 DOM 重新渲染会导致性能问题和糟糕的用户体验。为了解决这个问题，防抖和节流函数应运而生。本文将深入探讨这两种技术，解释它们的工作原理、异同，并提供手写的实现代码。

理解 DOM 重新渲染

DOM（文档对象模型）是 Web 浏览器用于表示和操作网页内容的内部结构。当您更新网页元素时，浏览器会进行 DOM 重新渲染以反映这些更改。虽然 DOM 重新渲染对于更新用户界面至关重要，但过度重新渲染会对性能产生负面影响。

防抖函数

防抖函数通过在一定时间内限制函数执行的频率来避免不必要的 DOM 重新渲染。当事件（例如调整大小、滚动或键入）多次连续触发时，防抖函数会延迟执行函数直到该时间段结束。如果在时间段内再次触发该事件，则重置计时器，确保函数仅在最后一次触发后执行一次。

实现防抖函数

以下是手写的防抖函数实现：

const debounce = (fn, delay) => {
  let timerId;
  return (...args) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn(...args);
      timerId = null;
    }, delay);
  };
};

节流函数

与防抖函数不同，节流函数通过限制函数在指定时间间隔内执行的次数来避免不必要的 DOM 重新渲染。即使事件在时间间隔内多次触发，节流函数也只执行一次函数。

实现节流函数

以下是手写的节流函数实现：

const throttle = (fn, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCallTime >= delay) {
      fn(...args);
      lastCallTime = now;
    }
  };
};