Transferir como PDF, PPTX
![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)
Carregado porZeno Rocha
Como Perder Peso (no browser)
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.
Mais conteúdo relacionado
Semelhante a Como Perder Peso (no browser)
Como Perder Peso (no browser)
- 9. hoje vamos falarde performance
- 13. “Otimize a performancedo front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders
- 14.
- 16. • Economizar 1kbsignifica: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
- 17. • Economizar 1kbsignifica: • Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
- 18. • Economizar 1kbsignifica: • Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/
- 20. • + 15.000.000de 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.2sresultou 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.2sresultou 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.
- 26.
- 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, scriptsno 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>Loremipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body> </html>
- 32.
- 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>
- 35.
- 36.
- 37. #24 experimente async& defer
- 38. #24 scriptnormal <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.
- 42.
- 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;}
- 45.
- 46.
- 47.
- 48.
- 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">
- 50.
- 51. #21 não use seletor universal
- 52. #21 * { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0; }
- 53.
- 54.
- 55.
- 56. #20 <link rel="stylesheet" href="style.css"> vs @import url('style.css');
- 57. pense e repense seu keyselector #19
- 58. key selector >>a header nav ul li a {} #19
- 59. key selector header navul 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.
- 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.
- 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 }
- 66.
- 67.
- 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>
- 70.
- 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
- 73.
- 74.
- 75.
- 76. normal #14 BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } }; };
- 77. comprimido #14 BrowserDiet.app=function() {return{bar:function(){}}};
- 78.
- 79.
- 80.
- 81.
- 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>
- 83.
- 84.
- 85.
- 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 é maisrapido $("#foo"); #11
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98. while reverso for $.each for in #9
- 99. for é maisrapido for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; } #9
- 100.
- 101.
- 102.
- 103. jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8
- 104. js puro $('a').on('click', function(){ console.log( this.id ); }); #8
- 105.
- 106.
- 107.
- 108.
- 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; }
- 111.
- 112.
- 113.
- 114. não escale as imagens diretono código #6
- 115. html <img width="100" height="100" src="logo.jpg"alt="Logo"> #6
- 116.
- 117. lossless jpg png 8 png 24 gif #5
- 118.
- 119.
- 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.
- 124.
- 125.
- 126.
- 127.
- 128. performance deve ser pensada no projeto como um todo
- 129. e não sódeixar pra testar no finalzinho
- 130.
- 131.
- 132. quero aprender mais, aondeeu vou?
- 135.
- 136.
- 137.
- 138. e se agente juntasse...
- 139.
- 140. sérgio lopes - caelum
- 141.
- 142. marcel duran - twitter
- 143. “Pica voando dasgaláxias criado em cativeiro” browserdiet.com
- 144.
- 145. “Pica voando dasgaláxias criado em cativeiro” - Bernard de Luna
- 146. “Pica voando dasgaláxias criado em cativeiro” - Bernard de Luna
- 147. 2º Encontro -2011
- 148. fim. zenorocha.com #1 browserdiet.com