Esta é a continuação das dicas para trapacear o desempenho no jQuery. A primeira parte pode ser lida aqui.
?
Testando o jQuery
19. Unidade de teste jQuery
A melhor forma de testar um código JavaScript é da forma humana, mas você pode usar algumas ferramentas automatizadas como Selenium, Funcunit, QUnit e QMock para testar seu código (especialmente plugins).
20. Execute testes em seu código jQuery
Sempre execute testes em seu código e veja qual query é mais lento para substituí-lo. Você pode conseguir isso com o console Firebug. Você também pode usar algumas das minhas funções de atalho jQuery para tornar seu teste mais fácil:
01 // Shortcut to log data to the Firebug console
02 $.l($('div'));
03
04 // Get the UNIX timestamp
05 $.time();
06
07 // Log the execution time of a JS block to Firebug
08 $.lt();
09 $('div');
10 $.lt();
11
12 // Run a block of code in a for loop to test the execution time
13 $.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6
Dicas gerais de desempenho no jQuery
21. Use a versão mais recente do jQuery
A mais nova versão é normalmente a melhor. Não se esqueça também de testar seu código depois de mudar a versão do core do jQuery. Às vezes, ele não é totalmente compatível com versões anteriores.
22. Utilize HTML5
O novo padrão HTML5 vem com uma estrutura DOM mais leve. Estrutura DOM mais leve significa menos elementos para atravessar para o jQuery e melhor desempenho de carregamento. Então, mude para ele quando possível.
23. Edite marcas de estilo quando nomear 15 ou mais elementos
Quando for para editar poucos elementos, é melhor simplesmente usar o método css() do jQuery. No entanto, quando for para editar 15 ou mais elementos, é mais eficiente anexar uma marca de estilo ao DOM. Dessa forma, você elimina os estilos de códigos complicados nos seus scripts.
1 $('<style type="text/css"> div.class { color: red; } </style>')
2 .appendTo('head');
24. Não carregue códigos desnecessários
É uma boa técnica quebrar seu código JavaScript em múltiplos arquivos e carregá-los somente nas páginas que necessitam deles. Dessa forma, você não carrega códigos JS e seletores desnecessários. Tahttps://imasters.com.br/admin/portal/conteudo/editor/conteudo/23263//mbém é fácil de administrar seu código assim.
25. Mantenha os tempos de download no mínimo com um grande .JS arquivo comprimido
Depois que você decidir quais arquivos javascript quer carregar, comprima-os e cole-os em um arquivo. Isso pode ser feito automaticamente com ferramentas de busca open source, como Minifyi, integradas ao seu código backend ou combinando-as e minimizando-as com ferramentas online como like JSCompressor, YUI Compressor ou Dean Edwards JS packer. Eu prefiro o JSCompressor entre as ferramentas online.
26. Combine o jQuery com Javascript puro onde necessário
É uma maravilha trabalhar com jQuery, mas não esqueça que isso é somente um framework para JavaScript. Para que você possa alternar entre os códigos jQuery e funções puras Javascript quando precisar ganhar mais desempenho.
27. Carregue o framework do Google Code
Sempre carregue o jQuery a partir do Google CDN no seu aplicativo de produção – ele entrega rapidamente o script a partir da localização mais próxima do cache do usuário. Dessa forma, você economiza uma solicitação do servidor, e o cliente também tem a possibilidade de carregar o script jQuery instantaneamente do cache do seu navegador, se ele visitar outro site que carrega o jQuery do Google CDN.
1 // Link the minified version by specific version
2 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
28. Carregamento passivo de conteúdo para rapidez e benefícios de SEO
Carregue pedaços grandes dos seus sites por Ajax para economizar o tempo de carregamento do servidor. Você pode começar com os widgets usuais das barras laterais.
Que outras dicas de desempenho no jQuery você sugere?
?
Texto original disponível em http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/



