performance em jQuery apps

performance em jQuery apps por davidson fellipe

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

por que melhorar a performance?

redução de bytesredução de requestsreduzir o trabalho que o browser tem de fazer

não use jQuery, aomenos que ele seja necessário

...pois alguns metodospodem ser mais faceis do que você imagina size: function() {return this.length;},

$(a).bind(‘click’, function(){ console.log(elemento clicado: + $(this).attr(id));});$(a).bind(‘click’, function(){ console.log(elemento clicado: + this.id);});

por que usar a última versão?

um problema por usar versão antiga...

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, miniﬁque 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

comparativo entreperformance de seletores

evite o seletor universal $(“.box > *”) $(“.box”).children()

evite o seletor universal implicito$(“.box :radio”)$(“.box *:radio”)$(“.box input:radio”)

formas de seleção1) $parent.ﬁnd(‘.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% + lentahttp://jsperf.com/jquery-selectors-context/2

console.timeconsole.timeEnd

evite manipulaçõesdesnecessárias do DOM

for( i = 0; i < 5000; i++){ $("body").css("background-color", "#f00"); $("body").addClass("fonte-maior");}//acesso ao DOM várias vezes: 197msvar $body = $("body");for( i = 0; i < 5000; i++){ $body.css("background-color", "#f00"); $body.addClass("fonte-maior");}//cacheando o seletor: 158ms

use encadeamento

var $body = $("body");for(i=0;i<10000;i++){ $body.css("background-color", "#f00"); $body.addClass("fonte-maior");}//sem chaining: 325msvar $body = $("body");for(i=0;i<10000;i++){ $body.css("background-color", "#f00").addClass("fonte-maior");}//com chaining: 308ms

Use contexto em seus seletores

for(i=0;i<10000;i++){ $(".materia-titulo").css("background-color", "#f00");}//sem contexto: 2381msvar $contexto = $(".feed");for(i=0;i<10000;i++){ $(".materia-titulo", $contexto).css("background-color", "#f00");}//com contexto: 1883ms

Use For ao invés de Each

Use id ao invés de classes

use cache fellipe.com/slides/jqueryfn

entenda o código-fonte do jQueryhttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

performance x legibilidade

obrigado!• @davidsonfellipe• www.fellipe.com• github.com/davidsonfellipe• www.slideshare.net/davidsonfellipe• outros sites: fellipe ou davidsonfellipe

performance em jQuery apps

by Davidson Fellipe on Jan 21, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 215

Statistics

performance em jQuery apps — Presentation Transcript

http://www.gonow.com.br	214
http://a0.twimg.com	1