您的位置:首页 » 分类: JavaScript » 文章: window resize和scroll事件的基本优化

window resize和scroll事件的基本优化

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

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

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

1
2
3
4
5
6
7
8
9
10
var resizeTimer = null;
$(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        resizeTimer = setTimeout(function(){
            console.log("window resize");
        }, 400);
    }
);

scroll事件优化同理。

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

4 条评论 - 关于 “window resize和scroll事件的基本优化

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注