jQuery:向选择器添加上下文比精炼选择器快得多？

Question

我只是注意到向选择器添加上下文比精炼选择器快得多.

$('li',$('#bar')).append('bla');

比以前快两倍:

$('#bar li').append('bla');

这一般是正确的吗？

Answer 1

向选择器添加上下文比精炼选择器快得多

在一般情况下也是如此.但就您的具体示例而言,jQuery <= 1.2.6并不一定如此.

直到并包括jQuery 1.2.6,选择器引擎以"自上而下"(或"从左到右")的方式工作.这意味着你的例子都会这样(大致):

var root = document.getElementById('bar');
return root.getElementsByTagName('li');

jQuery 1.3.x(即jizz嵌入的Sizzle)引入了一种"自下而上"(或"从右到左")查询DOM的方法.所以$('#bar li')现在变得(大致):

var results = [];
var elements = document.getElementsByTagName('li');
for(var i=0; i < elements.length; i++) {
    var element = elements[i];
    var parent = element.parentNode;
    while(parent) {
        if(parent.id == 'bar') {
            results.push(element)
            break;
        }
        parent = parent.parentNode;
    }
}
return results

这两种方法都有好处和缺点.你发现了一个缺点.

编辑:刚从这个讨论中发现,Sizzle主干现在#id首先对选择器进行特殊豁免.它使用它作为根上下文,加快了一点.如果不能消除您所看到的速度差异,这应该会减少.