さて、これをすぐに邪魔にならないようにしましょう。 wheel(またはtouchstartおよびtouchmove)イベントをページに添付する嫌いWebサイト。 それらを完全に嫌います。 主な理由は、特にモバイルでの恐ろしい結果のパフォーマンスです。 ご覧のとおり、イベントはキャンセルできるため、ブラウザはイベントリスナーの実行が終了するまでページの再描画を待機する必要があります。 イベントがすべてのスクロールで実行される場合、特にイベントをデバウンスしない場合、ページのスクロールは非常にぎこちなくなります。 ありがたいことに、解決策があります:パッシブイベントリスナー

パッシブイベントリスナーを使用すると、キャンセルできないハンドラーをイベントにアタッチして、ブラウザーでイベントリスナーを最適化できます。 これにより、ブラウザは、たとえば、イベントハンドラが実行を終了するのを待たずに、ネイティブの速度でスクロールし続けることができます。

これらは仕様に比較的新しく追加されたものですが、ほとんどの大手プレーヤーによってすでにサポートされています。 (基本的に、IE、Edge、Opera Miniを除くすべての人。)

さらに、それらの使用法は、既存の動作を実際に壊さないようなものです。 他のブラウザをサポートする必要がある場合は、このpolyfillを使用できます。

使用法

残念ながら、パッシブイベントの使用はかなり複雑です。

元のコードが次のようなものだとします。

// Really, if you're using wheel, you should instead be using the 'scroll' event, as it's passive by default.
document.addEventListener('wheel', (evt) => {
  // ... do stuff with evt
}, true)

これに置き換える必要があります:

document.addEventListener('wheel', (evt) => {
  // ... do stuff with evt
}, {
  capture: true,
  passive: true
})

うん。 知っている。 頭を包むことはほとんど不可能です。 😉

説明してみましょう。

そのため、スクロールイベントを登録するときに、最後のパラメーターtrueを追加して、イベントをキャプチャフェーズで実行する必要があることを示すことがよくあります。 (すなわち。 ボトムアップではなくトップダウン)

パッシブイベントを有効にする新機能の1つは、EventListenerOptions仕様です。 怖いように聞こえますが、実際には、そのキャプチャブール値をいくつかのプロパティを持つオブジェクトに置き換えるだけです。 この場合、capturetrueに設定して最初の例と同じ結果を取得し、passivetrueに設定してイベントを作成できます。受け身。

パフォーマンスをさらに向上させるには、イベントを抑制またはデバウンスしていることを確認してください。 🙂

用途

モバイルで最大のパフォーマンスペナルティ(たとえば5倍の速さ)が認識されるイベントは、スクロールホイールタッチスタート、およびタッチムーブです。 。 スクロールはデフォルトですでにパッシブであるため、方程式から1つのイベントが除外されます。 Chrome 55以降、touchstarttouchendもパッシブです。

したがって、モバイルでこれら4つのイベントのいずれかを処理している場合、その小さなポリフィルをスローして、それらのイベントに{ passive: true }を追加しても問題はありません。 99 % o fとにかくこれらのイベントをキャンセルする必要はなく、{ passive: true }を使用すると、パフォーマンスが大幅に向上します。 では、なぜですか?