Your SlideShare is downloading. ×
0
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Como Perder Peso (no browser)

4,040

Published on

Rio.JS Conf - 09/03/13 - Rio de Janeiro, Brasil

Rio.JS Conf - 09/03/13 - Rio de Janeiro, Brasil

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,040
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. hoje vamos falar deperformance
  • 2. “Otimize a performance dofront-end primeiro, é onde80/90% do tempo de respostaao usuário é gasto.” - Steve Souders
  • 3. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
  • 4. • Economizar 1kb significa:• Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
  • 5. • Economizar 1kb significa:• Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
  • 6. • Economizar 1kb significa:• Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/
  • 7. • + 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/
  • 8. • 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/
  • 9. • 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/
  • 10. html jquery imagens JSCSS servidor
  • 11. html
  • 12. #27evitecódigosinline
  • 13. inline<style>.center { width: 960px; margin: 0 auto;}</style>- requisições+tamanho #27
  • 14. externo<link rel="stylesheet" href="main.css">+ organização- tamanho+ cache #27
  • 15. estilos no topo,scripts no rodapé #26
  • 16. #26<!doctype html><html><head> <meta charset="UTF-8"> <title>Browser Diet</title> <!-- CSS --> <link rel="stylesheet" href="style.css"></head>
  • 17. #26<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script></body></html>
  • 18. comprimaseu html#25
  • 19. 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>
  • 20. comprimido #25<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><ahref="#"></a></li><li><a href="#"></a></li></ul>
  • 21. https://code.google.com/p/htmlcompressor/
  • 22. https://github.com/jney/grunt-htmlcompressor
  • 23. #24 experimenteasync & defer
  • 24. #24 script normal<script src="example.js"></script>
  • 25. #24 script async<script async src="example.js"></script>+ie10
  • 26. #24 script defer<script defer src="example.js"></script>+ie5
  • 27. CSS
  • 28. comprimaseu css#23
  • 29. normal #23.center { width: 960px; margin: 0 auto;}/* --- Structure --- */.intro { margin: 100px; }
  • 30. comprimido #23.center{width:960px;margin:0auto;}.intro{margin:100px;position:relative;}
  • 31. http://yui.github.com/yuicompressor/
  • 32. http://www.cssminifier.com/
  • 33. https://github.com/jzaefferer/grunt-css
  • 34. combine váriosarquivosem um só#22
  • 35. #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">
  • 36. http://gruntjs.com/
  • 37. #21 não use seletoruniversal
  • 38. #21* { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0;}
  • 39. http://meyerweb.com/eric/tools/css/reset/
  • 40. http://necolas.github.com/normalize.css/
  • 41. #20prefira<link> ao@import
  • 42. #20<link rel="stylesheet" href="style.css"> vs @import url(style.css);
  • 43. pense erepense seukey selector #19
  • 44. key selector >> aheader nav ul li a {} #19
  • 45. key selectorheader 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
  • 46. JAVASCRIPT
  • 47. códigos de #18terceiros?sempreassíncronos
  • 48. async #18var script = document.createElement(script), scripts =document.getElementsByTagName(script)[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script,
  • 49. guarde otamanhodo array #17
  • 50. ruim... #17var arr = new Array(1000);for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000}
  • 51. bom! #17var arr = new Array(1000);for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado}
  • 52. http://jsperf.com/browser-diet-cache-array-length
  • 53. http://jsperf.com/browser-diet-cache-array-length
  • 54. #16 evite o document.write
  • 55. html5 boilerplate #16<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script>window.jQuery || document.write(<scriptsrc="js/vendor/jquery-1.9.0.min.js"></script>)</script>
  • 56. minimizerepaintse reflows#15
  • 57. ruim...var myList = document.getElementById("myList");for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>";}#15
  • 58. bom!var myList = "";for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>";}document.getElementById("myList").innerHTML =myList;#15
  • 59. http://jsperf.com/browser-diet-dom-manipulation
  • 60. http://jsperf.com/browser-diet-dom-manipulation
  • 61. comprimaseu js#14
  • 62. normal #14BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } };};
  • 63. comprimido #14BrowserDiet.app=function(){return{bar:function(){}}};
  • 64. http://yui.github.com/yuicompressor/
  • 65. https://developers.google.com/closure/compiler/?hl=pt
  • 66. https://github.com/mishoo/UglifyJS
  • 67. combine váriosarquivosem um só#13
  • 68. #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>
  • 69. http://gruntjs.com/
  • 70. jquery
  • 71. #12use semprea últimaversão
  • 72. #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>
  • 73. seletores #11
  • 74. find #id children.class context #11
  • 75. id é mais rapido$("#foo"); #11
  • 76. http://jsperf.com/browser-diet-jquery-selectors
  • 77. http://jsperf.com/browser-diet-jquery-selectors
  • 78. abuse doencadeamento#10
  • 79. não encadeando$("#object").addClass("foo");$("#object").css("border-color","#f0f");$("#object").width(200);$("#object").removeClass("bar");#10
  • 80. encadeando$("#object").addClass("foo").css("border-color","#ccc").width(200).addClass("bar");#10
  • 81. http://jsperf.com/browser-diet-chaining
  • 82. http://jsperf.com/browser-diet-chaining
  • 83. #9use forao invésde each
  • 84. while reverso for $.each for in #9
  • 85. for é mais rapidofor ( var i = 0, len = a.length; i < len; i++ ) { e = a[i];} #9
  • 86. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
  • 87. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
  • 88. #8não use jquery
  • 89. jquery$(a).on(click, function() { console.log( $(this).attr(id) );}); #8
  • 90. js puro$(a).on(click, function() { console.log( this.id );}); #8
  • 91. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
  • 92. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
  • 93. imagens
  • 94. css sprites#7
  • 95. imagem #7
  • 96. css #7.icon-foo { background-image: url(mySprite.png); background-position: -10px -10px;}.icon-bar { background-image: url(mySprite.png); background-position: -5px -5px;}
  • 97. http://wearekiss.com/spritepad
  • 98. http://www.spritecow.com/
  • 99. http://compass-style.org/help/tutorials/spriting/
  • 100. não escaleas imagensdireto nocódigo #6
  • 101. html<img width="100" height="100"src="logo.jpg" alt="Logo"> #6
  • 102. otimize asimagens#5
  • 103. lossless jpg png 8png 24 gif #5
  • 104. servidor
  • 105. habilite ocaches dosarquivos#4
  • 106. .htaccess #4ExpiresActive OnExpiresByType 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"
  • 107. gzip#3 #4 - Habilite o cache dos arquivos
  • 108. .htaccess #3AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript
  • 109. ^bonus
  • 110. ferramentasde análise#2
  • 111. http://yslow.org/
  • 112. https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
  • 113. http://www.webpagetest.org/
  • 114. performance deve ser pensada no projeto como um todo
  • 115. e não só deixar pratestar no finalzinho
  • 116. lembre-se
  • 117. o preguiçosotrabalha dobrado
  • 118. quero aprender mais,aonde eu vou?
  • 119. https://developers.google.com/speed/docs/best-practices/rules_intro
  • 120. http://developer.yahoo.com/performance/rules.html
  • 121. nada emportuguês?
  • 122. e se a gentejuntasse...
  • 123. renato mangini- google
  • 124. sérgio lopes - caelum
  • 125. mike taylor- opera
  • 126. marcel duran - twitter
  • 127. “Pica voando das galáxiascriado em cativeiro” browserdiet.com
  • 128. http://github.com/zenorocha/browser-diet
  • 129. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  • 130. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  • 131. 2º Encontro - 2011
  • 132. fim. zenorocha.com#1 browserdiet.com

×