的$性能比较（QUOT; #foo的.bar＆QUOT;）和$（＆QUOT;＆的.bar QUOT;，＆QUOT;＃foo的＆QUOT;） [英] Comparing the performance of $("#foo .bar") and $(".bar", "#foo")
问题描述
如果我们想要选择类的所有元素这是元素中与ID为栏 foo的，我们可以这样写：
If we wanted to select all elements of class "bar" which are inside the element with the ID "foo", we could write this:
$( '#foo .bar' )
或本
$( '.bar', '#foo' )
当然也有其他方法来实现这一点，但对于这个问题的缘故，我们只有这两种方法进行比较。
There are of course other methods to achieve this, but for the sake of this question, let's compare only these two methods.
所以，这上面的方法执行得更好？ （这需要较少的执行时间？）
So, which of the above methods performs better? (Which needs less time to execute?)
我写了这个性能测试：
(function() {
var i;
console.time('test1');
for( i = 0; i < 100; i++ ) {
$('#question-mini-list .tags');
}
console.timeEnd('test1');
console.time('test2');
for( i = 0; i < 100; i++ ) {
$('.tags', '#question-mini-list');
}
console.timeEnd('test2');
})();
您必须从控制台中执行它在堆栈溢出启动页上。我的结果是：
You have to execute it from within the console on the Stack Overflow start-page. My results are:
火狐：结果
测试1：90毫秒〜结果
测试2：〜18毫秒
Firefox:
test1: ~90ms
test2: ~18ms
铬：结果
测试1：〜65ms的结果
测试2：〜30毫秒
Chrome:
test1: ~65ms
test2: ~30ms
歌剧：结果
测试1：50毫秒〜结果
测试2：100ms的〜
Opera:
test1: ~50ms
test2: ~100ms
因此，在Firefox和Chrome，第二种方法是更快多次 - 就像我的预期。然而，在歌剧院，情况正好相反。我不知道是怎么回事。
So in Firefox and Chrome, the second method is multiple times faster - just as I expected. However, in Opera the situation is reversed. I wonder what's going on here.
能不能请你你的机器上运行测试，并解释为什么歌剧院进行不同？
Could you please run the test on your machine and explain why Opera performs differently?
我已经写了这个测试，为了调查Opera的QSA是否真的是超级快。事实证明，它是。
I've written this test, in order to investigate whether Opera's qSA really is super-fast. As it turns out, it is.
(function() {
var i, limit = 5000, test1 = 'test1', test2 = 'test2';
console.time( test1 );
for( i = 0; i < limit; i += 1 ) {
document.getElementById( 'question-mini-list' ).getElementsByClassName( 'tags' );
}
console.timeEnd( test1 );
console.time( test2 );
for( i = 0; i < limit; i += 1 ) {
document.querySelectorAll( '#question-mini-list .tags' );
}
console.timeEnd( test2 );
})();
同样，你必须从堆栈溢出启动页面上的控制台中运行该code。我用Firebug的精简版书签为IE9（因为浏览器不落实 console.time ）。
所以，我比较了此方法：
So, I compared this method:
document.getelementById( 'A' ).getElementsByClassName( 'B' );
此方法：
document.querySelectorAll( '#A .B' );
我执行上面的脚本连续五次在每个浏览器。运算装置是：
I've executed the above script five consecutive times in each browser. The arithmetic means are:
（所有数字都以毫秒为单位）。
(All numbers are in milliseconds.)
因此，第一种方法的性能是pretty多，在测试的浏览器（16-36ms）相同。然而，虽然QSA是慢得多相比第一种方法，在Opera它实际上是更快！
So, the performance of the first method is pretty much the same in the tested browsers (16-36ms). However, while qSA is much slower compared to the first method, in Opera it actually is faster!
所以，QSA优化是可能的，我不知道其他浏览器都在等待什么...
So, qSA optimization is possible, I wonder what the other browsers are waiting for...
推荐答案
的jQuery /灒将避免使用基于JavaScript灒引擎浏览器是否支持 querySelectorAll ，如果你通过一个有效的选择器（没有自定义，非CSS选择器）。
jQuery/Sizzle will avoid using the JavaScript based Sizzle engine if the browser supports querySelectorAll, and if you pass a valid selector (no custom, non-CSS selectors).
这意味着你最终比较的实施 querySelectorAll ，假设你正在测试支持它的浏览器。
This means that you're ultimately comparing implementations of querySelectorAll, assuming you're testing browsers that support it.
有其他的优化的jQuery或灒用途，所以在不同的浏览器比较不同类型的DOM选择的时候是棘手的。
There are other optimizations that jQuery or Sizzle uses, so it's tricky when comparing different types of DOM selection in different browsers.
原因Opera的性能结果似乎是，他们有一个非常高度优化的 querySelectorAll 的实施。 QSA ，是一个相对较新的方法，一直没有很为相比老方法，如的getElementsByTagName 某些浏览器进行了优化
The reason for Opera's performance result seems to be that they have a very highly optimized querySelectorAll implementation. qSA, being a relatively new method, hasn't been quite as optimized in some browsers compared to older methods like getElementsByTagName.
这篇关于的$性能比较（QUOT; #foo的.bar＆QUOT;）和$（＆QUOT;＆的.bar QUOT;，＆QUOT;＃foo的＆QUOT;）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
