如何配置 Resize 事件的防抖 (Debounce) 减少浏览器重绘压力-js教程-PHP中文网

resize事件需防抖，因窗口拖拽时每秒触发数十次，直接响应会导致重复计算、dom重排及主线程阻塞；防抖确保仅在停止调整后执行最终布局逻辑。

如何配置 resize 事件的防抖 (debounce) 减少浏览器重绘压力

直接在 resize 事件监听中加入防抖，能有效避免窗口拖拽过程中高频触发导致的重复计算和重绘。核心是让浏览器只在用户停止调整尺寸后的一小段时间才执行布局或渲染逻辑。

为什么 resize 需要防抖

浏览器在用户拖动窗口边框时，每秒可能触发数十次 resize 事件。若每次都在回调里调用 chart.resize()、重新计算栅格列数或触发 setState，不仅造成大量无意义 DOM 重排，还可能阻塞主线程。防抖确保只响应“最终尺寸”，而不是“中间过程”。

手写一个轻量防抖函数

不需要引入 Lodash，几行代码就能搞定：

const debounce = (fn, delay = 250) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

使用方式：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

在组件挂载时绑定：window.addEventListener('resize', debounce(handleResize, 300))
务必在卸载前移除监听器，否则会内存泄漏
如果 handleResize 依赖 this 或闭包变量，注意用箭头函数或 bind 绑定上下文

在 React 中推荐用自定义 Hook

比手动管理更安全，自动处理清理逻辑：

function useDebouncedResize(callback, delay = 250) {
  useEffect(() => {
    const handler = debounce(callback, delay);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [callback, delay]);
}

在组件中调用：