Este artigo, de duas partes, mostrará algumas dicas para trapacear o desempenho no jQuery.
?
Eu estava em busca de truques de desempenho no jQuery há um tempo para afiar minha pesada dinâmica de aplicativos web. Depois de procurar em vários artigos, eu decidi fazer uma lista das melhores dicas em comum de desempenho. Eu também criei uma conveniente lista de dicas para trapacear o desempenho no jQuery que pode ser impressa ou colocada no meu desktop.
Dicas para seletores de desempenho
1. Sempre parta de um #id
Essa é a regra de ouro para os seletores de jQuery. O jeito mais rápido de selecionar um elemento em um jQuery é usando ID:
1 $('#content').hide();
ou selecione múltiplos elementos que partem de um ID:
1 $('#content p').hide();
2. Use tags antes de classes
O segundo seletor mais rápido em jQuery é o Tag Selector ($(‘head’)), porque ele mapeia para um método JavaScript nativo, getElementsByTagName(). A melhor forma é utilizar um prefixo em uma classe com um tag name (e partir de um ID).
1 var receiveNewsletter = $('#nslForm input.on');
O seletor de classes está dentre os seletores mais lentos em jQuery; no IE, ele faz um loop por todo o DOM. Evite usá-lo sempre que possível. Nunca use um prefixo em um ID com um tag name. Por exemplo, isto é lento porque ele irá dar um loop por todos os elementos <div>, à procura do “conteúdo” do ID:
1 var content = $('div#content'); // VERY SLOW, AVOID THIS
NÃO parta também de múltiplos IDs:
1 var traffic_light = $('#content #traffic_light'); // VERY SLOW, AVOID THIS
3. Use sub-queries
Coloque os objetos principais em cache e depois execute consultas neles:
1 var header = $('#header');
2
3 var menu = header.find('.menu');
4 // or
5 var menu = $('.menu', header);
4. Otimize seletores para o modelo Sizzle “direita para esquerda”
Como na versão 1.3, o jQuery vem usando a Bilbliotoca Seletora Sizzle Javascript, que funciona de forma um pouco diferente das ferramentas seletoras usadas no passado. Isto é, ela usa um modelo “direita para esquerda” em vez de “esquerda para direita”. Tenha certeza de que o seu seletor “mais à direita” é realmente específico e quaisquer seletores na esquerda são mais abrangentes:
1 var linkContacts = $('.contact-links div.side-wrapper');
em vez de:
1 var linkContacts = $('a.contact-links .side-wrapper');
5. Use .find() em vez de context
Realmente, a função .find() aparenta ser mais rápida. No entanto, isso conta mais quando você tem que atravessar uma página com vários elementos DOM:
1 var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
2 var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
3 var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6
6. Aproveite o poder o encadeamento
É melhor encadear os métodos jQuery do que ocultar os seletores:
1 $('li.menu-item').click(function () {alert('test click');})
2 .css('display', 'block')
3 .css('color', 'red')
4 fadeTo(2, 0.7);
7. Escreva os seus próprios seletores
Se você tem seletores que usa frequentemente no seu script – amplie o objeto jQuery $.expr[‘:’] e escreva o seu próprio seletor. No próximo exemplo, eu crio o seletor “abovethefold”, que retorna um conjunto de elementos que não estão visíveis:
1 $.extend($.expr[':'], {
2 abovethefold: function(el) {
3 return $(el).offset().top < $(window).scrollTop() + $(window).height();
4 }
5 });
6 var nonVisibleElements = $('div:abovethefold'); // Select the elements
Dicas de manipulação de desempenho DOM
8. Coloque os objetos jQuery em cache
Coloque em cache elementos que você usa frequentemente:
1 var header = $('#header');
2 var divs = header.find('div');
3 var forms = header.find('form');
9. Junte tudo em um único elemento ao fazer qualquer forma de inserção DOM
A manipulação DOM é muito lenta. Tente modificar o menos possível a estrutura do seu HTML.
01 var menu = '<ul id="menu">';
02 for (var i = 1; i < 100; i++) {
03 menu += '<li>' + i + '</li>';
04 }
05 menu += '</ul>';
06 $('#header').prepend(menu);
07
08 // Instead of doing:
09
10 $('#header').prepend('<ul id="menu"></ul>');
11 for (var i = 1; i < 100; i++) {
12 $('#menu').append('<li>' + i + '</li>');
13 }
10. Use detecção de objetos mesmo se o jQuery não acusar um erro
É ótimo que os métodos jQuery não despejam uma tonelada de erros nos seus usuários, mas isso não significa que você, como um desenvolvedor, deva confiar nisso. Mesmo que não acuse um erro, o jQuerry terá que executar várias funções inúteis antes de determinar que um objeto não existe. Portanto, utilize um rápido detector de objetos antes de invocar quaisquer métodos em um objeto jQuery que pode ou não existir.
11. Use funções diretas em vez de seus equivalentes convenientes
Para uma melhor perfomance, você pode usar funções diretas como $.ajax() em vez de $.get(), $.getJSON(), $.post(), pois as últimas são atalhos que executam a função $.ajax().
12. Armazene seus resultados jQuery para depois
Normalmente, você tem um objeto de aplicação javascript genérico – App. Mantenha suas seleções jQuery mais usadas armazenadas para depois:
1 App.hiddenDivs = $('div.hidden');
2 // later in your application:
3 App.hiddenDivs.find('span');
13. Utilize o método interno do jQuey data() para armazenar estados:
Não se esqueça de usar a função .data() para armazenar coisas para os seus elementos:
1 $('#head').data('name', 'value');
2 // later in your application:
3 $('#head').data('name');
14. Use as funções de utilidade do jQuery
Não se esqueça das funções de utilidade do jQuery, que podem ser bem convenientes. Minhas favoritas são $.isFunction(), $.isArray() e $.each().
15. Adicione uma classe JS ao atributo do seu HTML
Primeiramente, imediatamente após o jQuery ter sido carregado, você o utiliza para adicionar uma classe “JS” à tag do seu HTML.
1 $('HTML').addClass('JS');
Uma vez que isso somente ocorre quando o javascript está habilitado, você pode usá-lo para adicionar estilos CSS que só funcionam se o usuário estiver com o JavaScript ativado, da seguinte forma…
1 /* In your css */
2 .JS #myDiv{display:none;}
Então, isso significa que podemos esconder o conteúdo quando o JavaScript estiver ativado e depois usar o jQuery para mostrá-lo quando necessário (por exemplo, ao colidir alguns painéis e expandi-los quando os usuários clicam sobre eles), enquanto aqueles com o JavaScript desativado (e mecanismos espiões de busca) veem todo o conteúdo, já que não está escondido. Eu o usarei muito no futuro.
Dicas de desempenho de eventos
16. Adote o $(window).load
Às vezes é mais rápido usar $(window).load do que $(document).ready(), pois o último ocorre antes de todos os elementos DOM terem sido baixados. Você deve testar isso antes de usá-lo.
17. A influência da Delegação de Eventos (também conhecido como Bubbling)
Quando você tem vários elementos em um container e você quer atribuir um evento para todos eles, utilize a delegação para resolver isso. A delegação te dá a habilidade de vincular somente um evento para um elemento pai e depois verificar sobre qual filho o evento agiu (alvo). É muito conveniente quando você tem uma grande tabela com várias informações e você quer definir eventos para os TDs. Agarre a tabela, defina a delegação de evento para todas as TDs:
1 $("table").delegate("td", "hover", function(){
2 $(this).toggleClass("hover");
3 });
18. Shorthand para o evento pronto
Se você quer salvar alguns bits na compressão do seu plugin JS – substitua o evento $(document).onready:
01 // Instead of:
02 $(document).ready(function (){
03 // your code
04 });
05
06 // you can do:
07
08 $(function (){
09 // your code
10 });
No próximo artigo, veja as dicas finais.
?
Texto original disponível em http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/
De 0 a 10, o quanto você recomendaria este artigo para um amigo?