jquery:向选择器添加上下文比优化选择器快得多?

向选择器添加上下文非常重要 比优化选择器更快

一般情况下是这样的。但是,对于您的具体示例,jquery<=1.2.6不一定是正确的。

在jquery 1.2.6之前(包括jquery 1.2.6),选择器引擎以“自上而下”(或“从左到右”)的方式工作。这意味着您的两个示例的操作方式大致如下:

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

jquery 1.3.x(即, Sizzle ,jquery嵌入) introduced a "bottom up" (or "right to left") approach 查询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

这两种方法都有好处和坏处。你发现了其中的一个缺点。

编辑 :刚从 this discussion 这个发出咝咝声的主干现在特别豁免了选择器 #id 首先。它使用它作为根上下文,稍微加快了速度。如果不能消除你看到的速度差异,这个值应该会减小。