web-dev-qa-db-ja.com

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

プログレッシブWebアプリケーションのパフォーマンスを向上させるために回避しながら、私は新機能Passive Event Listenersに出会いましたが、その概念を理解するのは難しいと思います。

Passive Event Listenersとは何ですか？また、私たちのプロジェクトでそれを使用する必要性は何ですか？

javascriptgoogle-chromejavascript-eventsevent-listenerpassive-event-listeners
130
Vivek

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

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

問題：最近のブラウザはすべて、高価なJavaScriptが実行されている場合でもスクロールを円滑に実行するためのスレッドスクロール機能を備えていますが、この最適化は次の結果を待つ必要性によって部分的に無効になります。イベントに対してpreventDefault()を呼び出すことによってスクロールを完全に妨げる可能性があるすべてのtouchstartおよびtouchmoveハンドラ。

解決策：{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。

addEventListener(document, "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仕様 、 デモビデオ 、 ）説明者文書

150
Vivek