Herson Leite - Space DevMedia
Herson Leite << Space Anterior | Pr�ximo Space >>
�ltimas 20 atualiza��es de Herson Leite
Artigo - Obtendo performance com jQuery
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.
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