Técnicas para deixar seus scripts em jQuery mais rápido

Um grande amigo, programador de interface também, me indicou artigo interessante falando de 25 técnicas e truques para aumentar a velocidade dos seus scripts em jQuery. O artigo está em inglês, quem tem fluência no idioma é legal ler a matéria dele também, quem não tem fluência, ou tem mais facilidade em ler em português mesmo, segue as dicas que achei mais interessantes, com meus humildes comentários.

Antes de começar, devo dizer que algumas técnicas são radicais, e merecem ser analisadas se realmente necessitam disso, então se você considera que o desempenho da sua página está bom, e o código vai ficar desorganizado, não faça. Agora mais aos truques:

Carregue o jQuery pelo Google Code

Se você é como eu, você não deve gostar de fazer requisições externas no seu site, mas carregar o jQuery pelo Google Code pode trazer vantagens ao seu site:
– Se muitas pessoas fizerem isso, é provavel que ao entrar no seu site, o usuário não precise baixar o arquivo novamente pois já tem ele em cache, de outro site que também faz a requisição do jQuery pelo Google Code.
– Diminuição no tráfego da banda, o jQuery, muitas vezes representa de 10% a 30% do peso total de uma página, se carregado pelo google, pode diminuir o tráfego (se isso for um problema no seu servidor).

E para carregar pelo google code é fácil:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript"></script>

Junte seus scripts num arquivo

Nem sempre isso é possível, mas, se você tem um javascript pra lightbox, outro pra validação, outro pra sei lá o que, e eles sempre são carregados, vale a pena juntar todo o código num script só. A vantagem é que, ao invés do servidor fazer 5 requisições http, ele faz uma só, dando velocidade no loading da página na hora mais importante, quando a página fica em branco, fazendo download dos scripts e css do head. É lógico que fica mais difícil de trabalhar, menos organizado, por isso é bom fazer isso só depois do site estar pronto. Outra forma de melhorar, é que, em um só script, podemos fazer apenas um $(document).ready() , ao invés de ter várias funções espalhadas pelos scripts.

Minifique seus scripts

Outra medida para se fazer após o término da produção do site, é minimizar os scripts, basicamente minificar significa retirar todos os comentários, tabs, quebras de linha, e espaços desnecessários para execução do script, deixando todo o código em um linha só, esse processo diminui em média 30% do tamanho do arquivo javascript, deixando o load da página mais rápido. Para minificar seu script, existem diversos sites onde se cola o script original e eles minificam seu script pra você, no post original ele recomenda o Packer do Dean Edwards, mas também tem um o javascript compressor que também faz a mesma coisa, mas é mais fácil de decorar sua url.

Evite processamento desnecessário nos loop’s (como seletores)

Isso não vale só pra jQuery / javascript, vale pra qualquer linguagem de programação. Verifique se nenhum processamento dentro de um for é desnecessário. Ex.:

for (i = 0; i < 1000; i++) {
var container = $('#container ');
container.append('Este é o ítem: ' + i);
}

ou assim:

for (i = 0; i < 1000; i++) {
$('#container ').append('Este é o ítem: ' + i);
}

Os seletores são processos complexos que envolve diversas funções ( getElementById, getElementsByTagName, getElementsByClass entre outras ) além de diversos loops para obter somente os elementos desejados.

Então, o melhor jeito é assim assim:

var container = $('#container ');
for (i = 0; i < 1000; i++) {
container.append('Este é o ítem: ' + i);
}

Diminua suas manipulações em DOM

Contrariando o exemplo acima, tem um melhor jeito ainda de fazer o for.

var htm = '';
for (i = 0; i < 1000; i++) {
htm +='Este é o ítem: ' + i;
}
$('#container ').append(htm);

Ao invés de dar 1000 appends no seu elemento, você dá um só, e monta a lista numa variável javascript, tal processo é aproximadamente de 6 vezes.

Use ID’s ao invés de classes sempre que possível

Desde que não atrapalhe seu css, e que não se repita nenhum id no html, use id’s para posteriormente selecionar o objeto.veja mais tidbits O javascript trabalha mais rápido com ID (getElementbyId) do que com classes (getElementsByClass).

Veja o exemplo com class que no teste feito pelo autor, rodou em 5066 milisegundos (5 segundos):

var lista = '<ul>';
// Adicionando li's com class
for (i = 0; i < 1000; i++) {
lista += '<li class="item' + i + '">Este é o ítem '+i+'</li>';
}
lista += '</ul>';
$('body').append(lista);
// Selecionando elementos com class
for (i = 0; i < 1000; i++) {
var itemSelecionado = $('.item' + i);
}

Já no segundo exemplo, faremos a mesma coisa com id’s que no teste feito pelo autor, rodou em 61 milisegundos (83 vezes mais rápido):

var lista = '<ul>';
// Adicionando li's com id
for (i = 0; i < 1000; i++) {
lista += '<li id="item' + i + '">Este é o ítem '+i+'</li>';
}
lista += '</ul>';
$('body').append(lista);
// Selecionando elementos com id
for (i = 0; i < 1000; i++) {
var itemSelecionado = $('#item' + i);
}

Use diversas ações sobre um seletor (chaining)

Evite selecionar o mesmo elementos várias vezes, atribua todas as funções em um seletor só:

Ao invés de usar:

footer = $('#footer');
footer.find('a.reprovar_comentario');
footer.html('aprovar');
footer.attr('class','aprovar_comentario');
footer.attr('title','aprovar');
footer.unbind();
footer.click(aprovarComentario);

use somente uma seleção :

footer = $('#footer');
footer
	.find('a.reprovar_comentario')
	.html('aprovar')
	.attr('class','aprovar_comentario')
	.attr('title','aprovar')
	.unbind()
	.click(aprovarComentario);

Use sempre a última versão do jQuery

veja mais tidbitsNormalmente novas versões de programas, sistemas operacionais, etc… são mais pesadas com um monte de funções que 99% dos usuários nunca vão usar, mas John Resig, criador do jQuery, continua trabalhando em cima disso, só pra melhorar e deixar o jQuery mais rápido, a atual versão, 1.3.1 ganhou muita velocidade em cima da 1.2.6, o que gerou algumas incompatibilidades, principalmente com plugins. Então, não precisa refazer (se não estiver mega lerdo) seus antigos sites, mas ao criar um novo, tente usar sempre a última versão do jQuery.

Se alguém ler isso e tiver mais alguma dica legal, diz aí.

[]s

5 thoughts on “Técnicas para deixar seus scripts em jQuery mais rápido

  1. Realmente interessante. Pra quem utiliza jQuery pra tudo faz-se necessário seguir algumas dicas. Estou implementando o carregamento via Google Code, vamos ver como fica o negócio ;)

    Abraço e obrigado por compartilhar.

  2. Fala gurii .. bom post.

    realmente .. a velocidade do jquery melhorou.

    eu sei la.. medo de nao sei oq me faz usar o googlecode soh pra desenvolvimento mas na hora de jogar em producao vai fisico mesmo.

    post show .. toda essa parte de jquery eh total desconhecido .. massaa, thanks.

    tava precisando dar uma optimizada ..

    po agora eu fiquei mais curioso ainda .. seus fans querem mais posts sobre otimizacao .. de tudo…

    ah da um loook e manda um email comentando ..
    http://eloquentjavascript.net/appendix2.html

    depois do extends do java eu comecei a fucar em js oo, prototype eh rox.

    assim q eu tiver tempo eu faço o meu blog kkk xD soh pra testar ao vivo hauahuah BBB of JS Code.

    puts agora chega.. vou continuar aqui.. tenho ainda que fazer uma apresentacao .. eca .. odeio mas o lado positivo eh q aprendi algo sobre uml ja ..

    flw danilo .. parabens.

Leave a Reply

Your email address will not be published. Required fields are marked *