63
performance em jQuery apps por davidson fellipe

performance em jQuery apps

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: performance em jQuery apps

performance em jQuery appspor davidson fellipe

Page 2: performance em jQuery apps

sobre mim

• HTML ~ 2001

• eletrônica ✓ engenharia da computação ✓

• recife ✈ frontend engineer na globo.com

• mestrando em informática na puc-rio

Page 3: performance em jQuery apps

★ regional conferences leader

★ rio.js

★ pernambuco.js

★ front in maceió

★ front in bh

www.braziljs.org

Page 4: performance em jQuery apps

atualmente...

Page 5: performance em jQuery apps
Page 6: performance em jQuery apps

por que melhorar a performance?

Page 7: performance em jQuery apps

site demorando...

Page 8: performance em jQuery apps

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

Page 9: performance em jQuery apps

não use jQuery, ao menos que ele seja

necessário

Page 10: performance em jQuery apps

...pois alguns métodos podem ser mais fáceis do que você imagina

size: function() {return this.length;}

Page 11: performance em jQuery apps
Page 12: performance em jQuery apps

jsPerf

• testes comparativos de trechos de códigos

• fácil de compartilhar

• browsers diferentes

• usado pelo jQuery Team, Yahoo e outros

Page 13: performance em jQuery apps
Page 14: performance em jQuery apps
Page 15: performance em jQuery apps
Page 16: performance em jQuery apps
Page 17: performance em jQuery apps

por que usar a última versão?

Page 18: performance em jQuery apps

por que?

• otimização de algoritmos

• novas funcionalidades

• migração é normalmente tranquila

Page 19: performance em jQuery apps

como descobrir a versão?

• jQuery.fn.jquery

Page 20: performance em jQuery apps

um problema por usar versão antiga...

Page 21: performance em jQuery apps

um problema por usar versão antiga...

Page 22: performance em jQuery apps

operações por segundo

Page 23: performance em jQuery apps

operações por segundo

Page 24: performance em jQuery apps

teste! teste! teste! antes de fazer a

migração

Page 25: performance em jQuery apps

...mas evite linkar para última versão

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Page 26: performance em jQuery apps

combine, minifique e gzipping seus scripts

Page 27: performance em jQuery apps

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

Page 28: performance em jQuery apps

seletores

Page 29: performance em jQuery apps

DOM é muito lenta!

Page 30: performance em jQuery apps

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

Page 31: performance em jQuery apps

anatomia de um seletor

elemento#id.class[attr]:hover > a::after, div + strong

http://www.slideshare.net/fabiomirandacosta/otimizao-de-seletores

Page 32: performance em jQuery apps

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

Page 33: performance em jQuery apps

comparativo entre performance de seletores

Page 34: performance em jQuery apps

comparativo entre performance de seletores

Page 35: performance em jQuery apps

evite o seletor universal

$(“.box > *”)$(“.box”).children()

Page 36: performance em jQuery apps

evite o seletor universal implicito

$(“.box :radio”)$(“.box *:radio”)$(“.box input:radio”)

Page 37: performance em jQuery apps

use cache

fellipe.com/slides/jqueryfn

Page 38: performance em jQuery apps

var $materias = $(".materias");

for(var i = 0; i < $materias.length; i++){

$materias[i].find(".titulo").html( i );

}

Page 39: performance em jQuery apps

Use contexto em seus seletores

Page 40: performance em jQuery apps

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

Page 41: performance em jQuery apps

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

Page 42: performance em jQuery apps

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

Page 43: performance em jQuery apps

busca usando metodos nativos no $parent em cache.

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

Page 44: performance em jQuery apps

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

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

Page 45: performance em jQuery apps

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

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

Page 46: performance em jQuery apps

usa sibling e nextsibling para encontrar outros nós

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

Page 47: performance em jQuery apps

utilizam a regra da direita para esquerda

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

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

$(“#parent span”).show();

Page 48: performance em jQuery apps

console.timeconsole.timeEnd

Page 49: performance em jQuery apps

use encadeamento(chaining)

Page 51: performance em jQuery apps

Use For ao invés de Each

Page 53: performance em jQuery apps

Use id ao invés de classes

Page 54: performance em jQuery apps
Page 55: performance em jQuery apps

jQuery não é uma caixa preta!

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

Page 56: performance em jQuery apps
Page 57: performance em jQuery apps
Page 58: performance em jQuery apps
Page 59: performance em jQuery apps
Page 60: performance em jQuery apps
Page 61: performance em jQuery apps
Page 62: performance em jQuery apps

performancex

legibilidade

Page 63: performance em jQuery apps

obrigado!

• @davidsonfellipe

• www.fellipe.com

• github.com/davidsonfellipe

• www.slideshare.net/davidsonfellipe