Posted at

【getElementsByClassName】CLASSの検索どっちが早い!?【querySelector】

業務でjavascriptを書いていたらふと疑問に感じたので実験してみました。


実験方法

Yahoo!トップページの中のクラス「clfix」の存在確認を1000回1セットで10回実施。

1セットごとに念のためブラウザのキャッシュクリアリロード。


getElementsByClassName('CLASSNAME')

console.time('計測ByClassName')

for(var i=0; i<1000; i++){
if(document.getElementsByClassName('clfix') != null){
console.log('exist');
}
}
console.timeEnd('計測ByClassName')


実験結果

test
result
average

1
134s
0.134s

2
125s
0.125s

3
126s
0.126s

4
130s
0.130s

5
127s
0.127s

6
114s
0.114s

7
134s
0.134s

8
136s
0.136s

9
142s
0.142s

10
121s
0.121s

total
1289s
0.1289s


querySelector('.CLASSNAME')

console.time('計測querySelector')

for(var i=0; i<1000; i++){
if(document.querySelector('.clfix') != null){
console.log('exist');
}
}
console.timeEnd('計測querySelector')


実験結果

test
result
average

1
124s
0.124s

2
142s
0.142s

3
137s
0.137s

4
139s
0.139s

5
129s
0.129s

6
126s
0.126s

7
118s
0.118s

8
142s
0.142s

9
140s
0.140s

10
131s
0.131s

total
1328s
01328.s


結論

まぁCLASS検索専用の方がそりゃ早いよねw

スッキリ!!