performance em jQuery apps

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 bh

www.braziljs.org

por que melhorar a
performance?

redução de bytes
redução de requests
reduzir o tempo de ﬁrst view da página
reduzir o trabalho que o browser tem de fazer
reduçã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...

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 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

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
• veriﬁca 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

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].ﬁnd(".titulo").html( i );

}

Use contexto em seus
seletores

http://jsperf.com/ns-jq-cached

formas de seleção
1) $parent.ﬁnd(“.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

$parent.ﬁnd(“.child”).show();

busca usando metodos nativos no $parent em cache.

$(“.child”, $parent).show();

a instrução é convertida para $parent.ﬁnd(“.child”).show();

$(“.child”, $(“#parent”).show();

a instrução é convertida para
$(“#parent”).ﬁnd(“.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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Destacado

Destacado (15)

Similar a performance em jQuery apps

Similar a performance em jQuery apps (20)

performance em jQuery apps