Your SlideShare is downloading. ×
0
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
performance em jQuery apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

performance em jQuery apps

3,201

Published on

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

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

Published in: Technology
4 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,201
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
34
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

×