Que sont les écouteurs d'événements passifs ?

Question

En travaillant sur l'amélioration des performances des applications Web progressives, j'ai découvert une nouvelle fonctionnalité. Passive Event Listeners et j'ai du mal à comprendre le concept.

Quels sont les Passive Event Listeners et quel est le besoin de l'avoir dans nos projets ?

Answer 1

Les écouteurs d'événements passifs sont un standard émergent du Web. de Chrome 51, qui permet d'améliorer considérablement les performances de performances. Notes de version de Chrome.

Il permet aux développeurs d'opter pour de meilleures performances de défilement en éliminant la nécessité de bloquer le défilement sur les écouteurs d'événements du toucher et de la molette.

Problème : Tous les navigateurs modernes sont dotés d'une fonction de défilement threadé qui permet au défilement de s'effectuer sans heurts même lorsque du JavaScript coûteux est en cours d'exécution, mais cette optimisation est partiellement mise en échec par la nécessité d'attendre les résultats de toute opération de touchstart y touchmove qui peuvent empêcher entièrement le défilement en appelant preventDefault() sur l'événement.

Solution:- {passif : vrai}

En marquant un écouteur de contact ou de roue comme passif, le développeur promet que le gestionnaire n'appellera pas preventDefault pour désactiver le défilement. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user .

addEventListener(document, "touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOM Spec , Vidéo de démonstration , Explainer Doc

Answer 2

Cette erreur se produit tout le temps avec les projets React / Preact. Elle ne semble pas affecter quoi que ce soit. Désactivez-la en désélectionnant "verbose" dans les niveaux de log de devTools.