Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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

  贴吧上提到了这个问题,咱就来做个实验。以前只是知道元素集合的length有性能问题,但是没研究过具体哪个浏览器有问题。其实,也就低版本IE的问题,现代浏览器使用了不同的实现机制早就解决这个问题了。所以如果无视IE8-的话就不用纠结了。
  测试程序
onload=function(){
  var i,t,s;
  //创建一万个DIV
  for(i=0;i<1E4;i++)
    document.body.appendChild(document.createElement("div"));
  //获取所有DIV的集合
  s=document.getElementsByTagName("div");
  //访问一万次length,并输出耗时
  var t=new Date;
  for(i=0;i<1E4;i++)s.length;
  console.log(new Date-t);
};

  从这个测试结果可以看出,只有IE8-存在问题。但确实是这个问题吗?我们把测试代码中的DIV的数量从原来的1E4修改到1E2个再做IE8-的测试看看。
//......
  //创建一百个DIV
  for(i=0;i<1E2;i++)
    document.body.appendChild(document.createElement("div"));
//......

  耗时显然比原来少了,也就是说元素数量决定了它的访问效率。这就很容易推测出在IE8-中元素集合的length是一个getter属性,每次访问都需要遍历整个文档来统计元素的数量。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^