比较$("#foo .bar")和$(".bar","#foo")的性能

Question

向下滚动的getById.getByClassName对比qSA比较!

---

如果我们想要选择"bar"具有ID的元素内的所有类元素"foo",我们可以这样写:

$( '#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开始页面的控制台内执行它.我的结果是:

Firefox:
test1:~90ms
test2:~18ms

Chrome:
test1:~65ms
test2:~30ms

Opera:
test1:~50ms
test2:~100ms

所以在Firefox和Chrome中,第二种方法的速度要快很多倍 - 就像我预期的那样.然而,在Opera中,情况正好相反.我想知道这里发生了什么.

你可以在你的机器上运行测试并解释为什么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开始页面的控制台中运行此代码.我使用了针对IE9的Firebug Lite书签(因为该浏览器没有实现console.time).

所以,我比较了这个方法:

document.getelementById( 'A' ).getElementsByClassName( 'B' );

这种方法:

document.querySelectorAll( '#A .B' );

我在每个浏览器中连续五次执行上面的脚本.算术手段是:

(所有数字均以毫秒为单位.)

因此,第一种方法的性能在测试的浏览器中几乎相同(16-36ms).然而,虽然qSA与第一种方法相比要慢得多,但在Opera中它实际上更快!

所以,qSA优化是可能的,我想知道其他浏览器在等什么...

Answer 1

如果浏览器支持querySelectorAll，并且您传递了有效的选择器（没有自定义的非 CSS 选择器），则 jQuery/Sizzle 将避免使用基于 JavaScript 的 Sizzle 引擎。

这意味着您最终将比较 的实现querySelectorAll，假设您正在测试支持它的浏览器。

jQuery 或 Sizzle 使用了其他优化，因此在不同浏览器中比较不同类型的 DOM 选择时会很棘手。

Opera 的性能结果的原因似乎是他们有一个非常高度优化的querySelectorAll实现。qSA作为一种相对较新的方法，与getElementsByTagName.