0
hoje vamos falar deperformance
“Otimize a performance dofront-end primeiro, é onde80/90% do tempo de respostaao usuário é gasto.”            - Steve Soud...
http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
• Economizar 1kb significa:• Em 60 segundos = 3.4GB        Fonte: http://jaydson.org/talks/x-web-performance/
• Economizar 1kb significa:• Em 1 hora = 180GB         Fonte: http://jaydson.org/talks/x-web-performance/
• Economizar 1kb significa:• Em 1 dia = 4.2TB         Fonte: http://jaydson.org/talks/x-web-performance/
• + 15.000.000 de acessos por dia• De 3mb para 267kb• De 7.5s para 4.3s   Fonte: http://www.slideshare.net/keppelen/perfor...
• Diminuir 3.2s resultou em:• Redução de custo em servidores de  R$ 16.000,00 por dia  Fonte: http://www.slideshare.net/ke...
• Diminuir 3.2s resultou em:• Aumento de receita de  R$ 1.000.000,00 por dia   Fonte: http://www.slideshare.net/keppelen/p...
html  jquery   imagens            JSCSS      servidor
html
#27evitecódigosinline
inline<style>.center {  width: 960px;  margin: 0 auto;}</style>- requisições+tamanho            #27
externo<link rel="stylesheet" href="main.css">+ organização- tamanho+ cache                        #27
estilos no topo,scripts no rodapé            #26
#26<!doctype html><html><head>  <meta charset="UTF-8">  <title>Browser Diet</title>  <!-- CSS -->  <link rel="stylesheet" ...
#26<body>  <p>Lorem ipsum dolor sit amet.</p>  <!-- JS -->  <script src="script.js"></script></body></html>
comprimaseu html#25
normal                               #25<p>Lorem ipsum dolor sit amet.</p><!-- My List --><ul>  <li><a href="#"></a></li> ...
comprimido                               #25<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><ahref="#">...
https://code.google.com/p/htmlcompressor/
https://github.com/jney/grunt-htmlcompressor
#24  experimenteasync & defer
#24  script normal<script src="example.js"></script>
#24       script async<script async src="example.js"></script>+ie10
#24       script defer<script defer src="example.js"></script>+ie5
CSS
comprimaseu css#23
normal                            #23.center {  width: 960px;  margin: 0 auto;}/* --- Structure --- */.intro { margin: 100...
comprimido                               #23.center{width:960px;margin:0auto;}.intro{margin:100px;position:relative;}
http://yui.github.com/yuicompressor/
http://www.cssminifier.com/
https://github.com/jzaefferer/grunt-css
combine váriosarquivosem um só#22
#22<link   rel="stylesheet"   href="structure.css"><link   rel="stylesheet"   href="banner.css"><link   rel="stylesheet"  ...
http://gruntjs.com/
#21 não use  seletoruniversal
#21* {  margin: 0;  padding: 0;  border: none;  text-decoration: none;  outline: 0;}
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.com/normalize.css/
#20prefira<link> ao@import
#20<link rel="stylesheet" href="style.css">                 vs        @import url(style.css);
pense erepense seukey selector       #19
key selector >> aheader nav ul li a {}                        #19
key selectorheader nav ul li * { /* Péssimo */ }header nav ul li a { /* Muito Ruim */ }nav a { /* Ruim */ }nav a.nav-link ...
JAVASCRIPT
códigos de    #18terceiros?sempreassíncronos
async                                   #18var script = document.createElement(script),    scripts =document.getElementsBy...
guarde otamanhodo array    #17
ruim...                               #17var arr = new Array(1000);for (var i = 0; i < arr.length; i++) {  // O tamanho do...
bom!                                     #17var arr = new Array(1000);for (var i = 0, len = arr.length; i < len; i++) {  /...
http://jsperf.com/browser-diet-cache-array-length
http://jsperf.com/browser-diet-cache-array-length
#16 evite o document.write
html5 boilerplate                                     #16<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery....
minimizerepaintse reflows#15
ruim...var myList = document.getElementById("myList");for (var i = 0; i < 100; i++) {  myList.innerHTML += "<span>" + i + ...
bom!var myList = "";for (var i = 0; i < 100; i++) {  myList += "<span>" + i + "</span>";}document.getElementById("myList")...
http://jsperf.com/browser-diet-dom-manipulation
http://jsperf.com/browser-diet-dom-manipulation
comprimaseu js#14
normal                                 #14BrowserDiet.app = function() { var foo = true; return {    bar: function() {    ...
comprimido                              #14BrowserDiet.app=function(){return{bar:function(){}}};
http://yui.github.com/yuicompressor/
https://developers.google.com/closure/compiler/?hl=pt
https://github.com/mishoo/UglifyJS
combine váriosarquivosem um só#13
#13<script   src="navbar.js"></script><script   src="component.js"></script><script   src="page.js"></script>             ...
http://gruntjs.com/
jquery
#12use semprea últimaversão
#12<script src="http://code.jquery.com/jquery-latest.js"></script>                            vs<script src="http://code.j...
seletores    #11
find          #id         children.class   context     #11
id é mais rapido$("#foo");                   #11
http://jsperf.com/browser-diet-jquery-selectors
http://jsperf.com/browser-diet-jquery-selectors
abuse doencadeamento#10
não encadeando$("#object").addClass("foo");$("#object").css("border-color","#f0f");$("#object").width(200);$("#object").re...
encadeando$("#object").addClass("foo").css("border-color","#ccc").width(200).addClass("bar");#10
http://jsperf.com/browser-diet-chaining
http://jsperf.com/browser-diet-chaining
#9use forao invésde each
while reverso                for      $.each for in         #9
for é mais rapidofor ( var i = 0, len = a.length; i < len; i++ ) {    e = a[i];}                                      #9
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
#8não use jquery
jquery$(a).on(click, function() {  console.log( $(this).attr(id) );}); #8
js puro$(a).on(click, function() {  console.log( this.id );}); #8
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
imagens
css sprites#7
imagem   #7
css                              #7.icon-foo {  background-image: url(mySprite.png);  background-position: -10px -10px;}.i...
http://wearekiss.com/spritepad
http://www.spritecow.com/
http://compass-style.org/help/tutorials/spriting/
não escaleas imagensdireto nocódigo #6
html<img width="100" height="100"src="logo.jpg" alt="Logo">                                #6
otimize asimagens#5
lossless            jpg            png 8png 24      gif            #5
servidor
habilite ocaches dosarquivos#4
.htaccess                                           #4ExpiresActive   OnExpiresByType   image/gif "access plus 6 months"Ex...
gzip#3     #4 - Habilite o cache dos arquivos
.htaccess                                             #3AddOutputFilterByType   DEFLATE   text/htmlAddOutputFilterByType  ...
^bonus
ferramentasde análise#2
http://yslow.org/
https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
http://www.webpagetest.org/
performance deve ser pensada no projeto    como um todo
e não só deixar pratestar no finalzinho
lembre-se
o preguiçosotrabalha dobrado
quero aprender mais,aonde eu vou?
https://developers.google.com/speed/docs/best-practices/rules_intro
http://developer.yahoo.com/performance/rules.html
nada emportuguês?
e se a gentejuntasse...
renato mangini- google
sérgio lopes   - caelum
mike taylor- opera
marcel duran    - twitter
“Pica voando das galáxiascriado em cativeiro”              browserdiet.com
http://github.com/zenorocha/browser-diet
“Pica voando das galáxiascriado em cativeiro”      - Bernard de Luna
“Pica voando das galáxiascriado em cativeiro”      - Bernard de Luna
2º Encontro - 2011
fim.         zenorocha.com#1     browserdiet.com
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
×

Como Perder Peso (no browser)

4,067

Published on

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,067
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Como Perder Peso (no browser)"

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

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×