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.にしようと思います。