今天看到关于缓存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运行的优化很牛B了。
然后，我又在firefox中测试， 直接悲剧了，15次自我复制时需要19276毫秒， 17次复制干脆就死掉。
这个差距看来非常的大，firefox还是少研究新特性了，多搞一下自己的性能吧。
5633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
