Como Perder Peso (no browser)

Como Perder Peso (no browser)

Presented at Rio.JS Conf
March 9, 2013
Rio de Janeiro, Brazil

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

March 09, 2013
Tweet

Transcript

  1. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 10.
  10. 11.
  11. 12.
  12. 13.

    “Otimize a performance do front-end primeiro, é onde 80/90% do

    tempo de resposta ao usuário é gasto.” - Steve Souders
  13. 15.
  14. 16.

    • Economizar 1kb significa: • Em 60 segundos = 3.4GB

    Fonte: http://jaydson.org/talks/x-web-performance/
  15. 17.

    • Economizar 1kb significa: • Em 1 hora = 180GB

    Fonte: http://jaydson.org/talks/x-web-performance/
  16. 18.

    • Economizar 1kb significa: • Em 1 dia = 4.2TB

    Fonte: http://jaydson.org/talks/x-web-performance/
  17. 19.
  18. 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/
  19. 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/
  20. 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/
  21. 24.
  22. 25.
  23. 27.
  24. 30.
  25. 31.

    #26 <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS -->

    <script src="script.js"></script> </body> </html>
  26. 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>
  27. 41.

    CSS

  28. 43.

    normal #23 .center { width: 960px; margin: 0 auto; }

    /* --- Structure --- */ .intro { margin: 100px; }
  29. 49.

    #22 <link rel="stylesheet" href="structure.css"> <link rel="stylesheet" href="banner.css"> <link rel="stylesheet" href="layout.css">

    <link rel="stylesheet" href="component.css"> <link rel="stylesheet" href="all.css"> vs
  30. 61.

    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
  31. 66.

    ruim... var arr = new Array(1000); for (var i =

    0; i < arr.length; i++) { // O tamanho do array é calculado 1000 } #17
  32. 67.

    bom! var arr = new Array(1000); for (var i =

    0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado } #17
  33. 73.

    ruim... var myList = document.getElementById("myList"); for (var i = 0;

    i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>"; } #15
  34. 74.

    var myList = ""; for (var i = 0; i

    < 100; i++) { myList += "<span>" + i + "</span>"; } document.getElementById("myList").innerHTML = myList; bom! #15
  35. 78.

    normal #14 BrowserDiet.app = function() { var foo = true;

    return { bar: function() { // do something } }; };
  36. 86.
  37. 101.

    #9 for ( var i = 0, len = a.length;

    i < len; i++ ) { e = a[i]; } for é mais rapido
  38. 109.
  39. 111.
  40. 112.

    css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; }

    .icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }
  41. 120.
  42. 122.

    .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"
  43. 123.
  44. 124.

    .htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE

    text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
  45. 125.
  46. 132.
  47. 135.
  48. 136.