可能重复：
带有上下文的 jQuery 选择器的性能
在jQuery DOCS中它说
默认情况下，选择器从文档根目录开始在 DOM 中执行搜索。但是，可以使用 $() 函数的可选第二个参数为搜索提供替代上下文。
基于此，我的理解是使用context传入作为第二个参数的选择应该比没有context传入的相同选择更快。但是我运行了一些测试，似乎情况并非如此，或者至少不是并非总是如此。
详细地说，我最初想看看一次搜索多个元素 ( $("div1, #div2")) 是否比单独搜索两个元素 ( ) 更快$("#div1") $("div2")。然后我决定用context和 不测试它，看看它用 的速度有多快context，但当事实证明context似乎在减慢速度时，我感到很惊讶。
例如，给出以下基本 HTML 标记
<div id="testCnt">
<div id="Div0"></div>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
<div id="Div4"></div>
<div id="Div5"></div>
<div id="Div6"></div>
<div id="Div7"></div>
<div id="Div8"></div>
<div id="Div9"></div>
</div>
以及以下 JavaScript（jQuery 1.8.2，并使用 FireBug 测试）
$(function () {
var $dvCnt = $('#testCnt');
var dvCnt = $dvCnt[0];
console.time('Individual without cache');
for (var i = 0; i < 10000; i++) {
$('#Div0').text('Test');
$('#Div1').text('Test');
$('#Div2').text('Test');
$('#Div3').text('Test');
$('#Div4').text('Test');
$('#Div5').text('Test');
$('#Div6').text('Test');
$('#Div7').text('Test');
$('#Div8').text('Test');
$('#Div9').text('Test');
}
console.timeEnd('Individual without cache');
console.time('Individual with $cache');
for (var i = 0; i < 10000; i++) {
$('#Div0', $dvCnt).text('Test');
$('#Div1', $dvCnt).text('Test');
$('#Div2', $dvCnt).text('Test');
$('#Div3', $dvCnt).text('Test');
$('#Div4', $dvCnt).text('Test');
$('#Div5', $dvCnt).text('Test');
$('#Div6', $dvCnt).text('Test');
$('#Div7', $dvCnt).text('Test');
$('#Div8', $dvCnt).text('Test');
$('#Div9', $dvCnt).text('Test');
}
console.timeEnd('Individual with $cache');
console.time('Individual with DOM cache');
for (var i = 0; i < 10000; i++) {
$('#Div0', dvCnt).text('Test');
$('#Div1', dvCnt).text('Test');
$('#Div2', dvCnt).text('Test');
$('#Div3', dvCnt).text('Test');
$('#Div4', dvCnt).text('Test');
$('#Div5', dvCnt).text('Test');
$('#Div6', dvCnt).text('Test');
$('#Div7', dvCnt).text('Test');
$('#Div8', dvCnt).text('Test');
$('#Div9', dvCnt).text('Test');
}
console.timeEnd('Individual with DOM cache');
console.time('Multiple without cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9').text('Test');
}
console.timeEnd('Multiple without cache');
console.time('Multiple with $cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9', $dvCnt).text('Test');
}
console.timeEnd('Multiple with $cache');
console.time('Multiple with DOM cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9', dvCnt).text('Test');
}
console.timeEnd('Multiple with DOM cache');
});
这是一个jsbin
我得到类似以下结果
没有缓存的个人：11490ms
有 $cache 的个人：13315ms
有 DOM 缓存的个人：14487ms
不带缓存的多个：7557ms
带 $cache 的多个：7824ms
带 DOM 缓存的多个：8589ms
有人可以对发生的事情有所了解吗？具体来说，当传入 jQuery 上下文时，为什么搜索会变慢？
编辑：
这里的大多数回答者（以及带有上下文的 jQuery 选择器的性能）基本上都说这个例子中的 DOM 太小而无法真正获得太多，或者ID无论如何选择都会很快。我理解这两点，我的问题的重点是为什么会context 减慢搜索速度，大小DOM不应该对此产生影响，而且通过 ID 搜索已经非常快的事实也不应该。
@pebble建议它较慢的原因是因为 jQuery 不能使用本机浏览器方法（getElementByID），这对我来说似乎很有意义，但是为什么在一个选择中搜索多个元素会更快呢？
无论如何，我将测试转储到jsPerf添加案例以按类搜索，并且再次惊讶地发现这次搜索具有缓存的多个类是最快的。