コードを書いているとDOMが存在するかどうかって判定を個人的に良く使います。
ネットで調べると何が速いとか出てきますが、やはり自分で実験してみないと納得できないので行ってみた。
あくまでも自分を納得させるためだけの実験であって、結果が世の正義だなんて主張する気はサラサラありませぬ。
実験環境とか
対象ページ:食べログさんのトップページ(執筆時現在)
対象DOM(ID):line3559の#score-help-url(ソース最下部のID)
ブラウザ:Firefox 51.0.1 (64 ビット)
試行回数:1000回を10セットの10000回
実験データ
ケース1:$('#score-help-url')[0]
僕が良く使う判定文ですw
なんでこれなのかは、最初に覚えたやり方だから(笑)
No. | Result(1k) | Average |
---|---|---|
1 | 1133.14ms | 1.13314ms |
2 | 1283.13ms | 1.28313ms |
3 | 1196.36ms | 1.19636ms |
4 | 1074.92ms | 1.07492ms |
5 | 1053.23ms | 1.05323ms |
6 | 1076.31ms | 1.07631ms |
7 | 1127.34ms | 1.12734ms |
8 | 959.73ms | 0.95973ms |
9 | 890.24ms | 0.89024ms |
10 | 918.92ms | 0.91892ms |
Ave | 1.07133ms |
ケース2:$('#score-help-url').length > 0
よく他人様のコードで良く見かけるケース
No. | Result(1k) | Average |
---|---|---|
1 | 1149.92ms | 1.14992ms |
2 | 1183.5ms | 1.1835ms |
3 | 1043.87ms | 1.04387ms |
4 | 1021.04ms | 1.02104ms |
5 | 1178.1ms | 1.1781ms |
6 | 1130.74ms | 1.13074ms |
7 | 907.92ms | 0.90792ms |
8 | 965ms | 0.965ms |
9 | 920.16ms | 0.92016ms |
10 | 1174.93ms | 1.17493ms |
Ave | 1.067518ms |
ケース3:$('#score-help-url').length
ケース2の簡略版?
No. | Result(1k) | Average |
---|---|---|
1 | 1097.48ms | 1.09748ms |
2 | 1037.17ms | 1.03717ms |
3 | 980.55ms | 0.98055ms |
4 | 952.79ms | 0.95279ms |
5 | 1162.75ms | 1.16275ms |
6 | 1052.19ms | 1.05219ms |
7 | 978.23ms | 0.97823ms |
8 | 906.48ms | 0.90648ms |
9 | 945.24ms | 0.94524ms |
10 | 995.29ms | 0.99529ms |
Ave | 1.010817ms |
ケース4:document.getElementById("score-help-url") != null
どっかにこれがぶっちぎり最速!っぽいことが書いてあった
No. | Result(1k) | Average |
---|---|---|
1 | 1059.89ms | 1.05989ms |
2 | 1025.28ms | 1.02528ms |
3 | 1035.77ms | 1.03577ms |
4 | 980.89ms | 0.98089ms |
5 | 1069.44ms | 1.06944ms |
6 | 981.58ms | 0.98158ms |
7 | 942.43ms | 0.94243ms |
8 | 938.23ms | 0.93823ms |
9 | 924.28ms | 0.92428ms |
10 | 1019.25ms | 1.01925ms |
Ave | 0.997704ms |
結論
やはりケース4の書き方が速いという結果がでましたが、マクロな世界過ぎてぶっちぎりなのか謎だw(謎)
速いに越したことはないので、今後、リファクタの際にはこの書き方に変えて行こうと思ふ。
参考データ
こんなスクリプトをコンソールでぶん回しました。
test.js
$(function(){
console.time('DOM確認速度計測')
for(var i=0; i < 1000; i++){
if(document.getElementById('score-help-url') != null){
console.log('EXIST');
};
};
console.timeEnd('DOM確認速度計測')
});