高效使用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。在 window object 中存储对 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 object header =28=] 每次，你只需存储它们，否定初始化成本提高速度。

如果你想比较速度：

$(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 毫秒。相当的性能提升。

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

高效使用jquery滚动功能

Efficient use jquery scroll function

javascript

jquery

scroll