javascript – 比较$(“#foo .bar”)和$(“.bar”,“#foo”)的性能

向下滚动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优化是可能的,我不知道其他浏览器正在等待…

解决方法

如果浏览器支持querySelectorAll,并且传递有效的选择器(没有自定义的非CSS选择器),jQuery / Sizzle将避免使用基于JavaScript的Sizzle引擎.

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

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

Opera的性能结果的原因似乎是它们具有非常优化的querySelectorAll实现.与较早的方法(如getElementsByTagName)相比,qSA是一种相对较新的方法,在一些浏览器中并没有被优化.

javascript – 比较$(“#foo .bar”)和$(“.bar”,“#foo”)的性能

解决方法

相关文章