低版本IE中元素集合的length性能问题

贴吧上提到了这个问题，咱就来做个实验。以前只是知道元素集合的length有性能问题，但是没研究过具体哪个浏览器有问题。其实，也就低版本IE的问题，现代浏览器使用了不同的实现机制早就解决这个问题了。所以如果无视IE8-的话就不用纠结了。
　　测试程序

1. onload=function(){
2.   var i,t,s;
3.   //创建一万个DIV
4.   for(i=0;i<1E4;i++)
5.     document.body.appendChild(document.createElement("div"));
6.   //获取所有DIV的集合
7.   s=document.getElementsByTagName("div");
8.   //访问一万次length，并输出耗时
9.   var t=new Date;
10.   for(i=0;i<1E4;i++)s.length;
11.   console.log(new Date-t);
12. };

　　从这个测试结果可以看出，只有IE8-存在问题。但确实是这个问题吗？我们把测试代码中的DIV的数量从原来的1E4修改到1E2个再做IE8-的测试看看。

1. //......
2.   //创建一百个DIV
3.   for(i=0;i<1E2;i++)
4.     document.body.appendChild(document.createElement("div"));
5. //......

　　耗时显然比原来少了，也就是说元素数量决定了它的访问效率。这就很容易推测出在IE8-中元素集合的length是一个getter属性，每次访问都需要遍历整个文档来统计元素的数量。
原文链接： 转载请注明