• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
performance em jQuery apps
 

performance em jQuery apps

on

  • 3,473 views

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

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

Statistics

Views

Total Views
3,473
Views on SlideShare
3,071
Embed Views
402

Actions

Likes
9
Downloads
27
Comments
4

8 Embeds 402

http://www.gonow.com.br 380
http://lanyrd.com 10
https://twitter.com 4
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

14 of 4 previous next Post a comment

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

    • performance em jQuery apps por davidson fellipe
    • sobre mim• HTML ~ 2001• eletrônica ✓ engenharia da computação ✓• recife ✈ frontend engineer na globo.com• mestrando em informática na puc-rio
    • ★ 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ção do consumo de memória
    • 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 Team,Yahoo e outros
    • 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-latest.min.js"></script>
    • 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 script paralelamente
    • seletores
    • DOM é muito lenta!
    • 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
    • anatomia de um seletorelemento#id.class[attr]:hover > a::after, div + strong http://www.slideshare.net/fabiomirandacosta/otimizao-de-seletores
    • 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
    • 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) $(“.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
    • $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