JQuery выбрать по классу VS выбрать по атрибуту

Я хочу просто спросить мнение о производительности: Быстрее ли вы выбираете элементы по имени класса или по имени атрибута с помощью jquery? Пример: у меня есть 100 элементов DIVs в этой форме:

<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(); Может быть, выбор по классу более эффективен при использовании ЦП?

Ответы

Ответ 1

Это отличный пост для того, что вы ищете.

ИСПЫТАНИЯ ПО ЭКСПЛУАТАЦИИ САЙТА JQUERY

Я также нашел отличную статью, которая может помочь вам в этой теме:

дайте мне знать, действительно ли этот ответ вам помог, спасибо.

update: Мне удалось создать образец для соответствия вашему опубликованному делу, вот результаты для всего набора из 203 div:

1-, используя имя тега, имеющее имя класса certine $("div.normal_box") == > 884 мс

2-, используя значение атрибута $("div[normal_box=1]") == > 4553 мс

Обновление 2: Я попробовал еще больше, чем ваш вопрос, и попробовал проверить несколько селекторов, вот новая ссылка для этого обновленного теста: http://jsfiddle.net/8Knxk/4/

3, используя имя тега $("div") == > 666 мс

4-, используя только имя класса $(".normal_box") == > 762 мс

Я думаю, теперь вам станет более ясно:)

Ответ 2

Вот результаты теста, который я только что запустил для себя. Этот div был на DOM с 1562 элементами.

<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