パッシブ イベント リスナーによるスクロール パフォーマンスの改善

Kayce Basques

Chrome 51 の新機能であるパッシブ イベント リスナーは、特にモバイルでスクロール パフォーマンスを大幅に向上させる可能性のある新しいウェブ標準です。改善点の実演を比較した動画を以下に示します。

仕組み

ページをスクロールするときに、指にページが固定されていないように感じるほどの遅延が発生することを、スクロール ジャンクと呼びます。スクロールのジャンクが発生する場合は、多くの場合、タッチイベント リスナーが原因です。タップイベント リスナーは、ユーザー操作の追跡や、埋め込みの Google マップを操作するときにスクロールを完全にキャンセルするなど、カスタムのスクロール エクスペリエンスの作成に役立ちます。現在、ブラウザはタップ イベント リスナーがスクロールをキャンセルするかどうかを把握できないため、リスナーが完了するまで待ってからページをスクロールします。パッシブ イベント リスナーでは、リスナーがスクロールをキャンセルしないことを示すフラグを addEventListener の options パラメータに設定できるため、この問題を解決できます。この情報により、ブラウザはリスナーの終了後にではなく、すぐにページをスクロールできます。

その他の情報

パッシブ イベント リスナーの仕組みの概要については、Chromium のブログをご覧ください。

スクロールのパフォーマンスを改善する新しい API

パッシブ イベント リスナーの実装方法については、仕様のリポジトリをご覧ください。

パッシブ イベント リスナーの説明