<
Menu

Tableless



Imagem post: jQuery: dicas de otimização e performance

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.

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:

size: function() {
	return this.length;
},

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!

$('.menu').size()
$('.menu').length

O mesmo vale para retornar o ID de um elemento:

$(this).attr('id')
this.id

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:

$('#menu').css('display', 'block');

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:

document.getElementById('menu').style.display = 'block';

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:

var menu = $('#menu');
var itens = ['Home', 'Contato', 'Sobre'];
for(x in itens)
	menu.append('
  • '+itens[x]+'
  • ');

    Ao invés de:

    var itens = ['Home', 'Contato', 'Sobre'];
    for(x in itens)
    	$('#menu').append('
  • '+itens[x]+'
  • ');

    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.

    $('#container').addClass('corpo');
    $('#container').width(940);
    $('#container').height(300);
    

    Vira:

    $('#container').addClass('corpo')
    			   .width(940)
    			   .height(300);
    

    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:

    var menu = $('#menu');
    var itens = ['Home', 'Contato', 'Sobre'];
    var html = '';
    for(x in itens){
    	html += '
  • '+itens[x]+'
  • '; } menu.append(html); menu.show();

    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.

    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

    Mais posts do autor

    Comentários (15)

    • http://www.gabrielmagalhaes.com.br/ Gabriel Magalhães dos Santos

      Muito bom esse artigo, sempre gostei dos posts do Davi Ferreira.

      Sempre acho que sei algo de Jquery, qnd vem ele e me mostra que não sei é porra nem uma! hahaha.

      Parabens!

    • Pingback: Dicas de otimização e performance no jQuery | saviomd.com/blog

    • Rogerio

      nem Português!

    • Franklin Javier

      Muito bom o artigo. Já conhecia as técnicas, mas é sempre bom relembrar.

    • Franklin

      haha

    • http://anicetrick.tumblr.com Gustavo Freitas

      Bacana! Valeu Davi!

    • Ofelquis

      O abc, é isso ai.. gostei!

    • Matheus Salmi

      Gostei do post!

      Muita gente começa a utilizar jQuery, fica impressionado, e esquece do Javascript puro.

    • Pingback: Tropeçando 47 « Rafael Bernard Araujo

    • Luizz

      Muito bom, vamos usar mais javascript nativo!

    • Paulo Saeta

      Muito bom!
      Entre no meu Blog:

      http://paulosaeta.wordpress.com/ 

      Artigos e tutoriais Web

    • Thiago Lima

      Realmente é bem interessante, pois a maioria das pessoas acredita que usando a jQuery está “fazendo a melhor coisa do mundo”. Sou adepto na utilização do apenas o necessário, mas não havia pensado no encadeamento de métodos supracitados, excelente prática.

      Parabéns pelo texto, muito bom.

    • Pingback: Métodos desconhecidos em JQuery | Tableless

    • Pingback: Aprendendo melhor Javascript e como ser um bom profissional

    • http://www.vinicius-stutz.com/ Vinícius Stutz

      Eita, que baita aula! Fiquei até tímido…