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

Kayce Basques

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

仕組み

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

詳細

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

スクロールのパフォーマンス向上に役立つ新しい API

仕様のリポジトリでは、パッシブなイベント リスナーの実装方法を確認できます。

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