performance em jQuery apps                 por davidson fellipe
sobre mim•   HTML ~ 2001•   eletrônica ✓ engenharia da computação ✓•   recife ✈ frontend engineer na globo.com•   mestrand...
★ regional conferences leader★ rio.js★ pernambuco.js★ front in maceió★ front in bhwww.braziljs.org
atualmente...
por que melhorar a  performance?
site demorando...
redução de bytesredução de requestsreduzir o tempo de first view da páginareduzir o trabalho que o browser tem de fazerredu...
não use jQuery, aomenos que ele seja    necessário
...pois alguns métodospodem ser mais fáceis do que você imagina  size: function() {return this.length;}
jsPerf•   testes comparativos de trechos de códigos•   fácil de compartilhar•   browsers diferentes•   usado pelo jQuery T...
por que usar a última      versão?
por que?•   otimização de algoritmos•   novas funcionalidades•   migração é normalmente tranquila
como descobrir a          versão?•   jQuery.fn.jquery
um problema por usar versão antiga...
um problema por usar versão antiga...
operações por segundo
operações por segundo
teste! teste! teste!  antes de fazer a     migração
...mas evite linkar para                última versão<script type="text/javascript" src="http://code.jquery.com/jquery-lat...
combine, minifique egzipping seus scripts
Tente compactar todos os script em apenas 1 arquivoYUI CompressorMuitos browsers não estão aptos a processar mais que 1   ...
seletores
DOM é muito lenta!
it’s the part of a CSS rule that matches a set of elements inan HTML or XML document.                       http://referen...
anatomia de um seletorelemento#id.class[attr]:hover > a::after, div + strong                           http://www.slidesha...
sizzle: div p• busca todos elementos p  • para cada p     • verifica se o pai é uma div        • se for salva o elemento   ...
comparativo entreperformance de seletores
comparativo entreperformance de seletores
evite o seletor universal    $(“.box > *”)    $(“.box”).children()
evite o seletor universal        implicito$(“.box :radio”)$(“.box *:radio”)$(“.box input:radio”)
use cache     fellipe.com/slides/jqueryfn
var $materias = $(".materias");for(var i = 0; i < $materias.length; i++){    $materias[i].find(".titulo").html( i );}
Use contexto em seus      seletores
http://jsperf.com/ns-jq-cached
http://jsperf.com/ns-jq-cached
formas de seleção1) $parent.find(“.child”).show();       //+ rapida2) $(“.child”, $parent).show();        //~5-10% + lenta3...
$parent.find(“.child”).show();busca usando metodos nativos no $parent em cache.
$(“.child”, $parent).show();a instrução é convertida para $parent.find(“.child”).show();
$(“.child”, $(“#parent”).show();a instrução é convertida para$(“#parent”).find(“.child”).show();
$parent.children(“.child”).show();usa sibling e nextsibling para encontrar outros nós
$(“#parent > .child”).show();$(“#parent .child”).show();$(“#parent span”).show();utilizam a regra da direita para esquerda
console.timeconsole.timeEnd
use encadeamento    (chaining)
http://jsperf.com/jquery-chaining
Use For ao invés de       Each
http://jsperf.com/jquery-each-vs-for-loop/24
Use id ao invés de      classes
jQuery não é uma caixa preta! http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
performance       x legibilidade
obrigado!•   @davidsonfellipe•   www.fellipe.com•   github.com/davidsonfellipe•   www.slideshare.net/davidsonfellipe
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
×

performance em jQuery apps

3,287

Published on

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

Published in: Technology
4 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,287
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
34
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×