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

Question

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

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

Что быстрее:

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

VS

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

Я провел несколько экспериментов на 30 делениях, но не вижу никакой разницы с (новая дата) .getTime (); Может быть, выбор по классу более эффективен при использовании процессора?

Answer 1

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

ПРОВЕРКА ВЫБОРА JQUERY SELECTOR

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

• некоторые тесты производительности селекторов jquery

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

обновление: Мне удалось создать пример, соответствующий вашему опубликованному случаю, вот результаты для общего набора из 203 дел:

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 мс

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

Answer 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