web-dev-qa-db-fra.com

avertissements de violation de zone.js sur la console dans Angular project only on Chrome

J'ai un Angular 4 créé à l'aide de @angular/cli, lors de l'exécution de l'application en mode développement, je reçois ces avertissements dans la console:

zone.js:1489 [Violation] 'setTimeout' handler took 209ms
2[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

La chose étrange est que l'avertissement apparaît sur Chrome uniquement. (mon chrome est: 58.0.3029.110)

  1. Que signifient ces avertissements (de violation)?
  2. Cela nuit-il aux performances des applications?
  3. Comment désactiver/remplacer ou configurer zone.js pour supprimer ces avertissements?
javascriptangularzonejspassive-event-listeners
17
Ahmed Hashem

Qu'est-ce qu'un événement passif?

Les écouteurs d'événements passifs sont une nouvelle fonctionnalité de la spécification DOM qui permet aux développeurs de choisir de meilleures performances de défilement en éliminant la nécessité de faire défiler pour bloquer les écouteurs d'événements tactiles et mobiles. Les développeurs peuvent annoter les écouteurs tactiles et à molette avec {passive: true} pour indiquer qu'ils n'invoqueront jamais preventDefault. Cette fonctionnalité est livrée en Chrome 51, Firefox 49 et a atterri dans WebKit. Référence .

Chrome lance l'avertissement ...

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

... lorsque vous vous liez à des événements de défilement de la souris, pour avertir essentiellement que vous pouvez avoir inhibé les performances de défilement dans votre événement ou désactivé les événements par défaut en appelant preventDefault().

Chrome génère également l'erreur lorsque vous essayez d'appeler toujours preventDefault() dans un événement passif.

Unable to preventDefault inside passive event listener invocation.

Firefox a une erreur similaire pour cela, mais ne semble pas lancer un avertissement comme Chrome:

Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.

Vitrine d'avertissement

Exécutez l'extrait de code suivant et affichez la console Chrome en mode verbeux).

// WILL throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // prevents default browser functionality
});

// will NOT throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // does nothing since the listener is passive
}, {
  passive: true
});

Résoudre le problème

Un similaire SO post a été fait sur les implications de cela en javascript.

En marquant un écouteur tactile ou à molette comme passif, le développeur promet que le gestionnaire n'appellera pas preventDefault() pour désactiver le défilement. Cela libère le navigateur pour répondre immédiatement au défilement sans attendre JavaScript, assurant ainsi une expérience de défilement fluide et fiable pour l'utilisateur.

Angular n'a pas encore implémenté de solution générique/de facilité d'utilisation pour cela et peut être suivi ici .

Cependant, étant donné que TypeScript est compilé en javascript, l'implémentation de l'extrait ci-dessus dans TypeScript devrait toujours annuler la violation .

Impacts sur les performances

La violation elle-même n'est pas du tout préjudiciable aux performances de l'application, mais le contenu de votre fonction d'événement pourrait être - et c'est pourquoi pourquoi Chrome lève cet avertissement. Notez que cet avertissement est uniquement affiché dans Verbose console mode Et ne sera pas montré aux utilisateurs généraux.

Pour autant que je sache, il n'y a aucun moyen de désactiver ces avertissements car ils sont générés par l'interprétation du code par Chrome au moment de l'exécution.

21
Zze