A equipe da Turbosite está sempre atenta à dicas e truques para melhorar a eficiência de suas ferramentas. Compartilhamos aqui algumas dicas retiradas do blog developer.*.com, com algumas modificações e conteúdo nosso. Esperamos que lhe seja de grande utilidade.
1 – Carregue o conteúdo pelo Google Code
Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.11.1.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
2 – Combine e minimize todos seus scripts
Sempre use compressor em seu código. Isso tornará o conteúdo de seu site mais rápido para carretamento, além de facilitar a leitura de seu site pelo navegador. Como exemplo, o YUI Compressor do Yahoo! Só não esqueça de manter o código original, para quando precisar de dar manutenção nele.
3 – Use o log do Firebug.
Use a função console.log(Object) do Firebug para escrever mensagens no console, muito melhor que alert(“”). O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM são sempre objetos, estamos tratando deles o tempo todo.
4 – Use menos funções de seleção, faça cache.
Funções de manipulações do DOM são muito caras para o processamento. Tente usa-las o mínimo possível
for (i = 0; i < 1000; i++) { var minhaLista = $('.minhaLista'); // seleciona 1000 vezes minhaLista.append('<li>Esse é o elemento ' + i + '<li>');}
Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.
var meusItens = '';for (i = 0; i < 1000; i++) { meusItens += '<li>Esse é o elemento ' + i + '</li>';}$('.minhaLista').html(meusItems);
Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?
5 – Use IDs em vez de classes sempre que possível
A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite. Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.
6 – Dê um contexto para seus seletores
As seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.
jQuery( expression, contexto );$('contexto').find('expression');$('contexto expression');
7 – Use encadeamento de funções
Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Usar encadeamento também ajuda a diminuir a quantidade de seletores.
$('#meuPainel') .find('TABLE .primeiraColuna') .removeClass('.primeiraColuna') .css('background', 'red') .append('<span>Essa celula agora é vermelha</span>');
8 – Saiba como usar a propriedade de animação
Todos adoram as animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade. Nos meados do lançamento do jQuery, pela facilidade e simplicidade, as animações em web pages virou uma febre desencadeada.
É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate(). Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate(). Esse método simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!
É muito fácil animar todos itens do seu menu para 100 pixels usando isso.
$('#myList li').mouseover(function() { $(this).animate({"height": 100}, "slow");});
Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.
$('#myBox').mouseover(function() { $(this).animate({ "width": 200 }, "slow"); $(this).animate({"height": 200}, "slow");});
Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:
$('#myBox').mouseover(function() { $(this).animate({ "width": 200, "height": 200 }, "slow");});
9 – Conheça sobre delegação de eventos
O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:
$('#minhaTabela TD').click(function(){ $(this).css('background', 'red');});
Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos. Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?
Para isso é que serve a delegação de eventos e isso é simples de implementar.
$('#minhaTabela').click(function(e) { var clicado = $(e.target); clicado.css('background', 'red');});
Muito útil, para por exemplo, manipular eventos de touch.
10 – Use o método data() do jQuery para armazenar estados
O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM.
$('#minhaDiv').data('estadoAtual', 'desligado');
Armazenar estados é mais útil e prático para quando, por exemplo, você queira verificar se um input esteja com alguma atributo que o valide no formulário.Para mais informações sobre os metodos data() e removeData() veja a documentação.
11 – Escreva seu próprio seletor
O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?
Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:
$.extend($.expr[':'], { mais100px: function(a) { return $(a).height() > 100; }}); $('.box:mais100px').click(function() { alert('O elemento que você clicou possui mais de 100 pixels de altura'); });
Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.
Mais exemplos dessa funcionalidade você pode pegar aqui.
12 – Use as funções de auxilio do jQuery
O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados. Vale a pena passar um tempinho na página que explica essas utilizades.
13 – Use a função “noconflict” para evitar conflitos com outros frameworks
A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:
var $j = jQuery.noConflict();$j('#minhaDiv').hide();
14 – Saiba quando uma imagem terminar de carregar
Use o método .load() em um elemento de imagem (IMG) com um callback.
$('body').append('<img src="" alt="" id="minhaImagem" />');$('#minhaImagem').attr('src', 'imagem.jpg').load(function() { console.log('Image Loaded. W: '+$(this).width()+' H: '+$(this).height());});
15 – Como saber se um elemento existe?
Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:
if ($('#minhaDiv')[0]) { // bloco de código}
16 – Return ‘false’ para evitar a continuação de um evento
Quando você adiciona algum afeito em um elemento, vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada. Para evitar isso, adicione um “return false;” ao fim do bloco de código:
$('popup').click(function(){ // bloco de código return false;});
17 – Atalho para a função “ready”
Você já deve estar acostumado a usar a função ready() para executar o código assim que a página tiver sido carregada. Pois saiba que pode economizar um pouco de código simplesmente usando:
$(function (){ // código});
18 – Identifique váriaveis do tipo jQuery
Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante. Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.
var $elemento = $(elemento);
19 – Sempre use a última versão
O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.
Então, utilize sempre a última versão.