Pensez à marquer le gestionnaire d'événements comme "passif" pour rendre la page plus réactive.

Question

J'utilise marteau pour faire glisser et cela devient instable lorsque je charge d'autres éléments, comme le dit ce message d'avertissement.

Le traitement de l'événement d'entrée 'touchstart' a été retardé de X ms en raison de l'occupation du thread principal. Envisagez de marquer «passif» le gestionnaire d’événements pour rendre la page plus réactive.

Alors j'ai essayé d'ajouter 'passif' à l'auditeur comme si

 Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});
 

mais je reçois toujours cet avertissement.

Answer 1

Pour ceux ayant reçu cet avertissement pour la première fois, elle est due à un saignement de la pointe de fonctionnalité appelée Passive des Écouteurs d'Événement qui a été implémentée dans les navigateurs assez récemment (été 2016). À partir de https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Passive des écouteurs d'événement sont une nouvelle fonctionnalité dans les DOM spec qui permettent les développeurs de l'opt-in afin de mieux faire défiler les performances en éliminant le besoin de défilement à bloc sur le contact et la roue des écouteurs d'événement. Les développeurs peuvent annoter contact de la roue et les auditeurs {passive: true} pour indiquer qu'ils ne seront jamais invoquer preventDefault. Cette fonctionnalité livré dans Chrome 51, Firefox 49 et a atterri dans WebKit. Pour une complète explication officielle en lire plus ici.

Voir aussi: Ce sont passifs, des écouteurs d'événement?

Vous pourriez avoir à attendre pour votre .bibliothèque js pour mettre en œuvre l'appui.

Si vous êtes à la gestion des événements indirectement par l'intermédiaire d'une bibliothèque JavaScript, vous pouvez être à la merci de la bibliothèque de l'appui de la fonctionnalité. En août 2016, il ne ressemble pas à l'une des grandes bibliothèques ont mis en œuvre l'appui. Quelques exemples:

• jQuery.js - question d'actualité: https://github.com/jquery/jquery/issues/2871
• React.js - question d'actualité: https://github.com/facebook/react/issues/6436
• Hammer.js - question d'actualité: https://github.com/hammerjs/hammer.js/pull/987
• parfait-scrollbar - question d'actualité: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - question d'actualité: https://github.com/angular/angular.js/issues/15901