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

Question

Я делаю очень частые итерации над массивами объектов и использую jQuery.each().Однако у меня проблемы со скоростью и памятью, и, по мнению моего профилировщика, одним из наиболее часто вызываемых методов является jQuery.each().Что говорят на улице о его работе?Должен ли я переключиться на простой цикл for?Конечно, я исправляю множество проблем и в своем собственном коде.

Answer 1

Исходный код каждого из jQuery выглядит следующим образом (спасибо Джону Ресигу и лицензии MIT):

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;
}

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

РЕДАКТИРОВАТЬ:Это связано с тем, что издержки селектора уже произошли, и вам предоставляется заполненный массив. object.

Answer 2

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

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

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 «each».При условии, что я тестировал его на своем локальном компьютере, и они на самом деле ничего не делают (просто операция заполнения массива), каждая функция jQuery занимает в 10 раз больше времени, чем собственный цикл «for» JS.Это, безусловно, увеличится при работе с более сложными вещами, такими как установка атрибутов CSS или другие операции манипулирования DOM.

Answer 3

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

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";
    }
}

Answer 4

Один из способов убедиться, что вы получаете максимальную отдачу от 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
});

Answer 5

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

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

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