jQueryでDOM要素の検索速度を比較

2018-01-13

jQueryでDOM要素を検索するとき、HTML構造にあわせてセレクタやjQueryメソッドを使用します。
セレクタの記述パターンはいくつかありますが、それぞれどのくらい速度差があるのか気になり比較しました。

各パターンと結果は次の通り。

notypetime[msec]
1.class > .class0.00542
2.class .class0.00368
3.class <div> <span>0.00416
4.class > <div> > <span>0.00364
5.class0.00182
6#id0.00052
7$parents, $find0.00948
8$parents.$find(chain method)0.00856
9.class > .class $parents0.00726
10.class $parents0.00176
11<div> <span> $parents0.00684
12<div> > <span> $parents0.00672

デモページ

  • 環境: chrome 63
  • コード: github

想定通りと言いますか、一意に決まるid指定(6.)が一番ですね。

1.と2.で、1.が遅いのは意外でした。条件が厳しくなっているから検索コストがかかってるのかな。

7.と8.を比較すると、メソッドチェーンの効果が現れています。可読性落ちなければ積極的に利用したほうがよさそうです。

9.〜12.を見ると、10.のクラス指定以外についてはあまり大きな変化がない。
引数で渡しているjQueryオブジェクトの条件がそもそものコストになるようです。

全てにidを振ればよいですが、保守を考えると作業負担が大きそう。
基本は5.や6.を使用して、jQueryオブジェクトで絞り込む時は10.にしようと思います。

© takakd 2018