Este documento fornece dicas para melhorar a performance de aplicações jQuery. Algumas dicas incluem evitar usar jQuery desnecessariamente, usar a versão mais recente para otimizações, compactar e minificar scripts, usar seletores mais eficientes e encadeamento. Testes de performance (benchmarks) são recomendados antes de fazer mudanças significativas.

1. performance em jQuery apps
por davidson fellipe

2. sobre mim
• HTML ~ 2001
• eletrônica ✓ engenharia da computação ✓
• recife ✈ frontend engineer na globo.com
• mestrando em informática na puc-rio

3. ★ regional conferences leader
★ rio.js
★ pernambuco.js
★ front in maceió
★ front in bh
www.braziljs.org

4. atualmente...

6. por que melhorar a
performance?

7. site demorando...

8. redução de bytes
redução de requests
reduzir o tempo de first view da página
reduzir o trabalho que o browser tem de fazer
redução do consumo de memória

9. não use jQuery, ao
menos que ele seja
necessário

10. ...pois alguns métodos
podem ser mais fáceis
do que você imagina
size: function() {return this.length;}

12. jsPerf
• testes comparativos de trechos de códigos
• fácil de compartilhar
• browsers diferentes
• usado pelo jQuery Team,Yahoo e outros

17. por que usar a última
versão?

18. por que?
• otimização de algoritmos
• novas funcionalidades
• migração é normalmente tranquila

19. como descobrir a
versão?
• jQuery.fn.jquery

20. um problema por usar versão antiga...

21. um problema por usar versão antiga...

22. operações por segundo

23. operações por segundo

24. teste! teste! teste!
antes de fazer a
migração

25. ...mas evite linkar para
última versão
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

26. combine, minifique e
gzipping seus scripts

27. Tente compactar todos os script em apenas 1 arquivo
YUI Compressor
Muitos browsers não estão aptos a processar mais que 1
script paralelamente

28. seletores

29. DOM é muito lenta!

30. it’s the part of a CSS rule that
matches a set of elements in
an HTML or XML document.
http://reference.sitepoint.com/css/selectorref

31. anatomia de um seletor
elemento#id.class[attr]:hover > a::after, div + strong
http://www.slideshare.net/fabiomirandacosta/otimizao-de-seletores

32. sizzle: div p
• busca todos elementos p
• para cada p
• verifica se o pai é uma div
• se for salva o elemento
• se estiver no topo da DOM remove o
elemento
• senão busca o pai do pai

33. comparativo entre
performance de seletores

34. comparativo entre
performance de seletores

35. evite o seletor universal
$(“.box > *”)
$(“.box”).children()

36. evite o seletor universal
implicito
$(“.box :radio”)
$(“.box *:radio”)
$(“.box input:radio”)

37. use cache
fellipe.com/slides/jqueryfn

38. var $materias = $(".materias");
for(var i = 0; i < $materias.length; i++){
$materias[i].find(".titulo").html( i );
}

39. Use contexto em seus
seletores

40. http://jsperf.com/ns-jq-cached

41. http://jsperf.com/ns-jq-cached

42. formas de seleção
1) $parent.find(“.child”).show(); //+ rapida
2) $(“.child”, $parent).show(); //~5-10% + lenta
3) $(“.child”, $(“#parent”)).show(); //~23% + lenta
4) $parent.children(“.child”).show(); //~50% + lenta
5) $(“#parent > .child”).show(); //~70% + lenta
6) $(“#parent .child”).show(); //~77% + lenta
7) $(“#parent span”).show(); //nem pense nisso!
http://jsperf.com/jquery-selectors-context/2

43. $parent.find(“.child”).show();
busca usando metodos nativos no $parent em cache.

44. $(“.child”, $parent).show();
a instrução é convertida para $parent.find(“.child”).show();

45. $(“.child”, $(“#parent”).show();
a instrução é convertida para
$(“#parent”).find(“.child”).show();

46. $parent.children(“.child”).show();
usa sibling e nextsibling para encontrar outros nós

47. $(“#parent > .child”).show();
$(“#parent .child”).show();
$(“#parent span”).show();
utilizam a regra da direita para esquerda

48. console.time
console.timeEnd

49. use encadeamento
(chaining)

50. http://jsperf.com/jquery-chaining

51. Use For ao invés de
Each

52. http://jsperf.com/jquery-each-vs-for-loop/24

53. Use id ao invés de
classes

55. jQuery não é uma caixa preta!
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

62. performance
x
legibilidade

63. obrigado!
• @davidsonfellipe
• www.fellipe.com
• github.com/davidsonfellipe
• www.slideshare.net/davidsonfellipe