Performance em jQuery Apps

Transcript

1. performance em jQuery apps por davidson fellipe
2. sobre mim • técnico em eletrônica • engenheiro da computação pela upe • desenvolvedor na globo.com • quase mestrando em informática na puc-rio • @davidsonfellipe
3. por que melhorar a performance?
4. redução de bytes redução de requests reduzir o trabalho que o browser tem de fazer
5. não use jQuery, ao menos que ele seja necessário
6. ...pois alguns metodos podem ser mais faceis do que você imagina size: function() {return this.length;},
7. $('a').bind(‘click’, function(){ console.log('elemento clicado: ' + $(this).attr('id')); }); $('a').bind(‘click’, function(){ console.log('elemento clicado: ' + this.id); });
8. por que usar a última versão?
9. um problema por usar versão antiga...
10. um problema por usar versão antiga...
11. operações por segundo
12. operações por segundo
13. teste! teste! teste! antes de fazer a migração
14. ...mas evite linkar para última versão <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
15. combine, minifique e gzipping seus scripts
16. Tente compactar todos os script em apenas 1 arquivo YUI Compressor Muitos browsers não estão aptos a processar mais que 1 script paralelamente
17. comparativo entre performance de seletores
18. comparativo entre performance de seletores
19. evite o seletor universal $(“.box > *”) $(“.box”).children()
20. evite o seletor universal implicito $(“.box :radio”) $(“.box *:radio”) $(“.box input:radio”)
21. 1) $parent.find(‘.child’).show(); //+ rapida 2) $(‘.child", $parent).show(); //~5-10% + lenta 3) $('.child', $('#parent')).show(); //~23% + lenta 4) $parent.children(".child’).show(); //~50% + lenta 5) $(‘#parent > .child’).show(); //~70% + lenta 6) $(‘#parent .child’).show(); //~77% + lenta http://jsperf.com/jquery-selectors-context/2 formas de seleção
22. console.time console.timeEnd
23. evite manipulações desnecessárias do DOM
24. for( i = 0; i < 5000; i++){ $("body").css("background-color", "#f00"); $("body").addClass("fonte-maior"); } //acesso ao DOM várias vezes: 197ms var $body = $("body"); for( i = 0; i < 5000; i++){ $body.css("background-color", "#f00"); $body.addClass("fonte-maior"); } //cacheando o seletor: 158ms
25. use encadeamento
26. var $body = $("body"); for(i=0;i<10000;i++){ $body.css("background-color", "#f00"); $body.addClass("fonte-maior"); } //sem chaining: 325ms var $body = $("body"); for(i=0;i<10000;i++){ $body.css("background-color", "#f00").addClass("fonte-maior"); } //com chaining: 308ms
27. Use contexto em seus seletores
28. var $contexto = $(".feed"); for(i=0;i<10000;i++){ $(".materia-titulo", $contexto).css("background-color", "#f00"); } //com contexto: 1883ms for(i=0;i<10000;i++){ $(".materia-titulo").css("background-color", "#f00"); } //sem contexto: 2381ms
29. Use For ao invés de Each
30. Use id ao invés de classes
31. use cache fellipe.com/slides/jqueryfn
32. entenda o código-fonte do jQuery http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
37. performance x legibilidade
38. obrigado! • @davidsonfellipe • www.fellipe.com • github.com/davidsonfellipe • www.slideshare.net/davidsonfellipe • outros sites: fellipe ou davidsonfellipe