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

En travaillant pour améliorer les performances des applications Web progressives, je suis tombé sur une nouvelle fonctionnalité Passive Event Listenerset j'ai du mal à comprendre le concept.

Que sont Passive Event Listenerset quel est le besoin de l'avoir dans nos projets?

Les écouteurs d'événements passifs sont une nouvelle norme Web émergente, une nouvelle fonctionnalité intégrée à Chrome 51 qui offre un potentiel important pour les performances de défilement. Notes de version de Chrome.

Il permet aux développeurs d'accepter de meilleures performances de défilement en éliminant le besoin de défilement pour bloquer les écouteurs d'événements tactiles et roulants.

Problème: Tous les navigateurs modernes disposent d' une fonction de défilement enfilée pour permettre le défilement de fonctionner en douceur , même lorsque JavaScript coûteux est en cours d' exécution, mais cette optimisation est partiellement vaincu par la nécessité d'attendre les résultats de tout touchstartet les touchmovegestionnaires, ce qui peut empêcher le défilement entièrement en appelant preventDefault()sur l'événement.

Solution: {passive: true}

En marquant un auditeur tactile ou à molette comme passif, le développeur promet que le gestionnaire n'appellera pas preventDefaultpour 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.

document.addEventListener("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);

Spécifications DOM , vidéo de démonstration , document explicatif