$(). each vs $.each vs for loop в jQuery?

Я не понимаю, почему это происходит.

Я прочитал здесь, что:

Первый $. каждый представляет собой одиночный вызов функции для запуска итератор.

Второй $(foo.vals).each выполняет вызовы функций три, чтобы запустить итератор.

Первый - это $(), который создает новую обертку jQuery set (Не знаете, сколько других вызовов функций выполняется во время этого обработать).

Затем вызов в $().

И, наконец, он делает внутреннюю вызовите jQuery.each для запуска итератора.
В вашем примере разница будет ничтожно мала. Однако в сценарии вложенного использования вы можете обнаружить, что производительность становится проблема.

Наконец, Коди Линдли в jQuery Enlightenment не рекомендует использовать $.each для итераций, превышающих 1000 из-за вызовов функций участвует. Используйте обычный для (var я = 0... цикл.

Итак, я протестировал его с помощью этого jsperf:

(задача: найти Tr, который установил флажок внутри них и цвет, который tr.)

Это jsbin

Но посмотрите jsperf

против всех ожиданий, напротив - это истина. (хром, FF и IE)

Тот, кто использует $().each (который вызывает три метода, является самым быстрым и т.д.

Что здесь происходит?

Ответ 1

Ваш тест слишком тяжелый, чтобы действительно определить фактическую разницу между тремя параметрами цикла.

Если вы хотите протестировать цикл, тогда вам нужно сделать все возможное, чтобы как можно скорее удалить как можно больше не связанной с ним работы.

Как и все, ваш тест включает в себя:

Выбор DOM
Обход DOM
мутация элемента

Все это довольно дорогостоящие операции по сравнению с самими циклами. При удалении дополнительного материала разница между петлями намного более заметна.

http://jsperf.com/asdasda223/4

Как в Firefox, так и в Chrome, цикл for намного превышает 100 раз быстрее остальных.

Ответ 2

Ну

$.each() - это выполняемая jQuery-функция, которая будет использоваться для итерации по вашему списку, поэтому накладные расходы должны быть функцией jQuery, а также накладными вызовами для этой функции для каждого элемента в списке. В этом случае
$(thing).each() Идея заключается в том, что $(thing) создает экземпляр jQuery, а затем вы перебираете этот экземпляр (.each действует на этот экземпляр). В вашем случае, поскольку экземпляр, с которым вы его вызвали, уже является объектом jQuery, накладные расходы минимальны (вы являетесь экземпляром, о да, вы есть).
for() В этом случае нет никаких накладных расходов, кроме поиска длины списка на каждой итерации.

Рассмотрим:

var l = g.length;
for (var i=0;i<l;i++) {
    // code;
}

В зависимости от вашего HTML большую часть времени вполне может быть в парсе Sizzle JQuery, который находит ваш селектор в документе.

Также обратите внимание: я не думаю, что ваш селектор является лучшим, если только вещи не изменились значительно недавно. Селекторы jQuery оцениваются справа налево, рассмотрите возможность ограничения области действия селектора, выполнив .find() во всем, что находится под первым тегом ссылающийся на id, поскольку он будет искать только подмножество документа.

Ответ 3

Разный подход к вашей "задаче" http://jsfiddle.net/ADMnj/17/

Но я предполагаю, что проблемы с производительностью исходят из того, что вы не устанавливаете селектор в правильном вопросе

#t tr input:checkbox:checked 

VS

#t tr :checkbox:checked

Жесткий правильный способ проверить, установлен ли флажок, было бы называть его следующим образом

#t tr input[checked="checked"]

Список выбора W3.ORG см. в E [foo]

И последнее, но не менее важное: самый быстрый - это тот, у которого самый короткий код, который может быть небольшой производительностью, которую вы получаете от 3 строк против 4 и 5 строк кода, но не можете доказать этот факт.