Com o uso constante de bibliotecas JavaScript para o desenvolvimento de front-ends, por conta da facilidade e da velocidade no desenvolvimento, programadores costumam construir suas aplicações sem levar em conta que para as coisas se tornarem mais fáceis, um trabalho pesado deve ser feito por debaixo dos panos de forma que o código desenvolvido não resulte em perda de desempenho.
Um dos exemplos de situação onde este cenário ocorre é a questão da seleção de elementos no jQuery. Vamos supor que você use o seguinte seletor em jQuery $('div p.link a '). Para este seletor, sua engine fará uma busca da direita para a esquerda, procurando primeiro todos os elementos A e verificando em cada um deles se eles são filhos de um elemento P que possui a classe “link”. Por fim, verifica se o mesmo é filho de um elemento DIV. Este trabalho pode até ser barato para páginas simples, mas às vezes é uma dor de cabeça em páginas mais complexas.
Nesse artigo iremos abordar algumas situações corriqueiras no desenvolvimento de páginas web usando jQuery como biblioteca JavaScript em que pode haver perda de desempenho, e em cada uma delas iremos citar algumas maneiras de como contorná-las.
Minimize seus scripts
Esta é uma das recomendações que se deve levar sempre em conta no desenvolvimento web. Sempre que possível, minimize seus scripts. Remover espaços em branco, comentários e mesclar arquivos em um só irá diminuir o tempo de carregamento de suas páginas de uma maneira perceptível. Hoje existem boas ferramentas para compressão de arquivos como Google Closure e Yui compressor. O link para estas ferramentas encontra-se descrito ao final do artigo.
Seleção de elementos
Como dito no problema no início do artigo, o jQuery faz a seleção dos elementos da direita para a esquerda. Existem algumas alternativas para contornar e melhorar a velocidade das seleções.
Vamos imaginar a seleção $('#links a'). Para evitar que o jQuery faça uma busca por todos os elementos A no DOM e em cada um deles verifique se o mesmo é filho de um elemento cujo o id seja “links”, utilize $('#links').find('a'). Isto fará com que o jQuery trabalhe da esquerda para a direita, obtendo primeiro os elementos com o id “links” e, depois disso, efetue a busca pelos filhos que são elementos A. Como a busca está sendo efetuada da esquerda para direta, a execução trabalhará mais rapidamente porque o javascript percorrerá um número menor de elementos ao invés de percorrer todos, aumentando o numero de testes em busca do elemento desejado.
Use sempre que possível ID ao invés de classes
Esta é uma recomendação por conta da forma como se busca elementos por classes. Quando buscamos elementos por seu ID, o jQuery usa a função nativa do JavaScript chamada getElementById() que é usada para encontrar elementos de uma maneira mais direta. Já quando estamos obtendo elementos através de classes, é feita uma busca através de todos os elementos no DOM em busca daqueles que possuem a classe desejada, tornando assim o processo mais demorado, o que pode se tornar um problema ainda maior em grandes páginas.
Seletores e seus contextos
O jQuery nos fornece uma outra maneira de trabalhar com seletores que é através de contextos. Podemos então fazer buscas por determinados elementos delimitando a área de busca. Por exemplo, se quisermos selecionar todos os elementos LI de duas listas com classe “lista-1” e “lista-2”, podemos fazer da seguinte maneira $('li', '.lista-1, lista-2') onde o primeiro argumento é a expressão desejada e o segundo o contexto. A utilização de contextos de busca irá aumentar o desempenho pelo fato de fazer a busca por elementos apenas em um determinado conjunto de elementos ao invés de fazer a busca em todo o DOM (Document Object Model).
Faça sempre cache
Em várias situações, um dos elementos mais importantes para ganho de desempenho se chama cache. Faça sempre que possível cache de seus seletores em variáveis. Não cometa o erro de fazer sempre buscas por seus elementos toda vez que for utilizá-los. Evite fazer isto principalmente dentro de laços, pois quando isto acontece a busca por elementos do seletor irá acontecer em cada ciclo, causando uma queda enorme de desempenho. Fazer cache de suas buscas irá evitar que isto aconteça. Na Listagem 1 temos dois exemplos de uso de laços com seletores. No primeiro exemplo (linhas 3 a 5) temos a forma incorreta onde temos um seletor sendo utilizado dentro de um laço. Já no segundo exemplo (linhas 8 a 11) temos a forma correta, sendo que neste caso o cache está sendo feito antes da criação do laço.
Listagem 1: Arquivo devmedia.js
// Errado
for (var i=0; i<90; i++){
$('#links').prepend(i);
}
// Certo
var linksEl = $('#links');
for (var i=0; i<90; i++){
linksEl.prepend(i);
}
Conclusão
Vimos neste artigo alguns dos truques básicos sobre como obter desempenho com jQuery. Aqui vai uma última dica: nunca deixe de testar seus scripts! Uma boa ferramenta para testar como anda seu código em questão de performance é o firebug. Com o firebug ativado você pode testar, por exemplo, quanto tempo leva a execução de seu código adicionando console.time('nome_do_identificador_aqui') no início de seu trecho de código e console.timeEnd('nome_do_identificador_aqui') logo ao final.
É isto, espero ter aberto a mente de vocês para esse assunto importantíssimo, explorem o máximo que puderem e até a próxima.
Links
- [1] - Google Closure
- [2] - Yui Compressor
