jQuery选择器探讨进阶

jQuery选择器探讨

在jQuery中,当用户把选择器表达式作为参数传递给$()函数时,jQery的Sizzle先对这个选择器表达式进行语法分析,然后再决定如何获得表达式所代表的这些元素。在框架底层,Sizzle应用了浏览器所支持的最高效的DOM 方法来获取一个节点列表(nodeList),这个节点列表是一个类似于数组的对象的DOM元素的集合。下面的列表展示了jQuery的Sizzle内部采用的浏览器DOM遍历方法和浏览器的支持情况:

  1. 1. .getElementById()  浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+;
  2. 2. .getElementsByTagName()  浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+;
  3. 3. .getElementsByClassName() 浏览器支持情况:IE 9+, Firefox 3+, Safari4+, Chrome 4+, and Opera 10+;
  4. 4. .querySelectorAll() (这个是浏览器内置的css选择符查询元素方法,比getElementsByTagName和getElementsByClassName效率要高很多。)浏览器支持情况:IE 8+, Firefox 3.5+, Safari 3+, Chrome 4+, and Opera 10+;

如果是最新版本的浏览器,ie8以上,Sizzle采用.querySelectorAll()方法来获取对应的DOM元素集,这个方法以CSS表达式为string参数,获取DOM元素的速度比其他3个方法更快更高效。当jQuery 选择器表达式中包含自定义选择符,比如eq() 或  :odd 或 :even,因为没有配对的CSS表达式,jQuery只能采用前3个方法(.getElementById(),.getElementsByTagName(),.getElementsByClassName() )来逐个遍历总元素集(通过 document.getElementsByTagName(‘*’)获得),再检验元素,最终获得对应于选择表达式的元素集,这种遍历查找性能消耗比较大。因此,如果不能用.querySelectorAll()直接获得对应的元素,采用另外3种方法获得元素集的效率要差一些,所以,在jqury中,一些选择器表达式普遍快于另外一些选择器表达式,把选择器中的伪类移到相应的方法中可以加速查找页面文档dom元素的时间。为了简单起见,我们把jQuery中用.getElementById (),.getElementsByTagName(),.getElementsByClassName() 这3个方法的结合来查找元素称为:循环和检验(loop and test)过程。

下面我们来看几个例子:

我们采用$(‘input[type=”text”]’)和$(‘input:text’)这两个表达式来检验上述论点。$(‘input[type=”text”]’),因为采用了CSS的属性表达式,所以Sizzle用.querySelectorAll()来查找元素,$(‘input:text’),采用了jQuery自定义的选择器表达式:text,.querySelectorAll()方法无法解析,所以Sizzle底层采用循环和检验(loop and test)过程。

结果如下图所示:

纵轴中的数字代表在规定时间内,表达式选择器方法可以被执行的次数,因此,数值越高,执行效率越好,代表执行时间越短,性能越好。在现代浏览器中,(Chrome 12, Firefox4, and Safari 5,IE 8+) ,CSS选择器表达式底层采用.querySelectorAll()方法,很好的实现了优势,平均而言,大概是自定义选择器表达式性能表现的2倍。但是,在ie7中,这两个选择器的性能表现差不多,这是因为在ie7环境下,Sizzle都采用了循环和检验(loop and test)过程累找到相应的元素,(因为ie7不支持.querySelectorAll()方法。),所以在编写jQuery的选择器函数进行事件注册时,要特别注意,可能你的代码在ie8以上执行正确,但在ie7中,$()函数返回的object.length将是0。比如下面这个列子的代码,在ie7下会导致执行错误:

$(document).ready(function() {
  var trigger = $('#filter_sample');
  var url = $('+ a',trigger).attr('href');
});

在ie6,ie7中,变量url的值将是undefined,因为ie7不支持.querySelectorAll()方法,而按.getElementsByTagName()方法解析上面的选择表达式得到的结果集为空,所以$(‘+ a’,trigger)在ie7下将得到一个空数组对象。自然对这个空数组取href属性,返回undefined了。所以,在jQuery中,合理的编写选择表达式是十分重要的。

在浏览器中,$(‘input:eq(1)’)和$(‘input’).eq(1)的性能表现差异比较大:

从上图可知,甚至在ie7中,把:eq()选择器移出表达式,转而采用.eq()方法,性能也有100%的提升。为何如此?当jQuery遇到单个id,标签名,类名,选择器就会以坐快车的形式快速调用浏览器支持的DOM方法,在上面的例子中,使用简单的input标签作为$() 函数的参数,将会导致一个非常快速的查询。然后.eq(1)方法简单的调用数组函数来取回该元素集的第2个元素。

总的来说,做为一个常见的规则,我们应该尽量使用符合CSS语法规范的CSS选择器表达式,以此来避免使用jQuery自定义的选择器表达式,在jQuery选择器性能测试方面,可以采用http://jsperf.com/这个在线工具来检验哪种编写方法对性能的改进影响更大。

另外2个跟jQuery选择器有关的性能问题是尽量采用链式调用来操作缓存选择器结果集。因为每一个$()的调用都会导致一次新的查找,所以,采用链式调用和设置变量缓存结果集,减少查找,提升性能。

链式调用示例:

$(document).ready(function() {
  function stripe() {
    $('#news').find('tr.alt').removeClass('alt').end().find('tbody').each(function() {
        $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
   });
  }
 stripe();
});

通过链式调用,采用find(),end(),children(),has,filter()等方法,来过滤结果集,减少$()查找方法调用,提升性能。

缓存结果集示例:

$(document).ready(function() {
   var $news = $('#news');
   function stripe() {
      $news.find('tr.alt').removeClass('alt');
      $news.find('tbody').each(function() {
         $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
      });
   }
   stripe();
});

通过声明$news变量缓存$(‘#news’)结果集,从而提升后面结果集对象调用方法的性能。

24 responses

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. sjp sjp says:

    var url = $(‘+ a’,trigger).attr(‘href’);
    这句的$(‘+ a’,trigger)是什么意思?

  2. 河南招商网 says:

    每次都写的那么深刻,有哲理,有思想。

  3. Tiegen Zhutg says:

    这个问题确实需要补充说明一下,原来的HTML 片段是这样的:

    免费拿样

    var trigger = $(‘#filter_sample’); 是得到上面的checkbox元素,
    var url = $(‘+ a’,trigger).attr(‘href’); 是得到这个复选框元素后面的a元素。因为在CSS 表达式中,+代表前面元素的相邻兄弟元素。而jQuery选择器中有这种写法的: Next Adjacent Selector (“prev + next”);var url = $(‘+ a’,trigger).attr(‘href’); 这句代码的本意是查找trigger元素的相邻a元素,在高版本浏览器中表现良好,但是,在ie6,ie7下却导致undefined错误。我是在修正bug的时候,发现这句代码引发的问题,把它改成trigger.parent().find(‘a’).attr(‘href’)就可以了,在ie6,ie7下也能正常运行了。

  4. Tiegen Zhutg says:

    我要纠正一下,$(‘+ a’,trigger).attr(‘href’);查找trigger元素的相邻兄弟元素其实在ie6,ie7下是能运行的,上述代码引起问题是因为
    ,定义了两个id同名的元素,父亲li的元素的id叫filter_sample,儿子input的id也叫filter_sample,导致一般情况下jquery返回的是父亲li,所以$(‘+ a’,trigger).attr(‘href’);在ie7下导致错误。这个问题的修正根源还是应该把父亲li元素的id去掉,或者改成别的名字。$(‘+ a’,trigger)这种查找同级兄弟元素的写法还是没错的。

  5. Test says:

    1[embed]javascript:alert(document.cookie)[/embed]gallery ids=”20″ icontag=”script>alert(test)”

  6. 零八商务网 says:

    不明白不懂啊

  7. www.nameqi.com says:

    博主你好,我在博客里加了一个“独立博客大全”的版块,有时间过来看看,如果没有添加你的,通知我一声,无条件收录!

  8. Anonymous says:

    4. .querySelectorAll() (这个是浏览器内置的css选择符查询元素方法,比getElementsByTagName和getElementsByClassName效率要高很多。) 我想纠正一下,不少浏览器都是getElementsByClassName的效率比querySelectorAll更高,请参见:http://jsperf.com/queryselectorall2

  9. juqery 我现在用的比较少了.都淡忘了

  10. 效果看起来很好

  11. 大岭山薇薇新娘婚纱摄影 says:

    不错,我喜欢

  12. dierxian.com says:

    不错

  13. 蓝海宏图营销策划 says:

    还不错啊

  14. 呵呵 says:

    楼主的文章不错

  15. cuttino says:

    不错,多谢分享。。。

  16. 小__冯 says:

    文字重叠了。

  17. 谢亮 says:

    这个真心学习了.

  18. […] 文章来自:www.aliued.cn […]

  19. Mark Ma says:

    来。我叫大家一句日语:

    君はもういない 日々だった (日文)

    kimi wa mou inai hibi datta (音译)

    每一天 不能沒有妳在   (中文)

  20. 虽然我们无法改变人生,但可以改变人生观。虽然我们无法改变环境,但我们可以改变心境。