performance em jQuery apps

3,765 views
3,644 views

Published on

https://www.slideshare.net/davidsonfellipe/jqueryperf/

Published in: Technology
4 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,765
On SlideShare
0
From Embeds
0
Number of Embeds
476
Actions
Shares
0
Downloads
37
Comments
4
Likes
10
Embeds 0
No embeds

No notes for slide

performance em jQuery apps

  1. 1. performance em jQuery apps por davidson fellipe
  2. 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. 3. ★ regional conferences leader★ rio.js★ pernambuco.js★ front in maceió★ front in bhwww.braziljs.org
  4. 4. atualmente...
  5. 5. por que melhorar a performance?
  6. 6. site demorando...
  7. 7. redução de bytesredução de requestsreduzir o tempo de first view da páginareduzir o trabalho que o browser tem de fazerredução do consumo de memória
  8. 8. não use jQuery, aomenos que ele seja necessário
  9. 9. ...pois alguns métodospodem ser mais fáceis do que você imagina size: function() {return this.length;}
  10. 10. jsPerf• testes comparativos de trechos de códigos• fácil de compartilhar• browsers diferentes• usado pelo jQuery Team,Yahoo e outros
  11. 11. por que usar a última versão?
  12. 12. por que?• otimização de algoritmos• novas funcionalidades• migração é normalmente tranquila
  13. 13. como descobrir a versão?• jQuery.fn.jquery
  14. 14. um problema por usar versão antiga...
  15. 15. um problema por usar versão antiga...
  16. 16. operações por segundo
  17. 17. operações por segundo
  18. 18. teste! teste! teste! antes de fazer a migração
  19. 19. ...mas evite linkar para última versão<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  20. 20. combine, minifique egzipping seus scripts
  21. 21. Tente compactar todos os script em apenas 1 arquivoYUI CompressorMuitos browsers não estão aptos a processar mais que 1 script paralelamente
  22. 22. seletores
  23. 23. DOM é muito lenta!
  24. 24. it’s the part of a CSS rule that matches a set of elements inan HTML or XML document. http://reference.sitepoint.com/css/selectorref
  25. 25. anatomia de um seletorelemento#id.class[attr]:hover > a::after, div + strong http://www.slideshare.net/fabiomirandacosta/otimizao-de-seletores
  26. 26. 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
  27. 27. comparativo entreperformance de seletores
  28. 28. comparativo entreperformance de seletores
  29. 29. evite o seletor universal $(“.box > *”) $(“.box”).children()
  30. 30. evite o seletor universal implicito$(“.box :radio”)$(“.box *:radio”)$(“.box input:radio”)
  31. 31. use cache fellipe.com/slides/jqueryfn
  32. 32. var $materias = $(".materias");for(var i = 0; i < $materias.length; i++){ $materias[i].find(".titulo").html( i );}
  33. 33. Use contexto em seus seletores
  34. 34. http://jsperf.com/ns-jq-cached
  35. 35. http://jsperf.com/ns-jq-cached
  36. 36. formas de seleção1) $parent.find(“.child”).show(); //+ rapida2) $(“.child”, $parent).show(); //~5-10% + lenta3) $(“.child”, $(“#parent”)).show(); //~23% + lenta4) $parent.children(“.child”).show(); //~50% + lenta5) $(“#parent > .child”).show(); //~70% + lenta6) $(“#parent .child”).show(); //~77% + lenta7) $(“#parent span”).show(); //nem pense nisso!http://jsperf.com/jquery-selectors-context/2
  37. 37. $parent.find(“.child”).show();busca usando metodos nativos no $parent em cache.
  38. 38. $(“.child”, $parent).show();a instrução é convertida para $parent.find(“.child”).show();
  39. 39. $(“.child”, $(“#parent”).show();a instrução é convertida para$(“#parent”).find(“.child”).show();
  40. 40. $parent.children(“.child”).show();usa sibling e nextsibling para encontrar outros nós
  41. 41. $(“#parent > .child”).show();$(“#parent .child”).show();$(“#parent span”).show();utilizam a regra da direita para esquerda
  42. 42. console.timeconsole.timeEnd
  43. 43. use encadeamento (chaining)
  44. 44. http://jsperf.com/jquery-chaining
  45. 45. Use For ao invés de Each
  46. 46. http://jsperf.com/jquery-each-vs-for-loop/24
  47. 47. Use id ao invés de classes
  48. 48. jQuery não é uma caixa preta! http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
  49. 49. performance x legibilidade
  50. 50. obrigado!• @davidsonfellipe• www.fellipe.com• github.com/davidsonfellipe• www.slideshare.net/davidsonfellipe

×