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

2018-01-13

#JavaScript

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

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

no type time[msec]
1 .class > .class 0.00542
2 .class .class 0.00368
3 .class <div> <span> 0.00416
4 .class > <div> > <span> 0.00364
5 .class 0.00182
6 #id 0.00052
7 $parents, $find 0.00948
8 $parents.$find(chain method) 0.00856
9 .class > .class $parents 0.00726
10 .class $parents 0.00176
11 <div> <span> $parents 0.00684
12 <div> > <span> $parents 0.00672

デモページ

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

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

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

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

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

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

© kdtakahiro 2018