Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Performance e Otimização do jQuery - Semana da Computação na UFF - 2010

on

  • 1,899 views

Apresentação realizada na Semana da Computação na UFF - 2010

Apresentação realizada na Semana da Computação na UFF - 2010

Dicas de performance e otimização do jQuery

Statistics

Views

Total Views
1,899
Views on SlideShare
1,825
Embed Views
74

Actions

Likes
3
Downloads
21
Comments
0

4 Embeds 74

http://leobalter.net 40
http://yayquery.com.br 31
http://blog.leobalter.net 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Performance e Otimização do jQuery - Semana da Computação na UFF - 2010 Performance e Otimização do jQuery - Semana da Computação na UFF - 2010 Presentation Transcript

  • Perfomance e Otimização do jQuery Semana da Computação 2010 - UFF
  • Leo Balter Desenvolvedor Front End @leobalter leo@balter.com.br
  • A entrega deve ser rápida
  • jQuery pode ser rápido
  • Performance 1.3.2 1.4.1 1.4.2 1.4.3 0 25 50 75 100 menos é melhor estimativa
  • Variáveis variavel = ‘global’ var variavel = ‘local’ jQuery.variavel = ‘global do jQuery’
  • Como testar tempo no JS? var inicio = new Date().getTime(); for(i = 0; i < 1000000; ++i) { foo; } var tempo = (new Date().getTime() - inicio); console.log(tempo);
  • Benchmark + Debug.log http://jsbin.com/umite/edit
  • Declaração inicial jQuery(document).ready( function() { /* mágica */ });
  • $(document).ready( function() { /* mágica */ });
  • $(document).ready( function() { /* mágica */ }); jQuery.ready( function() { /* mágica */ });
  • $(document).ready( function() { /* mágica */ }); jQuery.ready( function() { /* mágica */ }); $.ready( function() { /* mágica */ });
  • $(document).ready( function() { /* mágica */ }); jQuery.ready( function() { /* mágica */ }); $.ready( function() { /* mágica */ }); jQuery( function() { /* mágica */ });
  • $(document).ready( function() { /* mágica */ }); jQuery.ready( function() { /* mágica */ }); $.ready( function() { /* mágica */ }); jQuery( function() { /* mágica */ }); $( function() { /* mágica */ });
  • jQuery( function($) { /* mágica */ });
  • Objetos Literais do JS var objLiteral = { prop1 : ‘um texto qualquer’, prop2 : [ ‘elem1’, ‘elem2’ ], prop3 : 4 prop4 : function() { /* código */ }, prop5 : function(arg) { /* código */ } }; console.log( objLiteral.prop1 );
  • var jQueryLiterals = {   onReady : function($) {     $('#hello').text('Olá mundo!');     $('#clicar').click(jQueryLiterals.cliques);    },   cliques : function(e) {     e.preventDefault();     $(' #hello').animate( { padding: 30 }, 1200 );    } }; jQuery(document).ready(jQueryLiterals.onReady); http://jsbin.com/usiwe4
  • Vantagens dos Objetos Literais: Mais fáceis de navegar Nomes de profiles do que vai ser feito Podem ser executados direto do console do firebug Podem ser feitos testes unitários direto a essas chamadas
  • DRY - Dont Repeat Yourself if ($ventfade.data('currently') != 'showing') { $ventfade.stop(); } if ($venthover.data('currently') != 'showing') { $venthover.stop(); } if ($spans.data('currently') != 'showing') { $spans.stop(); }
  • var elems = [$ventfade,$venthover,$spans];   $.each(elems,function(k,v){ if (v.data('currently') != 'showing'){ v.stop(); } });
  • Melhorando seletores $(‘div.caixa’, ‘#container’) vs. $(‘#container’).find(‘div.caixa’)
  • $('.buttons > *') // lerdão $('.buttons').children() // bacana
  • Não repita o instanciamento de seletores $('#clicar').bind('click', lits.anima);      $('#clicar').trigger('click');
  • $(‘#clicar’) // elemento comum var $clicar = $(‘#clicar’);
  • var $clicar = $(‘#clicar’); $clicar.bind('click', lits.anima);      $clicar.trigger('click');
  • Instancie e mantenha o document var $doc = $(document)
  • Cuidado! var $doc = $(‘document’) Não funciona!
  • Depois de instanciar o document, use o find! var $doc = $(document); var $clicar = $doc.find(‘#clicar’); $clicar.bind('click', lits.anima);      $clicar.trigger('click');
  • Bind, Live ou Delegate? Bind: aplica eventos para elementos existentes Live: aplica eventos que acontecem a elementos que batem com a seleção apresentada, a qualquer momento Delegate: mais rápido que o Live
  • $(‘.caixa’).click( function() { ... } ); $(‘.caixa’).bind(‘click’, function() { ... } ); $(‘.caixa’).live(‘click’, function() { ... } ); $(‘#container’).delegate(‘.caixa’, ‘click’, function() { ... } );
  • $(‘#container’).delegate(‘.caixa’, ‘click’, function() { ... } ); Não instancia os elementos ‘.caixa’ pois eles podem mudar depois. Automaticamente é considerado também um contexto de onde esse evento ocorre. Assim não é preciso percorrer todo o DOM pra checar a validade do elemento clicado, apenas seu contexto
  • $(‘.caixa’).live(‘click’, function() { ... } ); Instancia ‘.caixa’ aplica live que vai acontecer pra qualquer .caixa, não só os selecionados elementos selecionados ocupam lugar na memória de bobeira...
  • $.data ou $(elemento).data $(elemento).data('chave', 'data'); $.data('elemento', 'chave', 'data');