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

У меня есть угловой проект 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)

  1. что означают эти (нарушения) предупреждения?
  2. это вредно для производительности приложения?
  3. как отключить / переопределить или настроить зону.js для удаления эти предупреждения?
13
angular javascript zonejs

1 ответов

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

пассивные прослушиватели событий-это новая функция в спецификации DOM, которая позволяет разработчикам выбирать лучшую производительность прокрутки, устраняя необходимость прокрутки для блокировки прослушивателей событий touch и wheel. Разработчики могут аннотировать прослушиватели touch и wheel с помощью {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 в подробном режиме.

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

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

подобное так пост было сделано о последствиях этого в javascript.

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

Angular еще не реализовал общее / простое в использовании решение для этого и может следовать здесь.

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

Производительность

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

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

16