window resize和scroll事件的基本优化 – WEB前端开发

Web前端开发 • 11年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

同事在项目中使用scroll事件去加载数据，结果IE下悲剧了。给了一个简单优化方法，效果明显。

只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发，低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。

基本的优化思路：在一定的时间之内，只执行一次resize事件函数。

var resizeTimer = null;
$(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        resizeTimer = setTimeout(function(){
            console.log("window resize");
        }, 400);
    }
);

var resizeTimer = null;

$(window).on('resize', function () {

if (resizeTimer) {

clearTimeout(resizeTimer)

}

resizeTimer = setTimeout(function(){

console.log("window resize");

}, 400);

}

);

scroll事件优化同理。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《window resize和scroll事件的基本优化》