Upload
davidson-fellipe
View
3.188
Download
1
Embed Size (px)
DESCRIPTION
https://www.slideshare.net/davidsonfellipe/jqueryperf/
Citation preview
performance em jQuery appspor 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 bh
www.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, ao menos que ele seja
necessário
...pois alguns métodos podem 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 e gzipping seus scripts
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
seletores
DOM é muito lenta!
it’s the part of a CSS rule that matches a set of elements in an HTML or XML document.
http://reference.sitepoint.com/css/selectorref
anatomia de um seletor
elemento#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 entre performance de seletores
comparativo entre performance 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
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
7) $(“#parent span”).show(); //nem pense nisso!
http://jsperf.com/jquery-selectors-context/2
formas de seleção
busca usando metodos nativos no $parent em cache.
$parent.find(“.child”).show();
a instrução é convertida para $parent.find(“.child”).show();
$(“.child”, $parent).show();
a instrução é convertida para $(“#parent”).find(“.child”).show();
$(“.child”, $(“#parent”).show();
usa sibling e nextsibling para encontrar outros nós
$parent.children(“.child”).show();
utilizam a regra da direita para esquerda
$(“#parent > .child”).show();
$(“#parent .child”).show();
$(“#parent span”).show();
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
performancex
legibilidade
obrigado!
• @davidsonfellipe
• www.fellipe.com
• github.com/davidsonfellipe
• www.slideshare.net/davidsonfellipe