Какое более правильное решение написания each() для улучшения производительности?

Question

[Вячеслав]

На сайте два блока- ".block1" и ".block2", в которых лежат елементы с клаcсом ".item".
Необходимо сделать выборку с помощью each() одного из блоков.
Я делаю так:

$('.block2 .item').each(function(){
   console.log(this);
  });

Как правильно записать выборку?

Answer 1

[Roman Zhak]

Не занимайтесь ерундой, тест для Chrome. В FF последний вариант выигрывает на 0.5%

// 4,511 ops per sec
$('.block .item').each(function() {
  console.log(this);
});
// 4,613 ops per sec
$('.item', '.block').each(function() {
  console.log(this);
});
// 4,519  ops per sec
$('.block').children('.item').each(function() {
  console.log(this);
});
// 4,569 ops per sec
$('.block > div[class="item"]').each(function() {
  console.log(this);
});

Comments

[Виталий Киренков]

Подскажите пожалуйста, как проверять скорость работы скрипта. Ну или ссылку где почитать.

И если рассмотреть ещё вариант с параметрами each(a, b) { console.log(a)}
Кажется А - это this, но возможно B =)

[Roman Zhak]

@DeLaVega jsperf.com

[Сергей Виноградов]

Для проверки времени можно использовать console.time(), console.timeEnd()

Answer 2

[Виталий Желтяков]

Вот так правильно. Используем контекст выборки, т.е. ищем блок .item в блоке .block2

$('.item', '.block2').each(function(){
   console.log(this);
  });

Comments

[Илья Лесных]

И чем же это будет лучше? jsperf.com/jquery-each-selectors

[Виталий Желтяков]

@Aliance А если элементов .item будет много?
Приведённый автором способ перебирает все элементы .block2 и .item. Приведённый мной способ перебирает все элементы .block2 и .item в нём.

[Roman Zhak]

@VitaZheltyakov при 500-1000 элементах разброс производительности ± 3-7%

[Илья Лесных]

@VitaZheltyakov а как по вашему будет работать сиззл селектор "класс пробел класс"? и как будет работать конструкция jQuery(селектор. контекст)?

[Roman Zhak]

@Aliance при 1000 div с class item 27.33- первый варианты, 27.47 - второй ops/sec.

[Илья Лесных]

@zhak55 пруф-то где?

[Виталий Желтяков]

@Aliance Как будет работать, я описал выше.

[Илья Лесных]

@VitaZheltyakov как бы это было текстовое описание, а я имел ввиду техническое. ну кодом, например.
в вашей случае будет $jQuery.find(selector),
а во изначальном вариант - context.getElementsByClassName(selector).
Все еще думаете, что ваш вариант быстрее?

[Виталий Желтяков]

@Aliance При чём тут $jQuery.find(selector) ?
Вы смешиваете функции jQuery и селекторный движок, что изначально неверно.

В случае автора getElementsByClassName переберёт все элементы .block2 и .item. В моём случае getElementsByClassName переберёт все элементы .block2, а затем getElementsByClassName переберёт все .item в найденом .block.