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.
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
Normalmente 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
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)