Должен ли я использовать jQuery.each()?

Ответ 1

Исходный код для jQuery каждый следующий (спасибо John Resig и MIT License):

each: function( object, callback, args ) {
    var name, i = 0, length = object.length;

    if ( args ) {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ], args ) === false )
                    break;
        } else
            for ( ; i < length; )
                if ( callback.apply( object[ i++ ], args ) === false )
                    break;

    // A special, fast, case for the most common use of each
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }

    return object;
}

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

EDIT: Это связано с осознанием того, что служебные данные селектора уже произошли, и вам задан заполненный массив object.

Ответ 2

Эта статья (№ 3) провела некоторые тесты производительности и обнаружила, что функция jQuery.each была примерно в 10 раз медленнее, чем родной javascript для цикла.

^{Из 10 способов мгновенно увеличить производительность jQuery - 3. использовать вместо них}
Используя Firebug, можно измерить время выполнения каждой из двух функций.

var array = new Array ();
for (var i=0; i<10000; i++) {
    array[i] = 0;
}

console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jquery');

Вышеуказанные результаты составляют 2 мс для собственного кода и 26 мс для jQuery "каждый". Если я тестировал его на своей локальной машине, и они на самом деле ничего не делают (просто операция заполнения массива), jQuery каждая функция занимает более 10 раз до тех пор, пока не будет создан цикл JS для "за". Это, безусловно, будет увеличиваться при работе с более сложными вещами, такими как установка атрибутов CSS или других операций манипуляции с DOM.

Ответ 3

Один из способов убедиться, что вы получаете максимальную отдачу от jquery, заключается в том, чтобы сохранить возвращенный массив результатов в переменной, а не перебирать DOM каждый раз, когда вам нужно что-то получить.

Пример того, что НЕ делать:

$('.myLinks').each(function(){
    // your code here
});
$('.myLinks').each(function(){
    // some more code here
});

Лучшая практика:

var myLinks = $('.myLinks');
myLinks.each(function(){
    // your code here
});
myLinks.each(function(){
    // some more code here
});

Ответ 4

Использование встроенной функции обычно будет быстрее, чем абстракция, например метод JQuery.each(). Однако метод JQuery.each() проще в использовании и требует меньше кодирования с вашей стороны.

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

Замена метода JQuery.each() в этих сценариях может помочь, однако, не видеть ваш код, возможно, у вас есть узкие места, не связанные с методом JQuery.

Ответ 5

Этот метод должен дать вам значительное улучшение скорости.

var elements = $('.myLinks').get(), element = null;
for (var i = 0, length = elements.length; i < length; i++) {
    element = elements[i];
    element.title = "My New Title!";
    element.style.color = "red";
}

Кэширование также улучшит производительность.

function MyLinkCache() {
    var internalCache = $('.myLinks').get();

    this.getCache = function() {
        return internalCache;  
    }

    this.rebuild = function() {
        internalCache = $('.myLinks').get();
    }
}

При использовании:

var myLinks = new MyLinkCache();

function addMyLink() {
    // Add a new link.
    myLinks.rebuild();
}

function processMyLinks() {
    var elements = myLinks.getCache(), element = null;
    for (var i = 0, length = elements.length; i < length; i++) {
        element = elements[i];
        element.title = "My New Title!";
        element.style.color = "red";
    }
}