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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Como Perder Peso (no browser)

  • 3,863 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,863
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
39
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