jQuery按类选择VS按属性选择

Question

我只想询问性能的意见:通过类名或使用jquery的属性名更快地选择元素吗？示例I以这种形式有100个DIV元素:

<div class="normal_box" normal_box=1>...</div>

哪个更快:

$('div.normal_box').each(function(){...});

VS

$('div[normal_box=1]').each(function(){...});

我在30个div上做了一些实验但是我没有看到(new Date).getTime(); 也许按类选择在CPU使用方面更有效？

Answer 1

对于您正在寻找的内容,这是一篇很棒的文章.

JQUERY SELECTOR性能测试

我还发现了一篇很棒的文章,可以帮助你解决这个问题:

• 一些jquery选择器性能测试

如果这个答案真的对你有帮助,请告诉我,谢谢.

更新:我已设法制作一个样本以匹配您发布的案例,以下是总共203个div的结果:

1-使用具有certine类名$("div.normal_box")==> 884 ms的标签名称

2-使用属性值$("div[normal_box=1]")==> 4553 ms

更新2: 我尝试了比你的问题更多的东西,并让它测试了几个选择器,这里是这个更新测试的新链接:http://jsfiddle.net/8Knxk/4/

3-使用标签名称$("div")==> 666毫秒

4-仅使用类名$(".normal_box")==> 762 ms

我觉得现在对你来说更清楚:)

Answer 2

以下是我刚为自己跑的测试结果.这个div在一个有1562个元素的DOM上.

<div class="banana" data-banana="1"></div>

测试

    function test(iterations) {

    console.time('query-by-data');
    for(var i=iterations;i;i--) {
        $('[data-banana]');
    }
    console.timeEnd('query-by-data');

    console.time('query-by-class');
    for(var i=iterations;i;i--) {
        $('.banana');
    }
    console.timeEnd('query-by-class');

}

结果

 iterations: 1000
 query-by-data: 120.000ms
 query-by-class: 10.000ms

 iterations: 10000
 query-by-data: 1030.000ms
 query-by-class: 56.000ms

 iterations: 50000
 query-by-data: 5151.000ms
 query-by-class: 235.000ms