[この記事は Rick Byers、Stefan Zager、”低品質撲滅の専門家”による Chromium Blog の記事 "New APIs to help developers improve scroll performance" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

Chrome の最初のリリース以来、スピードは最優先事項であり、デベロッパーがインタラクティブなウェブ エクスペリエンスの限界を次々に超えるなか、その重要度は増すばかりです。デベロッパーが関与しなくても Chrome が自動で行うパフォーマンス最適化も多くありますが、ときに、Chrome が高速に実行されるには、より多くの情報が必要な場合があります。Chrome 51 では、パッシブ イベント リスナーと Intersection Observer のサポートが導入されました。この 2 つは、デベロッパーが魅力的で効果的なエクスペリエンスをを支援する新しいウェブ標準です。

タッチ イベント リスナーは、多くの場合、カスタマイズしたスクロール体験や、ユーザー エンゲージメントの分析を目的として使用されます。これらのリスナーにより、ユーザーが画面にタッチしたときに実行する JavaScript を登録し、スクロールを完全にキャンセルすることができるようになります。ウェブ アプリがスクロールをキャンセルするかどうかを事前に知らされていない場合、Chrome はこの JavaScript が終了するのを待ってからページ自体をスクロールする必要があります。問題は、80% 以上のタッチ リスナーが実際にはスクロールをキャンセルせず、最大数秒間スクロールを遅らせてしまうことです。これにより、ページがユーザーの指について来ないように感じ、品質が大幅に低下してしまいます。

Chrome 51 では、イベント リスナーがスクロールを阻止しないことを事前に宣言できるようになります。デベロッパーは、長時間実行するスクリプトを避けることで、あらゆる品質低下を防ぐ必要がありますが、この変更により、JavaScript の実行が完了するまでスクロールを遅らせる必要がなくなります。パッシブ イベント リスナーの詳細およびその使用方法については、EventListenerOptions の詳細な説明を参照してください。


変更なしの場合の cnn.com のスクロール（左）とタッチリスナーをパッシブにアップデートした今後のサイト（右）

ウェブ プラットフォームの改善により遅延を削減する方法がもう 1 つあります。JavaScript で効率的に実装できない共通の操作を、ブラウザが代わりにネイティブに構築することです。例えば、ある要素がドキュメントのビューポート内で表示可能か、別のスクロール コンテナにあるかの計算に使用されている大規模な JavaScript です。これは、特定の要素が表示されていたか、ページの下部に動的に追加コンテンツを読み込むかを知るために役立ちますが、ユーザーの操作で頻繁に実行されると、品質低下や不必要なバッテリー消費の原因となります。

Chrome 51 には、より効率が良く可視性情報を提供する新しい API、Intersection Observer が含まれています。この API を使えば、任意の要素が監視対象の要素またはその子要素と交差したら、コールバックを受け取ることができ、今後は独自の JavaScript で実装することなく、ページ読み込みやスクロール パフォーマンスの改善を実現することができるようになります。詳細情報と実装の詳細は、Intersection Observer の説明を参照してください。

調査 に よると、パフォーマンスが向上するとユーザーの満足度が上がり、ユーザーはそのサイトに繰り返しアクセスするようになります。パフォーマンスは、ブラウザ実装者だけではなく、ウェブ製作者も含めたウェブ エコシステムのすべての人々が気にかける必要のあることです。トップレベルのサイトと埋め込みコンテンツの両方のデベロッパーがこれらの新しい API を使用すれば、すべてのユーザーに対する高速なウェブが実現します。

Posted by Eiji Kitamura - Developer Relations Team