Web 技术研究所

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

Live集合的元素访问速度也不慢!

  由于Live的速度快的惊人,快到让人害怕使用它是不是需要什么代价。于是就会想到是不是Live集合的元素访问效率慢呢?在Chrome下做了个测试结果确实差很多,但这是一个错误的测试。不会是因为Live集合的访问速度慢,而是因为Chrome的机制导致错误的结果。
  首先,我们这样测试 <script>
for(var i=0;i<1E6;i++)document.write('<span></span>');
onload=function(){
  var i,t,s,a;
  //测试1
  s=document.querySelectorAll("span");
  t=new Date;
  for(i=0;i<s.length;i++)a=s[i];
  console.log(new Date-t+" <- "+"getElementsByTagName");
  //测试2
  s=document.getElementsByTagName("span");
  t=new Date;
  for(i=0;i<s.length;i++)a=s[i];
  console.log(new Date-t+" <- "+"querySelectorAll");
};
</script>

  慢那么多!?不,这是个错误的测试,我们把两个测试的顺序倒过来就会出现相反的结果。

  谁在前面就谁慢,这估计是Chrome的某些优化需要在DOM元素的首次访问时进行,所以公平的测试是在它们之前就把所有元素访问一遍。 <script>
for(var i=0;i<1E6;i++)document.write('<span></span>');
onload=function(){
  var i,t,s,a;
  //先访问一次所有元素
  s=document.body.children;
  for(i=0;i<s.length;i++)a=s[i];
  //测试1
  s=document.querySelectorAll("span");
  t=new Date;
  for(i=0;i<s.length;i++)a=s[i];
  console.log(new Date-t+" <- "+"getElementsByTagName");
  //测试2
  s=document.getElementsByTagName("span");
  t=new Date;
  for(i=0;i<s.length;i++)a=s[i];
  console.log(new Date-t+" <- "+"querySelectorAll");
};
</script>

  所以,Live集合的访问效率并不低!我们再把这个测试放到其它浏览器上看看

  各浏览器的实现方式有点不同,但我可以肯定的是,至少Live集合的元素访问并不慢,即使有差异也是一个数量级以内的。比起从文档中获取元素集合时他们的效率差了两三个数量级,这一个数量级的差异基本可以忽略。所以getElements*方式总是优于querySelectorAll。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^