passive: trueでなぜパフォーマンスがよくなるの?簡単な説明と使い方!

スクロールした際のパフォーマンスが悪い場合(スクロールがカクつく場合)にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、スクロールをスムーズにする方法についてご説明します。

passive:trueの役割

passive:trueevent.preventDefault();という関数をイベント内で読んでいないことをブラウザに教えてあげるために使用します。
具体的には次のように使用します。

passive:trueの使用例

preventDefault()って何?
event.preventDefault()とはブラウザにデフォルトで登録されている処理を無効にする関数です。例えば、wheelのイベントでpreventDefaultを呼ぶと、スクロールを無効化することができます。

なぜスクロールにカクつきが発生するのか?

Javascriptはインタプリタ型のプログラミング言語なので、あらかじめ関数の中身に何が書いてあるのかを解析せず(コンパイルせず)、実際にその処理を実行した際に初めてその処理内容を理解します。そのため、event.preventDefault()の記載がリスナー内に存在するかを判定するには、その処理をすべて実行する必要があります。

ここで問題なのはリスナーに登録されている関数を実行している間、他の処理に待ちが発生してしまうことです。
リスナーの関数の中身が1行くらいなら特に処理時間もかからないため問題にはなりませんが、仮に1000行分の処理があった場合、スクロール中に長い待ちが発生し、結果としてスクロールがガタついたり、スクロール時の画面下の色飛びなどが発生します。

passive: trueのメリット

passive: trueを使ってevent.preventDefault()を関数内で使用していないことをブラウザに教えてあげます。するとブラウザは画面描写とリスナー内の関数の実行を切り離し、それぞれ非同期で処理するようになります。そのため、スクロール処理がスムーズになります。

passive:trueが特に有効なイベント

wheelイベントの他にも次のイベントリスナーに使用すると大きな効果が見られます。

passive:trueが特に有効なイベント
wheel、mousewheel、touchstart、touchmove

Chromeでpassive: trueを使うタイミングを確認

Chromeではリスナーにpassiveが推奨されているため、使用していないと次のワーニングがコンソール上に表示されます。

このワーニングが表示されたリスナー内で、event.preventDefault()を使用していない場合はpassive: trueを導入しましょう。

関連記事

レンダリングのパフォーマンス対策入門〜アニメーション、JSで困った時に

最新記事