devlog

フロントエンドエンジニアの技術ブログ

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

@ 2019 devlog