スクロールに合わせて実行する処理のパフォーマンス

Question

スクロールに合わせて要素にクラス名を追加する処理で下記参考ページのように
単純にスクロールイベントがある毎に実行すると負荷が大きそうに思うんですが、
そこまで気にする必要ないレベルでしょうか。

https://qiita.com/AsagiriDesign/items/0ec5623755c1d633bc85

$(window).scroll(function() {
 $(".animation .anm_mod").each(function() {
  const position = $(this).offset().top;
  const scroll = $(window).scrollTop();
  const windowHeight = $(window).height();
  if (scroll > position - windowHeight) {
   $(this).addClass("active");
  }
  if (scroll < 100) {
   $(this).removeClass("active");
  }
 });
});

要素が数十個あった時などはそれなりに、負荷はかかりそうですが
自分がそういう実装のサイトを見ていても気づくことはないだろうとも思います。

よろしくお願いいたします。

Answer 1

現実問題として、スクロール感にかなりの影響を与えます。そのため、イベントを時間で切って間引く、という方法が定石のようになっています（参考）。

あとは、scrollイベントをセットしただけで、「そのイベントがpreventDefaultを発生させるかもしれない（そうなればスクロールを止める必要がある）」となって、スクロールが詰まってしまいます。そのため、preventDefaultしないのであればPassiveリスナーとして登録するのがいいでしょう。ただし、IE11などは非対応なので要注意です（Google、参考）。

Comments

[webgoto]

このままの使用するのは良くなさそうですね。
Passiveリスナーの事は意識してませんでしたので参考になりました。
ご回答有りがとうございます。