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’)结果集，从而提升后面结果集对象调用方法的性能。