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 el