O primeiro problema com jQuery são as consultas sem cache.
Em vez de fazer algo como:
$('h1').addClass('inactive');
$('h1').text('hello');
$('h1').animate({height: "100px"});
Você tem que fazer isso:
var $h1 = $('h1');
$h1.addClass('inactive');
$h1.text('hello');
$h1.animate({height: "100px"});
Porque o h1
é buscado apenas uma vez no DOM. Isso é mais rápido.
Às vezes, você reutilizará este mesmo h1
em outra função. Portanto, você precisa declarar novamente a $h1
variável, e ela não está otimizada.
Em vez disso, você pode fazer uma abordagem global para armazenar em cache o objeto DOM do jQuery: Crie um objeto global com o seletor como chave e o objeto DOM como valor. Esta é uma implementação:
DOMCACHESTORE = {};
DOMCACHE = {
get: function(selector, force) {
if (DOMCACHESTORE[selector] !== undefined && force === undefined) {
return DOMCACHESTORE[selector];
}
DOMCACHESTORE[selector] = $(selector);
return DOMCACHESTORE[selector];
}
};
Como usá-lo?
DOMCACHE.get('h2').addClass('super');
// Later:
DOMCACHE.get('h2').removeClass('super');
Este será o mesmo, e será apenas uma vez obtida. Se você tiver novo na página, adicionado por JavaScript, pode forçar a nova busca:DOMCACHE.get('h2')
h2
DOMCACHE.get('h2', true).addClass('super');
// Now, we have all h2:
DOMCACHE.get('h2').addClass('all');
É um truque muito simples para melhor desempenho em seu código jQuery.
Alguma sugestão ou bug? Avise-se me.