我刚刚注意到,向选择器添加上下文比完善选择器要快得多。
$('li',$('#bar')).append('bla');
比以下速度快两倍:
$('#bar li').append('bla');
这通常是真的吗?
最佳答案
adding context to the selector is much faster than refining your selector
一般情况下都是如此。然而,就您的具体示例而言,对于 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 中找到Sizzle 主干现在对 #id
优先的选择器进行了特殊豁免。它使用它作为根上下文,稍微加快了速度。如果不能消除您所看到的速度差异,这应该会减少。
关于jQuery:向选择器添加上下文比完善选择器要快得多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/650860/