Web 技术研究所

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

选择器API没有性能优化,慎用

  很多浏览器自带了选择器API,这真是极好的。但蛋疼是浏览器自带的选择器API并没有做效率优化。这种做好事做到一半的行为,就像扶老奶奶过马路扶到大马路中间不干了一样。所以目前的选择器API只是提供方便而已,对性能需求高的程序应该尽量避免使用它。
  之前的文章中有说过元素集合的Live与Static的区别,这不仅仅是个逻辑概念。由于Live元素集合的句柄是唯一的,可以把它当做是DOM树的索引。比起Static元素集合每次都要遍历整个DOM树,当然是从索引里访问元素要快的多。
<script>
//生成HTML元素
for(var i=0;i<1E5;i++)document.write('<span></span>');
document.write('<div class="div" id="div" div=""></div>');
onload=function(){
  //各种选择方式的性能测试
  var i,t,echo=function(t,n){console.log(new Date-t+" <- "+n);};
  console.log("Static-NodeList(querySelectorAll)");
  t=new Date;
  for(i=0;i<1E3;i++)document.querySelectorAll("#div");
  echo(t,"id");
  t=new Date;
  for(i=0;i<1E3;i++)document.querySelectorAll(".div");
  echo(t,"class");
  t=new Date;
  for(i=0;i<1E3;i++)document.querySelectorAll("div");
  echo(t,"tag");
  t=new Date;
  for(i=0;i<1E3;i++)document.querySelectorAll("[div]");
  echo(t,"attribute");
  console.log("Live-NodeList(getElements*)");
  t=new Date;
  for(i=0;i<1E3;i++)document.getElementsByClassName("div");
  echo(t,"class");
  t=new Date;
  for(i=0;i<1E3;i++)document.getElementsByTagName("div");
  echo(t,"tag");
};
</script>

  选择器之间的效率虽然有点差异,但是在Chrome和Firefox中差异并不大,甚至都可以忽略。只是在IE下对属性选择器的处理比较蛋疼,这主要是因为IE对Attribute的访问很慢造成的,这篇咱不纠结这个问题。总之,选择器都是很慢的!它之所以慢就是因为它每次都去遍历整个DOM树,而不懂得使用索引。getElements*系列的方法返回的是Live元素集合,他们使用索引方式的所以比选择器快的多。显然选择器也可以使用索引对自己的性能做优化,但是它没这么做。这意味着选择器的性能非常低,甚至不如jQuery。
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
//生成HTML元素
for(var i=0;i<1E5;i++)document.write('<span></span>');
document.write('<div class="div" id="div" div=""></div>');
onload=function(){
  //性能测试
  var i,t,echo=function(t,n){console.log(new Date-t+" <- "+n);};
  t=new Date;
  for(i=0;i<1E3;i++)$(".div");
  echo(t,"class");
  t=new Date;
  for(i=0;i<1E3;i++)$("div");
  echo(t,"tag");
  t=new Date;
  for(i=0;i<1E3;i++)$("[div]");
  echo(t,"attribute");
};
</script>

  jQuery至少懂得对一些特殊的选择器采用索引方式优化(getElements*),浏览器自带的选择器则完全没有优化。所以还不如jQuery的选择器。不过对于一些特殊选择器无法使用索引方式,jQuery也是调用浏览器自带的选择器来实现的。比如最后的属性选择器在jQuery上效率就不高。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^