Question

我想检查scrollTop是否大于1.但是当我使用下面的代码时，滚动事件会在用户滚动时继续触发，这会导致性能下降。

$(window).on('scroll', function(){
        var scrollTop = $(this).scrollTop();

        if(scrollTop > 1){
            $('.header').addClass('active');
        }   else{
            $('.header').removeClass('active');
        }
    });

是否有更有效的方法来执行此操作，因此性能会受到检查？

Answer 1

为了优化，每次都要停止动态请求标头。存储对窗口对象中标题的引用。

$(document).ready(function() {
                          window.headerObject = $('.header');
                          window.jQueryWindow = $(window);
                          });
$(window).on('scroll', function(){
    var scrollTop = jQueryWindow.scrollTop();
    if(scrollTop > 1){
           window.headerObject.addClass('active');
    }   else{
        window.headerObject.removeClass('active');
    }
});

不必遍历DOM以便每次请求多次查找.header并且每次都创建一个窗口对象的新jquery对象，而只是存储它们，否定了初始化成本提高的速度。

如果你想要计算速度：

$(document).ready(function() {
                          window.headerObject = $('.header');
                          window.jQueryWindow = $(window);
                          });
$(window).on('scroll', function(){
    starttime = performance.now();
    var scrollTop = jQueryWindow.scrollTop();
    if(scrollTop > 1){
           window.headerObject.addClass('active');
    }   else{
        window.headerObject.removeClass('active');
    }
    console.log('scroll optimised took' + (performance.now() - starttime) + " milliseconds");
});


$(window).on('scroll', function(){
    starttime = performance.now();
    var scrollTop = $(this).scrollTop();

    if(scrollTop > 1){
        $('.header').addClass('active');
    }   else{
        $('.header').removeClass('active');
    }
   console.log('scroll dynamic took' + (performance.now() - starttime) + " milliseconds");
});

scroll optimized采用0.060999998822808266毫秒

scroll dynamic取0.26700000125856604毫秒

如您所见，优化代码平均需要0.06毫秒，而完整动态选择器需要0.26毫秒。相当于性能提升。

延迟可能会更多来自重新设置活动所需的计算而不是此循环的成本。

高效使用jquery滚动功能

1 个答案: