addEventListenerの第三引数に渡すオプションオブジェクト、`passive: true`について調べた。
同僚が書いているコードを眺めていた所、addEventListenerの第三引数にオブジェクトとして{passive: true}
を渡していました。
「あれ?第三引数って、useCapture
を真偽値で設定するんじゃなかったっけ。」と思いながらこの記述について調べてみたところ、、、
passive: Boolean 値で、 true ならば、 listener で指定された関数が preventDefault() を呼び出さないことを示します。呼び出されたリスナーが preventDefault() を呼び出すと、ユーザーエージェントは何もせず、コンソールに警告を出力します。詳細はパッシブリスナーによるスクロール性能の改善をご覧ください。
引用元: EventTarget.addEventListener() - Web API | MDN
{ passive: true }
を指定する事で明示的にそのリスナー内でpreventDefault()
を呼び出さない事を伝える事ができます。
そして、予めpreventDefault()
を呼び出さない事を保証する事でスクロール時の処理を最適化しパフォーマンスの向上が見込めるようです。
この指定の有無は、Lighthouseの評価基準にもなっているとの事。 developers.google.com
詳しくは、こちらの記事を参考にさせて頂きました。 blog.jxck.io