DOM集合性能テスト

1827 ワード
JavaScript ブラウザ テスト dom
今日はキャッシュDOM集合の性能向上についての話を見ましたので、自分で簡単なページを書いてテストしました.
 
コードは以下の通りです
  
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="terd" style="display:none;">
<img src="image1.jpg" />
</div>
	

</body>
<script>
var t=15;
while(t--){
	var div=document.getElementById("terd");
	div.innerHTML=div.innerHTML+div.innerHTML;
}	

var a=new Date();
console.log(a);
var imgs=document.images;
for(i=0;i<imgs.length;i++)
	imgs[i].src="image2.jpg";
var b=new Date();
console.log(b);
console.log(b.getTime()-a.getTime());

</script>
</html>
 
 
その中には写真が隠れていますので、ブラウザのレンダリングを待つ必要はありません.(注:表示してもJSの統計時間はレンダリング時間を計算します)
 
ここで、循環部分はDOM集合をキャッシュしないコードは以下の通りである.
  
for(i=0;i<document.images.length;i++)
	document.images[i].src="image2.jpg";
 
 
自己複製の15回のDOMをテストして、得られます.
 
キャッシュ
キャッシュしない
 
248
254
 
249
255
 
249
254
 
248
252
平均値
248.5
253.75
 
 
その中のtを17に設定したら、得られます.
 
キャッシュ
キャッシュしない
 
977
998
 
1024
1081
 
977
1012
 
962
979
 
967
1017
 
970
1013
平均値
979.5
1016.667
 
テスト結果から見ると、キャッシュDOM集合後は確かに性能が向上しましたが、微弱でした(2の17枚の画像の循環呼び出しは、平均37ミリ秒アップしました).
 
側面からもわかるように、chromeブラウザはJS運行に最適化しています.
 
そして、私はまたfirefoxの中でテストして、直接悲劇になりました.15回の自己複製は19276ミリ秒が必要です.17回の複製であっさり死んでしまいました.
 
この差は非常に大きいようです.firefoxはまだ新しい特性を研究していません.自分の性能を多く作りましょう.
Javascript for inの欠陥まとめ
Sequelizejs関連