【getElementsByClassName】CLASSの検索どっちが早い！？【querySelector】

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

実験方法

Yahoo!トップページの中のクラス「clfix」の存在確認を1000回１セットで１０回実施。
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検索専用の方がそりゃ早いよねｗ
スッキリ！！