web-dev-qa-db-fra.com

Fonction de défilement Javascript lente, beaucoup d'événements "Timer Fired: onloadwff.js: 310" en belette Chrome

J'essaie de déboguer une page qui agit un peu lentement dans Chrome, je pense que cela pourrait être un problème avec le code javascript suivant:

$(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();
  }
});

Lorsque je regarde dans le panneau "Chronologie" de la console de Chrome et appuie sur Enregistrer, voici ce que je vois:

enter image description here

Des idées ce qui se passe ici? Je ne trouve aucune référence à cela sur Google et je ne sais pas comment y remédier.

23
JVG

Votre page est probablement lente car vous attachez un gestionnaire à l'événement de défilement de la fenêtre. Ce n'est pas une bonne pratique, comme expliqué ci-dessous:

C’est une très, très mauvaise idée d’attacher des gestionnaires à l’événement de défilement de la fenêtre. Selon le navigateur, l'événement de défilement peut se déclencher beaucoup et mettre du code dans le rappel de défilement ralentira toutes les tentatives de défilement de la page (ce n'est pas une bonne idée). En conséquence, toute dégradation des performances dans le ou les gestionnaires de défilement ne fera qu'aggraver les performances du défilement global. Au lieu de cela, il est préférable d'utiliser une forme de minuterie pour vérifier toutes les X millisecondes OR pour attacher un événement de défilement et exécuter votre code uniquement après un délai (ou même après un nombre donné d'exécutions - et puis un délai). ( source )

Votre capture d'écran montre que onloadwff.js se trouve à chrome-extension://hdokiejnpimakedhajhdlcegeplioahd ce qui signifie qu'il fait partie de l'extension LastPass - comme illustré ci-dessous. Ce n'est donc probablement pas lié à votre problème de performances.

screenshot

( capture d'écran archivée )

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