performance em jQuery apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

performance em jQuery apps

on

  • 3,696 views

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

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

Statistics

Views

Total Views
3,696
Views on SlideShare
3,280
Embed Views
416

Actions

Likes
10
Downloads
29
Comments
4

8 Embeds 416

http://www.gonow.com.br 392
http://lanyrd.com 10
https://twitter.com 6
http://www.feedspot.com 4
http://a0.twimg.com 1
http://www.twylah.com 1
http://www.linkedin.com 1
http://feeds.feedburner.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

performance em jQuery apps Presentation 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