A grande maioria dos desenvolvedores jQuery não se preocupa muito com performance e otimização. Afinal, o mantra do framework, “write less, do more”, envolve esconder a parte feia do Javascript e, muitas vezes, acrescentar camadas desnecessárias.
Neste artigo apresento algumas dicas de como melhorar a performance de sua aplicação jQuery. No entanto, vale lembrar que não é necessário otimizar nenhum código escrito previamente, já que a otimização dificilmente compensará o trabalho.
#1: Mantenha-se atualizado
Procure utilizar sempre a última versão estável do jQuery. A cada nova versão lançada são introduzidas inúmeras melhorias de performance nos métodos do framework.
Da versão 1.3 para a 1.4, por exemplo, houve um ganho de 50% na performance da execução dos testes padrão do jQuery.
Fique ligado nas mudanças. O lançamento de uma nova versão vem sempre acompanhando de notas sobre as novas funcionalidades, um changelog, como este aqui.
#2: Não utilize jQuery!
Em alguns momentos não é necessário utilizar jQuery. Apesar de ser fácil de utilizar e muito mais bonito de ler, o framework é apenas mais uma camada no desenvolvimento, uma “maquiagem” para o Javascript.
Em projetos pequenos você pode, se quiser, abolir totalmente o jQuery: é realmente necessário incluir os ~30kb do framework? Não dá pra resolver com Javascript puro?
Já em projetos maiores, mesmo incluindo o jQuery, em alguns casos é melhor não utilizá-lo. Por exemplo:
Acima está o código-fonte do método size, do jQuery. O que ele faz? Nada além de retornar o tamanho do objeto utilizando o método nativo length. Logo, é mais rápido utilizar diretamente o length!
O mesmo vale para retornar o ID de um elemento:
O seletor $(this), aliás, somente deve ser utilizado quando for necessário um método que só existe no jQuery. Nos outros casos, sempre dê preferência ao this nativo do Javascript.
Também é comum utilizar jQuery para alterar o CSS de um elemento, por exemplo:
Olhando o código-fonte do jQuery, o método .css() possui aproximadamente 20 linhas (sem contar outros métodos chamados). A atribuição acima poderia ser executada da seguinte forma, com uma única linha:
Os próprios métodos jQuery possuem camadas dentro do framework. Ao invés de utilizar o método $.getJSON, por exemplo, você pode chamar diretamente o método $.ajax com os parâmetros type: ‘GET’ e dataType: ‘json’.
Vale a pena dar uma olhada no código-fonte do jQuery para entender o que o framework faz por baixo dos panos e até que ponto é válido utilizá-lo.
#3: Seletores
Procure sempre ser o mais específico possível em um seletor. Quanto mais específico, mais rápido. Opte sempre por utilizar o ID do elemento. Mesmo quando for preciso utilizar uma classe no seletor, utilize o ID do elemento pai.
Os seletores que utilizam o ID ou a tag de um elemento são mais rápidos por um simples motivo: ambos utilizam métodos nativos do Javascript document.getElementbyId() e document.getElementsByTagname().
Evite utilizar seletores com atributos e/ou pseudo-seletores, a menos que seja extremamente necessário.
Outra dica importante: dê preferência ao método .find() quando precisar achar elementos filhos de um elemento com ID. Por exemplo, ao invés de $(‘#container p’) utilize $(‘#container’).find(‘p’), dessa forma o escopo da busca fica limitado ao primeiro objeto. O mesmo vale para seletores de classes e pseudo-seletores.
#4: Cache de elementos
Esta é uma dica simples, mas que pode adicionar ganhos de performance consideráveis. Procure sempre armazenar em uma variável o objeto jQuery retornado por um seletor, principalmente quando o seletor está dentro de um loop.
Por exemplo:
Ao invés de:
No exemplo acima, o seletor $(‘#menu’) seria executado 3 vezes, ou seja, o elemento seria buscado no DOM três vezes seguidas, sem nenhuma alteração.
Conforme citei na abertura do artigo, cachear seletores é uma prática que vai contra o “write less, do more” do jQuery. Seu código pode ficar um pouco mais “sujo”, mas, em contrapartida, fica também mais rápido.
#5: Encadeamento de métodos
Encadear métodos sempre foi uma das funcionalidades mais legais do jQuery e, se você ainda não faz uso dessa técnica, é por aqui que você deve começar.
Vira:
Quase todos os métodos e plugins retornam (ou deveriam retornar) um objeto jQuery. Além de melhorar a leitura, essa prática também afeta diretamente a performance do seu código já que o seletor só é executado uma única vez.
#6: DOM
Qualquer tipo de manipulação no DOM envolve um processo bem lento. No geral, você deve fugir desse tipo de implementação, principalmente se ela não possuir nenhum tipo de cache.
O ideal é manipular já com os dados finais e completos. Não manipule o DOM em um loop, por exemplo.
Utilizando o exemplo da dica de caching, poderíamos alterar para ficar ainda mais otimizado:
Repare que o método .append() foi chamado apenas uma vez, já recebendo o HTML completo concatenado.
#7: DRY (Don’t Repeat Yourself)
O jQuery disponibiliza um alto nível de personalização, permitindo que você escreva seus seletores e seus plugins.
Evite repetir blocos de código. Evite repetir seletores. Evite repetir manipulações no DOM (faça tudo o que precisa fazer uma única vez!). Esta é uma dica muito importante para performance, já que qualquer código repetido significa alguns bytes ou kbytes a mais na sua aplicação.
Mathias Bynens disponibilizou um uma apresentação genial sobre DRY e Javascript, vale a pena conferir.
Como medir a performance da sua aplicação?
O site jsPerf permite a criação de testes de performance para códigos javascript, utilizando jQuery ou não. É um bom lugar para você começar a comparar diferentes tipos de implementação. Esta apresentação dá dicas e ensina a utilizar a ferramenta.
Você também pode (e deve) utilizar a aba profile do Firebug e/ou do Chrome Developer Tools. Aqui tem um tutorial antigo, mas bacana, sobre o Firebug e aqui você encontra um tutorial sobre o Chrome Developer Tools.
