jquery - 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（即jQuery 嵌入的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 主干现在特别豁免了选择器 where #idis first。它使用它作为根上下文，加快了速度。如果不能消除您看到的速度差异，这应该会减少。