Linux与运维

JavaScript 监听窗口 resize 事件与防抖（Debounce）性能优化

1 min read

当用户拖动改变浏览器窗口大小时，window.onresize 事件会在 1 秒内触发数十次甚至上百次。如果在回调中直接执行复杂的 DOM 操作或图表重绘（如 ECharts resize），会导致页面严重卡顿掉帧。本文提供标准防抖优化方案。

一、 防抖函数（Debounce）实现

// 通用防抖函数
function debounce(func, delay = 200) {
    let timer = null;
    return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// 优雅监听窗口变化
window.addEventListener('resize', debounce(() => {
    console.log("窗口大小调整完成，执行自适应重绘:", window.innerWidth);
}, 200));
#Linux与运维