javascript - 高效使用jquery滚动功能

Question

我想检查scrollTop是否大于1。但是当我使用以下代码时，当用户滚动时滚动事件不断触发，这会导致性能不佳。

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

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

有没有更有效的方法来做到这一点，以便性能得到控制？

Answer 1

为了优化，请停止每次动态请求 header 。在窗口对象中存储对 header 的引用。

$(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 并每次创建一个新的 window 对象的 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 optimised took 0.060999998822808266 milliseconds

scroll dynamic took 0.26700000125856604 milliseconds

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

延迟可能更多地来自重新设计事件所需的计算，而不是此循环的成本。