window resize和scroll事件的基本优化

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

同事在项目中使用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);
    }
);

scroll事件优化同理。


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » window resize和scroll事件的基本优化

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    这个明显的错误的,你自己试过了吗?
    $.resizeWaiter = false;
    $(window).resize(function() {
    if(!$.resizeWaiter){
    $.resizeWaiter = true;
    setTimeout(function(){
    $.dataTable && $.dataTable.fnDraw(false);
    $.resizeWaiter = false;
    }, 500);
    }
    });

    静茹鱼3年前 (2016-02-23)回复
    • 路过的试了下是对的,反倒是你调用setTimeout()的位置不对与文章中的不相同。你想说明什么?

      ninnka2年前 (2017-01-21)回复
    • 认真点抄

      tabooc2年前 (2017-02-27)回复
  2. #2

    你这代码有问题,不停的拖动,你的timer 只有在停下来以后才会调用,
    var resizeTimer = null;
    window.onresize = function () {
    if (resizeTimer) {
    return;
    }
    resizeTimer = setTimeout(function(){
    console.log(“window resize”);
    }, 400);
    }

    mo1年前 (2017-11-13)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏