performance em jQuery apps

  • 3,073 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,073
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
29
Comments
4
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 bhwww.braziljs.org
  • 4. atualmente...
  • 5. por que melhorar a performance?
  • 6. site demorando...
  • 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. não use jQuery, aomenos que ele seja necessário
  • 9. ...pois alguns métodospodem ser mais fáceis do que você imagina size: function() {return this.length;}
  • 10. jsPerf• testes comparativos de trechos de códigos• fácil de compartilhar• browsers diferentes• usado pelo jQuery Team,Yahoo e outros
  • 11. por que usar a última versão?
  • 12. por que?• otimização de algoritmos• novas funcionalidades• migração é normalmente tranquila
  • 13. como descobrir a versão?• jQuery.fn.jquery
  • 14. um problema por usar versão antiga...
  • 15. um problema por usar versão antiga...
  • 16. operações por segundo
  • 17. operações por segundo
  • 18. teste! teste! teste! antes de fazer a migração
  • 19. ...mas evite linkar para última versão<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  • 20. combine, minifique egzipping seus scripts
  • 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. seletores
  • 23. DOM é muito lenta!
  • 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. anatomia de um seletorelemento#id.class[attr]:hover > a::after, div + strong http://www.slideshare.net/fabiomirandacosta/otimizao-de-seletores
  • 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. comparativo entreperformance de seletores
  • 28. comparativo entreperformance de seletores
  • 29. evite o seletor universal $(“.box > *”) $(“.box”).children()
  • 30. evite o seletor universal implicito$(“.box :radio”)$(“.box *:radio”)$(“.box input:radio”)
  • 31. use cache fellipe.com/slides/jqueryfn
  • 32. var $materias = $(".materias");for(var i = 0; i < $materias.length; i++){ $materias[i].find(".titulo").html( i );}
  • 33. Use contexto em seus seletores
  • 34. http://jsperf.com/ns-jq-cached
  • 35. http://jsperf.com/ns-jq-cached
  • 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. $parent.find(“.child”).show();busca usando metodos nativos no $parent em cache.
  • 38. $(“.child”, $parent).show();a instrução é convertida para $parent.find(“.child”).show();
  • 39. $(“.child”, $(“#parent”).show();a instrução é convertida para$(“#parent”).find(“.child”).show();
  • 40. $parent.children(“.child”).show();usa sibling e nextsibling para encontrar outros nós
  • 41. $(“#parent > .child”).show();$(“#parent .child”).show();$(“#parent span”).show();utilizam a regra da direita para esquerda
  • 42. console.timeconsole.timeEnd
  • 43. use encadeamento (chaining)
  • 44. http://jsperf.com/jquery-chaining
  • 45. Use For ao invés de Each
  • 46. http://jsperf.com/jquery-each-vs-for-loop/24
  • 47. Use id ao invés de classes
  • 48. jQuery não é uma caixa preta! http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
  • 49. performance x legibilidade
  • 50. obrigado!• @davidsonfellipe• www.fellipe.com• github.com/davidsonfellipe• www.slideshare.net/davidsonfellipe