jQueryでDOM要素の検索速度を比較
2018-01-13
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.にしようと思います。