Client-Side

jQuery: dicas de otimização e performance

Performance é um aspecto muito importante em aplicações web. Confira algumas dicas simples de como otimizar seu código jQuery.

Por Davi Ferreira

• 13 comentários
• Tweet

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.

• 13 comentários

Por Davi Ferreira

Programador apaixonado pelo que faz. Responsável pelo desenvolvimento de sistemas e interfaces para Globo.com, Confederação Brasileira de Vôlei, Ricoh Brasil, Embratel entre outros.

http://www.daviferreira.com/blog

Veja os outros posts de Davi Ferreira