Функция прокрутки Javascript медленная, много событий "Таймер уволен: onloadwff.js: 310" в Chrome

Я пытаюсь отлаживать страницу, которая в 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

Любые идеи, что здесь происходит? Я не могу найти никаких ссылок на это в google и не знаю, как исправить это.

Ответы

Ответ 1

Ваша страница медленнее, скорее всего, потому что вы снова прикрепляете обработчик к событию прокрутки окна - это не очень хорошая практика, как описано ниже:

Это очень, очень и плохая идея привязать обработчики к событию прокрутки окна. В зависимости от браузера событие прокрутки может много гореть, а ввод кода в обратном вызове прокрутки замедляет любые попытки прокрутки страницы (не очень хорошая идея). Любое снижение производительности в обработчике прокрутки в результате приведет только к снижению производительности прокрутки в целом. Вместо этого гораздо лучше использовать какую-либо форму таймера для проверки каждого X миллисекунды или для присоединения события прокрутки и запускать ваш код только после задержки (или даже после заданного количества исполнений, а затем задержка). (источник)

Ваш скриншот показывает, что onloadwff.js находится в chrome-extension://hdokiejnpimakedhajhdlcegeplioahd, что означает его часть s LastPass extension — как показано ниже. Поэтому он, вероятно, не связан с вашей проблемой производительности.

screenshot

(заархивированный скриншот)

Ссылка - https://chrome.google.com/webstore/detail/lastpass-free-password-ma/ hdokiejnpimakedhajhdlcegeplioahd