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 PERFORMANCE TESTING

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

some jquery selectors performance tests

让我知道这个答案真的对你有帮助，谢谢。

更新：我设法制作了一个与您发布的案例相匹配的示例，以下是总共203个div的结果：

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

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

更新2： 我尝试了比你的问题更多的东西，并让它来测试一些选择器，这是更新测试的新链接：http://jsfiddle.net/8Knxk/4/

3-使用标记名称$("div") ==＆gt; 666 ms

4-仅使用班级名称$(".normal_box") ==＆gt; 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

jQuery按类选择VS按属性选择

2 个答案: