UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web Perfomance】Passive Event Listeners

タッチイベントやホイールイベントのリスナーはページのスクロールを遅らせ可能性がある

スクロールした際のパフォーマンスが悪い場合passive:trueをつけると良いことを知った

developer.chrome.com

ブラウザーはイベントリスナーがスクロールを妨げるかどうかを認識できず、ページをスクロールする前に常にリスナーの実行が完了するのを待つ

この時passive:trueをつけておくと、ブラウザは画面描写とリスナー内の関数の実行を分離し、スクロールを妨げないようにする

実装は以下のような感じ

document.addEventListener('touchstart', onTouchStart, {passive: true});

Jxckさんの記事でscrollTopなどを用いて測定するような場面ではIntersection Observerが適切かもと言う話

blog.jxck.io

developer.mozilla.org

知らなかったので次回調べるみる