performance em jquery apps

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

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

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

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