パッシブイベントリスナーとは何ですか？

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

Passive Event Listeners私たちのプロジェクトにそれを含める必要性は何ですか？

パッシブイベントリスナーは、Chrome 51に同梱されている新しい機能であるWeb標準であり、スクロールパフォーマンスを大幅に向上させる可能性があります。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 Spec 、 Demo Video 、Explainer Doc