web-dev-qa-db-ja.com

AngularプロジェクトのみChromeでコンソール上のzone.js違反警告

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）

  1. それらの（違反）警告はどういう意味ですか？
  2. これはアプリケーションのパフォーマンスに有害ですか？
  3. Zone.jsを無効/オーバーライドまたは構成して、これらの警告を削除する方法は？
javascriptangularzonejspassive-event-listeners
17
Ahmed Hashem

受動的イベントとは何ですか？

パッシブイベントリスナーは、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コンソールを詳細モードで表示します。

_// 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は、このための一般的な/使いやすさのソリューションをまだ実装していないため、従うことができます here 。

ただし、TypeScriptはjavascriptにコンパイルされているため、TypeScriptで上記のスニペットを実装しても、違反は無効になります。

パフォーマンスへの影響

違反自体はアプリケーションのパフォーマンスにまったく有害ではありませんが、イベント関数の内容は-になる可能性があるため、Chromeはこの警告をスローします。この警告は_Verbose console mode_。一般ユーザーには表示されません。

私の知る限り、実行時にChromeがコードを解釈することによって生成される警告は無効にする方法はありません。

21
Zze