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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

performance em jQuery apps

  • 3,097 views
Published

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

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

Published 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,097
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
30
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