web-dev-qa-db-ja.com

JavaScriptスクロール機能が遅く、Chromeで "Timer Fired：onloadwff.js：310"イタチイベントがたくさん発生する

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のコンソールの「タイムライン」パネルを見て、レコードを押すと、次のようになります。

enter image description here

ここで何が起こっているのでしょうか？グーグルでこれへの言及を見つけることができず、それを修正する方法がわかりません。

javascriptjquerygoogle-chromegoogle-chrome-devtools
23
JVG

ハンドラーをウィンドウスクロールイベントにアタッチしているため、ページが遅くなる可能性が最も高いです。これは、以下で説明するように、良い方法ではありません。

ウィンドウスクロールイベントにハンドラーをアタッチすることは非常に悪い考えです。ブラウザによっては、スクロールイベントが頻繁に発生する可能性があり、スクロールコールバックにコードを配置すると、ページをスクロールする試みが遅くなります（お勧めできません）。結果としてスクロールハンドラーのパフォーマンスが低下すると、全体的なスクロールのパフォーマンスがさらに悪化します。代わりに、何らかの形のタイマーを使用してXミリ秒ごとにORをチェックし、スクロールイベントをアタッチして、遅延後に（または、指定された回数の実行後に）コードを実行することをお勧めします。 ）。 （ ソース ）

スクリーンショットは、onloadwff.jsがchrome-extension://hdokiejnpimakedhajhdlcegeplioahdにあることを示しています。これは、以下に示すように、LastPass拡張機能の一部であることを意味します。したがって、おそらくパフォーマンスの問題とは関係ありません。

screenshot

（ アーカイブされたスクリーンショット ）

リンク- https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd

38
Dennis T --Reinstate Monica--