JavaScript

【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
スッキリ!!