Performance em jQuery Apps

Slide 1

Slide 1 text

performance em jQuery apps por davidson fellipe

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

por que melhorar a performance?

Slide 4

Slide 4 text

redução de bytes redução de requests reduzir o trabalho que o browser tem de fazer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

por que usar a última versão?

Slide 9

Slide 9 text

um problema por usar versão antiga...

Slide 10

Slide 10 text

um problema por usar versão antiga...

Slide 11

Slide 11 text

operações por segundo

Slide 12

Slide 12 text

operações por segundo

Slide 13

Slide 13 text

teste! teste! teste! antes de fazer a migração

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

combine, miniﬁque e gzipping seus scripts

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

comparativo entre performance de seletores

Slide 18

Slide 18 text

comparativo entre performance de seletores

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 http://jsperf.com/jquery-selectors-context/2 formas de seleção

Slide 22

Slide 22 text

console.time console.timeEnd

Slide 23

Slide 23 text

evite manipulações desnecessárias do DOM

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

use encadeamento

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Use contexto em seus seletores

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Use For ao invés de Each

Slide 30

Slide 30 text

Use id ao invés de classes

Slide 31

Slide 31 text

use cache fellipe.com/slides/jqueryfn

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

performance x legibilidade

Slide 38

Slide 38 text

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