Que sont les auditeurs d'événements passifs?
Alors que je cherchais à améliorer les performances d'applications Web progressives, je suis tombé sur une nouvelle fonctionnalité Passive Event Listeners et j'ai du mal à comprendre le concept.
Que sont Passive Event Listeners et quel est le besoin de l’avoir dans nos projets?
Les écouteurs d'événements passifs sont un standard Web émergent, une nouvelle fonctionnalité fournie dans Chrome 51 qui offre un potentiel considérable d'augmentation des performances de défilement. Notes de version de Chrome.
Il permet aux développeurs de s’inscrire pour améliorer les performances de défilement en éliminant la nécessité de faire défiler pour bloquer les écouteurs d’événements tactiles et mobiles.
Problème: Tous les navigateurs modernes disposent d'une fonction de défilement fileté permettant au défilement de s'exécuter sans à-coups, même si du JavaScript coûteux est en cours d'exécution, mais cette optimisation est partiellement annulée par la nécessité. d'attendre les résultats de tous les gestionnaires touchstart et touchmove, ce qui peut empêcher complètement le défilement en appelant preventDefault() sur l'événement.
Solution: {passive: true}
En marquant un écouteur tactile ou à molette comme étant 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.
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);