向下滚动查看getById.getByClassName vs. qSA比较！
如果我们想选择类的所有元素"bar"位于具有 ID 的元素内"foo"，我们可以这样写：
$( '#foo .bar' )
or this:
$( '.bar', '#foo' )
当然还有其他方法可以实现这一点，但为了这个问题，我们只比较这两种方法。
那么，上述哪种方法效果更好呢？ （哪个需要更少的时间来执行？）
我写了这个性能测试：
(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');
})();
您必须从控制台中执行它Stack Overflow 起始页。我的结果是：
Firefox:
测试1：~90ms
测试2：~18ms
Chrome:
测试1：~65ms
测试2：~30ms
Opera:
测试1：~50ms
测试2：~100ms
因此，在 Firefox 和 Chrome 中，第二种方法的速度要快好几倍——正如我所预期的那样。然而，在 Opera 中情况却相反。我想知道这是怎么回事。
您能否在您的机器上运行测试并解释为什么 Opera 的表现不同？
Update
我编写了这个测试，目的是调查 Opera 的 qSA 是否真的超快。事实证明，确实如此。
(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 );
})();
同样，您必须从 Stack Overflow 起始页上的控制台内运行此代码。我使用了 IE9 的 Firebug Lite 书签（因为该浏览器没有实现console.time).
所以，我比较了这个方法：
document.getelementById( 'A' ).getElementsByClassName( 'B' );
对于这个方法：
document.querySelectorAll( '#A .B' );
我已在每个浏览器中连续执行上述脚本五次。算术平均值为：
（所有数字均以毫秒为单位。）
因此，第一种方法的性能在测试的浏览器中几乎相同（16-36ms）。然而，虽然 qSA 比第一种方法慢得多，但在 Opera 中它实际上更快！
所以，qSA 优化是可能的，我想知道其他浏览器还在等什么......
