Uma pergunta comum, porque deveríamos alterar para o CDN do Google Hosted Libraries?

Resposta simples e com vários argumentos. O CDN do Google Hosted Libraries é utilizado por milhares de sites na internet, as chances de você ou seu cliente visitar outro site que esteja utilizando esta biblioteca são enormes, desta forma será feito cache no seu navegador e não será necessário baixá-la novamente, logo o site será carregado mais rápido. O download será mais rápido caso você não tenha o cache, pois servidores de CDN são preparados para entregas de bibliotecas, além de você também reduzir o overload de seu servidor pois será um arquivo a menos para entregar.

Dito as motivações para utilizar um CDN, vamos lhe ensinar como substituir o jQuery hospedado localmente para um CDN. Copie o seguinte código e cole dentro do seu arquivo functions.php localizado no diretório do seu tema.

Obs.: Note a versão do jQuery que inserimos, se seu site e scripts não comportam a versão 2.2.0, altere para a 1.12.0.

if(!function_exists('replace_jquery')):
    function replace_jquery()
    {
        if ( !is_admin() )
        {           
            wp_deregister_script('jquery');
            wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', FALSE, '2.2.0');
            wp_enqueue_script('jquery');
        }
    }
    add_action('init', 'replace_jquery');
endif;

Tem alguma dica ou sugestão? Deixe nos comentários.

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");
});

$('#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');
});

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');

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');  
});

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.