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

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

$('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是第一个。 它使用它作为根上下文，加快了一点。 如果不能消除您所看到的速度差异，这应该会减少。