[解決済み】パッシブイベントリスナーとは何ですか？

質問

プログレッシブWebアプリケーションのパフォーマンスを向上させるために作業しているときに、新しい機能に出会いました。 Passive Event Listeners と、そのコンセプトを理解するのは難しいですね。

とは何ですか？ Passive Event Listeners また、それをプロジェクトに導入する必要性は何でしょうか？

どのように解決するのですか？

パッシブイベントリスナーは新しいWeb標準であり、新しい機能です。 Chrome 51で出荷され、スクロールを大きく向上させる可能性があります。 のパフォーマンスを向上させます。 Chromeのリリースノートです。

タッチやホイールのイベントリスナーでスクロールをブロックする必要がなくなるため、開発者がより良いスクロールパフォーマンスを選択できるようになります。

問題点 最近のブラウザーはすべてスレッドスクロール機能を備えており、高価な JavaScript が実行されているときでもスクロールをスムーズに行うことができます。 touchstart と touchmove ハンドラを呼び出すことで、スクロールを完全に防止することができます。 preventDefault() を指定します。

解決策 {passive: true}

タッチまたはホイールリスナーをパッシブとしてマークすることで、開発者はハンドラーが preventDefault を使用してスクロールを無効化します。 This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user .

document.addEventListener("touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOMスペック , デモ映像 , 説明資料