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のコンソールの「タイムライン」パネルを見て、レコードを押すと、次のようになります。
ここで何が起こっているのでしょうか?グーグルでこれへの言及を見つけることができず、それを修正する方法がわかりません。
ハンドラーをウィンドウスクロールイベントにアタッチしているため、ページが遅くなる可能性が最も高いです。これは、以下で説明するように、良い方法ではありません。
ウィンドウスクロールイベントにハンドラーをアタッチすることは非常に悪い考えです。ブラウザによっては、スクロールイベントが頻繁に発生する可能性があり、スクロールコールバックにコードを配置すると、ページをスクロールする試みが遅くなります(お勧めできません)。結果としてスクロールハンドラーのパフォーマンスが低下すると、全体的なスクロールのパフォーマンスがさらに悪化します。代わりに、何らかの形のタイマーを使用してXミリ秒ごとにORをチェックし、スクロールイベントをアタッチして、遅延後に(または、指定された回数の実行後に)コードを実行することをお勧めします。 )。 ( ソース )
スクリーンショットは、onloadwff.jsがchrome-extension://hdokiejnpimakedhajhdlcegeplioahd
にあることを示しています。これは、以下に示すように、LastPass拡張機能の一部であることを意味します。したがって、おそらくパフォーマンスの問題とは関係ありません。
リンク- https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd