ノベルワークスのとっしー(@tossy)です.
自作webアプリ開発の際に, preventDefault と passive: true について少し調べたので, 備忘録として保存しておきます.
preventDefault とは？
preventDefaultは, 「規定のアクションを行わないように, ブラウザに伝える為のメソッド」です.
規定のアクションとは, ブラウザや機種ごとに定義されている「特定の操作に対する標準的な挙動（アクション）」を指します. 例えば, 以下のようなものがあります.
- リンクのクリック → 新しいページへの遷移
- フォーム送信 → ページのリロードを伴うデータ送信
- 右クリック → コンテキストメニューの表示
- スクロール操作 → ページ全体のスクロール
preventDefaultを使うと, この規定のアクションを行われないようにすることが出来ます.
以下はpreventDefaultによってリンクをページ遷移出来ないようにする例です.
const link = document.getElementById('disabled-link');
link.addEventListener('click', (event) => {
event.preventDefault(); // クリックされた際に, 規定のアクションを無効化！
alert('このリンクは無効化されています');
});
passive: trueとは？
addEventListener()のオプションの引数であり, 以下のように使用します.
document.addEventListener('wheel', (e) => {
// 処理
}, { passive: true });
passiveを有効にすると, このイベント内ではpreventDefaultを使用しないことをブラウザに明示します. これにより, ブラウザは処理ごとにpreventDefaultが呼び出されていないかを確認しなくなります.
passive: true にすることによってブラウザはpreventDefaultを確認しないようになりますが, preventDefaultを使用することは出来てしまいます.
preventDefaultを使用した場合は, ブラウザは何もせずコンソールに警告を出します.
passive: true が特に効果を発揮するのは, スクロール時やマウスホイール使用時などです.
例えば, スクロール時はスクロールが少し進むごとにpreventDefaultが呼び出されているかを確認します. これは, preventDefaultが呼び出された場合に即座に規定のアクションを止めるためです.
しかし, preventDefault の呼び出しを常に確認していることで, スクロール時の処理に大きな負荷がかかっています.
負荷の大きさによっては, スクロールがカクつく場合があります. このようなスクロールを「スクロールジャンク」と呼ぶようです.
ここで, preventDefaultを使わない場合は, passive: true をつけることによって, preventDefaultを確認しないようになるので, スムーズにスクロールの改善が期待出来ます.
参考記事