Javascript para adultos

26.635 visualizações

Publicada em

Apresentação feita no PHP Conference Brasil 2010 expondo dicas de como melhorar a performance no frontend de uma forma bem humorada.

Publicada em: Tecnologia, Design
1 comentário
16 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
26.635
No SlideShare
0
A partir de incorporações
0
Número de incorporações
250
Ações
Compartilhamentos
0
Downloads
606
Comentários
1
Gostaram
16
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Javascript para adultos

  1. 1. Conf JavaScript para Adultos Guilherme Blanco JavaScript para Adultos Guilherme Blanco Photo by Ray ThomasPhoto by Ray Thomas Conf
  2. 2. Guilherme Blanco ● Desenvolvedor 10+ anos ● Evangelista OpenSource ● Contribui para... ● Doctrine ● Symfony ● Zend Framework ● PHP @guilhermeblanco http://github.com/guilhermeblanco
  3. 3. O que é um navegador web?
  4. 4. Tudo é uma questão de percepção entre Performance & Accessibilidade
  5. 5. Sem técnica
  6. 6. Graceful Degradation (1994)
  7. 7. Progressive Enhancement (2003)
  8. 8. Renderização no navegador
  9. 9. HTMLHTML CSSCSS Inline CSSInline CSS Inline JSInline JS Done!Done! Bloqueia Renderização Bloqueia Renderização e Downloads
  10. 10. Poucas requisições HTTP
  11. 11. CSS Sprites
  12. 12. Image maps
  13. 13. Combinando JavaScript e CSS
  14. 14. Combinando JS e CSS ● Separação de scripts eficiente Doloto – Microsoft Research http://research.microsoft.com/en-us/projects/doloto/
  15. 15. JSLint / Google Closure compiler
  16. 16. Técnicas de carga sob demanda ● XHR eval ● XHR injection ● Script ou IFRAME ● Script DOM element ● Script defer
  17. 17. CSS no topo
  18. 18. Flash Of Unstyled Content (FOUC)
  19. 19. JavaScript na base (bottom)
  20. 20. JavaScript na base ● Tolerância à falha ● CNAME para download paralelo ● Minificar JavaScript
  21. 21. Gzip componentes
  22. 22. Gzip componentes ● HTML, CSS e JavaScript ● Request ● Response Accept­Encoding: gzip, deflate Content­Encoding: gzip Vary: Accept­Encoding,User­Agent
  23. 23. Gzip componentes ● mod_deflate AddOutputFilterByType DEFLATE      text/html text/css      application/x­javascript
  24. 24. Chunked responses
  25. 25. Chunked responses ● Mecanismo do HTTP/1.1 ● Divide dados de resposta e transmitindo cada chunk com seu tamanho ● Melhor usado quando a estrutura do site está em sincronia com esta estratégia ChunkView http://tools.w3clubs.com/chunkview/chunkview.php
  26. 26. <html> <head> [...] </head> <body> <div id="header"> [...] </div> <div id="content"> [...] </div> <div id="footer"> [...] </div> </body> </html> 1 2 4 3
  27. 27. HTML Semântico
  28. 28. Acessibilidade
  29. 29. SEO
  30. 30. Tolerância à falha
  31. 31. <a href="#" class="follow" onclick="follow(...);"> Follow </a>
  32. 32. <form class="follow" action="/user/follow" method="post">     <input type="submit" /> </form> [...] <script type="text/javascript">     yahoo.util.setFormAjax($(".follow")); </script>
  33. 33. JavaScript OO
  34. 34. yahoo.util = function () { var __construct, setFormAjax, setLinkAjax; __construct = function (context) { // Não faz nada }; setFormAjax = function ($form) { // Implementação aqui }; setLinkAjax = function ($link) { // Implementação aqui }; return (function () { var self = { setFormAjax: setFormAjax, setLinkAjax: setLinkAjax }; __construct(self); return self; })(); };
  35. 35. Template Binding
  36. 36. Template Binding ● HTML direto no JS ● Manipulação de DOM no JS ● Clonar um elemento template Jquery Template http://api.jquery.com/jQuery.template/
  37. 37. Template Binding <script id="summaryTpl" type="text/x­jquery­tmpl">     <li>${Name}</li> </script> function renderList() { // Template será compilado somente uma vez. $( "#summaryTpl" ) .tmpl( movies ) .appendTo( "#moviesList" ); }
  38. 38. Perguntas?

×