Desenvolvimento

23 jan, 2012

Lista de dicas para trapacear o desempenho no jQuery – Parte 02

Publicidade

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/