优化浏览器性能：Resize 事件防抖配置指南

作者：袖梨 2026-06-02

窗口频繁调整尺寸会导致性能问题，通过防抖技术可优化响应逻辑。下文将详细解析实现方案与技术细节。

为resize事件添加防抖处理，能显著减少窗口拖拽时的高频计算与渲染。关键在于延迟执行布局逻辑，直到用户完成尺寸调整。

为什么 resize 需要防抖

当用户拖拽窗口边框时，浏览器每秒可能触发数十次resize事件。若每次触发都立即执行chart.resize()或重新计算栅格布局，不仅会产生大量无效DOM重排，还可能导致主线程阻塞。防抖技术确保仅处理最终确定的窗口尺寸。

手写一个轻量防抖函数

无需依赖外部库，简单几行代码即可实现：

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

具体使用方法：

组件挂载时绑定事件：window.addEventListener('resize', debounce(handleResize, 300))
务必在组件卸载前移除器，防止内存泄漏
若handleResize需要访问this或闭包变量，需使用箭头函数或bind绑定上下文

在 React 中推荐用自定义 Hook

自定义Hook能更安全地管理生命周期：

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

组件中的调用方式：