Javascript滚动功能很慢,Chrome中有很多"Timer Fired:onloadwff.js:310"黄鼠狼事件

Question

我正在尝试调试在Chrome中运行速度有点慢的页面,认为这可能是以下javascript代码的问题:

$(document).ready(function() {
  function navScroll(distance){
    $(window).scroll(function() {
      var scrollTop;
      if(distance){
        scrollTop = distance;
      }else{
        scrollTop = 150;
      }
      if($(window).scrollTop() >= scrollTop) {
        if(!($('#mainNav').hasClass('showNav'))) {
          $('#mainNav').addClass('showNav');
        }
      } else {
        if($('#mainNav').hasClass('showNav')) {
          $('#mainNav').removeClass('showNav');
        }
      }
    });
  }

  if($('.header-image-base').length){
    var windowHeight = $(window).height();
    $('.header-image-base').css('height', windowHeight);
    navScroll(windowHeight);
  }else{
    navScroll();
  }
});

当我查看Chrome控制台的"时间轴"面板并按记录时,这就是我所看到的:

有什么想法在这里发生了什么？我在谷歌上找不到任何对此的引用,也不知道如何解决它.

Answer 1

您的页面很可能很慢,因为您将处理程序附加到窗口滚动事件 - 这不是一个好的做法,如下所述:

将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意.根据浏览器的不同,滚动事件可以激活很多,将代码放入滚动回调会减慢任何滚动页面的尝试(不是一个好主意).因此,滚动处理程序中的任何性能下降只会影响整体滚动的性能.相反,最好使用某种形式的计时器来检查每X毫秒或附加滚动事件,并且只在延迟后运行代码(或者甚至在给定次数的执行之后 - 然后延迟).(来源)

您的屏幕截图显示onloadwff.js位于chrome-extension://hdokiejnpimakedhajhdlcegeplioahd这意味着它是LastPass扩展的一部分 - 如下所示.所以它可能与您的性能问题无关.

(存档截图)

链接 - https://chrome.google.com/webstore/detail/lastpass-free-password-ma/ hdokiejnpimakedhajhdlcegeplioahd