Предупреждения о нарушении 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 для удаления этих предупреждений?
4b9b3361

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

Пассивные прослушиватели событий - это новая функция в спецификации 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
});

Решение проблемы

Аналогичный SO post был сделан о последствиях этого в javascript.

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

Angular пока не реализовал универсальное/простое решение для использования и может следовать здесь.

Однако из-за того, что typescript скомпилирован в javascript, , реализующий вышеприведенный фрагмент в typescript, должен все же отрицать нарушение.


Эффективные воздействия

Нарушение само по себе вовсе не вредно для производительности приложения, однако содержимое вашей функции события может быть - и, следовательно, поэтому Chrome предупреждает это предупреждение. Обратите внимание, что это предупреждение отображается только в Verbose console mode и не будет отображаться для общих пользователей.

Насколько мне известно, не существует способа отключить такие предупреждения, поскольку они генерируются интерпретацией кода Chrome во время выполнения.

14
ответ дан 03 июня '17 в 3:50
источник