Предупреждения о нарушении zone.js на консоли в проекте Angular только для Chrome

У меня есть проект Angular 4, созданный с помощью @angular/cli, при запуске приложения в режиме разработки я получаю эти предупреждения в консоли:

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.

Странно, что предупреждение появляется только в Chrome. (моя версия сборки chrome: 58.0.3029.110)

  • Что означают эти (нарушения) предупреждения?
  • Это вредно для производительности приложения?
  • Как отключить/переопределить или настроить zone.js для удаления этих предупреждений?

ОТВЕТЫ

Ответ 1

Что такое пассивное событие?

Пассивные прослушиватели событий - это новая функция в спецификации DOM, которая позволяет разработчикам делать выбор, чтобы лучше выполнять прокрутку, устраняя необходимость прокрутки для блокировки при прослушивании прикосновений и событий на колесиках. Разработчики могут аннотировать касание и прослушиватели колес с помощью {passive: true}, чтобы указать, что они никогда не будут вызывать preventDefault. Эта функция поставляется в Chrome 51, Firefox 49 и выгружается в WebKit. Ссылка.

Chrome выдает предупреждение...

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

... когда вы привязываетесь к событиям прокрутки мыши, чтобы по существу предупредить, что вы можете заблокировать производительность прокрутки в своем событии или отключить события по умолчанию, сделав вызов preventDefault().

Chrome также выдает ошибку при попытке и по-прежнему вызывать preventDefault() в пассивном событии.

Unable to preventDefault inside passive event listener invocation.

У Firefox есть аналогичная ошибка для этого, однако, похоже, это не предупреждение, как Chrome:

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

Предупреждающая витрина

Выполните следующий фрагмент и просмотрите консоль Chrome в режиме Verbose.

// 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
});