Como Perder Peso (no browser)
15 gostaram2,888 visualizações
O documento discute técnicas para melhorar o desempenho de front-end de sites, destacando a importância de otimizar o front-end, onde a maior parte do tempo de resposta é gasto, e como pequenas melhorias podem gerar grandes economias e aumento de receita. Algumas dicas incluem comprimir arquivos, usar sprites de imagem, habilitar caches e gzip no servidor.
![async
#18
var script = document.createElement('script'),
scripts =
document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script,](https://image.slidesharecdn.com/slides-upload-pt-130310190224-phpapp02/85/Como-Perder-Peso-no-browser-62-320.jpg)
![for é mais rapido
for ( var i = 0, len = a.length; i < len; i++ ) {
e = a[i];
}
#9](https://image.slidesharecdn.com/slides-upload-pt-130310190224-phpapp02/85/Como-Perder-Peso-no-browser-99-320.jpg)
Como Perder Peso (no browser)
- 9. hoje vamos falar de performance
- 13. “Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders
- 16. • Economizar 1kb significa: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
- 17. • Economizar 1kb significa: • Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
- 18. • Economizar 1kb significa: • Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/
- 20. • + 15.000.000 de acessos por dia • De 3mb para 267kb • De 7.5s para 4.3s Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
- 21. • Diminuir 3.2s resultou em: • Redução de custo em servidores de R$ 16.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
- 22. • Diminuir 3.2s resultou em: • Aumento de receita de R$ 1.000.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
- 23. html jquery imagens JS CSS servidor
- 25. html
- 27. inline <style> .center { width: 960px; margin: 0 auto; } </style> - requisições +tamanho #27
- 28. externo <link rel="stylesheet" href="main.css"> + organização - tamanho + cache #27
- 29. estilos no topo, scripts no rodapé #26
- 30. #26 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Browser Diet</title> <!-- CSS --> <link rel="stylesheet" href="style.css"> </head>
- 31. #26 <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body> </html>
- 33. normal #25 <p>Lorem ipsum dolor sit amet.</p> <!-- My List --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
- 34. comprimido #25 <p>Lorem ipsum dolor sit amet.</ p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></ li></ul>
- 37. #24 experimente async & defer
- 38. #24 script normal <script src="example.js"></script>
- 39. #24 script async <script async src="example.js"></script> +ie10
- 40. #24 script defer <script defer src="example.js"></script> +ie5
- 41. CSS
- 43. normal #23 .center { width: 960px; margin: 0 auto; } /* --- Structure --- */ .intro { margin: 100px; }
- 44. comprimido #23 .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}
- 48. combine vários arquivos em um só #22
- 49. #22 <link rel="stylesheet" href="structure.css"> <link rel="stylesheet" href="banner.css"> <link rel="stylesheet" href="layout.css"> vs <link rel="stylesheet" href="component.css"> <link rel="stylesheet" href="all.css">
- 51. #21 não use seletor universal
- 52. #21 * { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0; }
- 56. #20 <link rel="stylesheet" href="style.css"> vs @import url('style.css');
- 57. pense e repense seu key selector #19
- 58. key selector >> a header nav ul li a {} #19
- 59. key selector header nav ul li * { /* Péssimo */ } header nav ul li a { /* Muito Ruim */ } nav a { /* Ruim */ } nav a.nav-link { /* Bom */ } nav .nav-link { /* Ótimo */ } .nav-link { /* Excelente */ } #19
- 60. JAVASCRIPT
- 61. códigos de #18 terceiros? sempre assíncronos
- 62. async #18 var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script,
- 63. guarde o tamanho do array #17
- 64. ruim... #17 var arr = new Array(1000); for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000 }
- 65. bom! #17 var arr = new Array(1000); for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado }
- 68. #16 evite o document.write
- 69. html5 boilerplate #16 <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"></ script>')</script>
- 71. ruim... var myList = document.getElementById("myList"); for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>"; } #15
- 72. bom! var myList = ""; for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>"; } document.getElementById("myList").innerHTML = myList; #15
- 76. normal #14 BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } }; };
- 77. comprimido #14 BrowserDiet.app=function() {return{bar:function(){}}};
- 81. combine vários arquivos em um só #13
- 82. #13 <script src="navbar.js"></script> <script src="component.js"></script> <script src="page.js"></script> vs <script src="framework.js"></script> <script src="all.js"></script>
- 84. jquery
- 86. #12 <script src="http://code.jquery.com/jquery-latest.js"></script> vs <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- 87. seletores #11
- 88. find #id children .class context #11
- 89. id é mais rapido $("#foo"); #11
- 94. encadeando $("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar"); #10
- 97. #9 use for ao invés de each
- 98. while reverso for $.each for in #9
- 99. for é mais rapido for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; } #9
- 102. #8 não use jquery
- 103. jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8
- 104. js puro $('a').on('click', function() { console.log( this.id ); }); #8
- 107. imagens
- 108. css sprites #7
- 109. imagem #7
- 110. css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; } .icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }
- 114. não escale as imagens direto no código #6
- 115. html <img width="100" height="100" src="logo.jpg" alt="Logo"> #6
- 117. lossless jpg png 8 png 24 gif #5
- 118. servidor
- 120. .htaccess #4 ExpiresActive On ExpiresByType image/gif "access plus 6 months" ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months"
- 121. gzip #3 #4 - Habilite o cache dos arquivos
- 122. .htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
- 123. ^ bonus
- 128. performance deve ser pensada no projeto como um todo
- 129. e não só deixar pra testar no finalzinho
- 130. lembre-se
- 132. quero aprender mais, aonde eu vou?
- 137. nada em português?
- 138. e se a gente juntasse...
- 140. sérgio lopes - caelum
- 141. mike taylor - opera
- 142. marcel duran - twitter
- 143. “Pica voando das galáxias criado em cativeiro” browserdiet.com
- 145. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna
- 146. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna
- 147. 2º Encontro - 2011
- 148. fim. zenorocha.com #1 browserdiet.com