向下滚动getById.getByClassName与qSA比较！
如果我们想要选择ID为“foo”的元素内的类“bar”的所有元素,我们可以这样写：
$( '#foo .bar' )
或这个：
$( '.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起始页面的控制台中执行它.我的结果是：
火狐：
test1：〜90ms
test2：〜18ms
铬：
test1：〜65ms
test2：〜30ms
歌剧：
test1：〜50ms
test2：〜100ms
所以在Firefox和Chrome中,第二种方法是快速的 – 正如我所料.然而,在歌剧院,情况扭转了.我不知道这里发生了什么.
你能否在你的机器上运行测试,并解释为什么Opera表现不一样？
更新
我已经写了这个测试,以便调查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起始页面的控制台内运行此代码.我使用的Firebug Lite书签IE9(因为该浏览器不实现console.time).
所以我比较了这个方法：
document.getelementById( 'A' ).getElementsByClassName( 'B' );
以这种方法：
document.querySelectorAll( '#A .B' );
我在每个浏览器中连续五次执行了上述脚本.算术手段是：
(所有数字以毫秒为单位)
因此,第一种方法的性能在测试的浏览器(16-36ms)中几乎相同.但是,与第一种方法相比,qSA的速度要慢很多,在Opera中实际上更快！
所以,qSA优化是可能的,我不知道其他浏览器正在等待…
