Devo usar jQuery.each ()?

Question

Estou fazendo iterações muito frequentes sobre matrizes de objetos e têm vindo a utilizar jQuery.each (). No entanto, estou tendo problemas de velocidade e memória e um dos métodos mais chamados de acordo com o meu profiler é jQuery.each (). Qual é a palavra na rua sobre o seu desempenho? Devo mudar para um simples loop for? É claro que estou, que fixa as muitas questões em meu próprio código também.

Answer 1

O código fonte para jQuery é cada é a seguinte (Obrigado John Resig e 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;
}

Como você pode rastrear e ver, na maioria dos casos ele está usando um básico para loop onde a única sobrecarga é realmente apenas o próprio retorno. não deve fazer a diferença no desempenho.

EDIT:. Isso é com a percepção de que seletor de sobrecarga já ocorreu e é-lhe dada uma object matriz preenchida

Answer 2

Este artigo (# 3) fez alguns testes de desempenho e descobriram que a função do jQuery .each foi cerca de 10x mais lento que o javascript nativo para loop.

^{de 10 maneiras de aumentar instantaneamente o seu desempenho jQuery - 3. Use para em vez de cada}
Usando Firebug , é possível medir o tempo de cada uma das duas funções leva para executar.

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');

Os resultados acima são 2ms para código nativo, e 26 ms para "cada" método jQuery. Desde que eu testei em minha máquina local e eles não estão realmente fazendo alguma coisa (apenas uma mera operação variedade enchimento), jQuery é cada função tem mais de 10 vezes, enquanto JS nativo "para" loop. Isso certamente vai aumentar quando se lida com coisas mais complicadas, como definir atributos CSS ou outras operações de manipulação DOM.

Answer 3

Este método deve dar-lhe uma melhoria de velocidade dramático.

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

Caching também irá melhorar o desempenho.

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

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

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

Em uso:

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

Uma maneira de se certificar de que você está recebendo o máximo proveito do jQuery é armazenar a matriz retornada de resultados em uma variável em vez de re-atravessar a toda DOM você precisa para obter alguma coisa.

Exemplo do que não fazer:

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

Melhor prática:

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

Answer 5

Utilizando a funcionalidade nativa será geralmente mais rápido do que uma abstracção, método tal como JQuery.each (). No entanto, o JQuery.each () é mais fácil de usar e requer menos codificação de sua parte.

Na verdade, nenhum deles é a escolha certa ou errada, sem qualquer contexto. Eu sou da oppinion que devemos estar escrevendo código mais fácil primeiro, assumindo que é bom / legilble código / limpo. Se você entrar em uma situação, como a que você está descrevendo, onde há um atraso perceptível, do que de tempo para descobrir onde seus gargalos são e escrever código mais rápido.

Substituir o método JQuery.each () nestes cenários pode ajuda, no entanto, não tendo visto o seu código, é possível que você tem gargalos não relacionados com o método de JQuery.