Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimización JS y CSS

8654a0fab2697a900cd87e0728bec2da?s=47 Lucas Cepeda
March 15, 2012

Optimización JS y CSS

Presentación para la Webcat sobre cómo optimizar JavaScript y CSS en nuestros proyectos. (Barcelona, 14/03/2012)

8654a0fab2697a900cd87e0728bec2da?s=128

Lucas Cepeda

March 15, 2012
Tweet

Transcript

  1. Optimización CSS y JavaScript @lucascepeda WebcatBCN, 14/03/2012

  2. Optimizaciones muy distintas @lucascepeda WebcatBCN, 14/03/2012 • CSS: Optimización para

    el desarrollador* • JavaScript: Optimización para el usuario*
  3. CSS: Lo que ya debes saber @lucascepeda WebcatBCN, 14/03/2012 •

    Código inline, caca • @import, caca • Debe ir en el <head> • Usar shorthand
  4. CSS: Lo que ya tendrías que hacer @lucascepeda WebcatBCN, 14/03/2012

    • Combinar • Minimizar • Comprimir
  5. CSS: Combinar @lucascepeda WebcatBCN, 14/03/2012 <head> <link rel="stylesheet" type="text/css" href="styles/yellow.css">

    <link rel="stylesheet" type="text/css" href="styles/blue.css"> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> </head>
  6. CSS: Combinar @lucascepeda WebcatBCN, 14/03/2012 <head> <link rel="stylesheet" type="text/css" href="styles/combined.css">

    </head>
  7. CSS: Minimizar @lucascepeda WebcatBCN, 14/03/2012 /***** Multi-line comment before a

    new class name *****/ .classname { /* comment in declaration block */ font-weight: normal; }
  8. CSS: Minimizar @lucascepeda WebcatBCN, 14/03/2012 .classname{font-weight:normal}

  9. CSS: Combinar y minimizar @lucascepeda WebcatBCN, 14/03/2012 YUI Compressor: http://developer.yahoo.com/yui/compressor/

    minify: http://code.google.com/p/minify/
  10. CSS: Comprimir @lucascepeda WebcatBCN, 14/03/2012 En servidor (apache, node.js, lighttp,

    IIS...) • gzip • zlib
  11. CSS: Lo que quizá no sepas @lucascepeda WebcatBCN, 14/03/2012 •

    25K • RTL • CSS antes que JS en el <head> #footer .column ul li a { color: #FAFAFA }
  12. CSS: CSS antes que JS en <head> @lucascepeda WebcatBCN, 14/03/2012

  13. CSS: CSS antes que JS en <head> @lucascepeda WebcatBCN, 14/03/2012

  14. CSS: Best practices @lucascepeda WebcatBCN, 14/03/2012 • IDs vs Clases

    • Selectores eficientes • OOCSS
  15. CSS: Optimización prematura @lucascepeda WebcatBCN, 14/03/2012

  16. CSS: Optimización prematura @lucascepeda WebcatBCN, 14/03/2012

  17. CSS: Problemas conocidos @lucascepeda WebcatBCN, 14/03/2012 • :hover en elementos

    distintos que <a> • border-radius en IE9 • Expresiones en IE
  18. JS: Lo que ya debes saber @lucascepeda WebcatBCN, 14/03/2012 •

    Bloques <script> al final • Evitar document.write • eval es evil
  19. JS: Lo que ya tendrías que hacer @lucascepeda WebcatBCN, 14/03/2012

    • Combinar • Minimizar • Comprimir
  20. JS: Combinar @lucascepeda WebcatBCN, 14/03/2012

  21. JS: Lo que quizá no sepas @lucascepeda WebcatBCN, 14/03/2012 •

    Smart Event Handler • Mantener la estructura de los objetos • Selectores
  22. JS: Smart Event Handlers @lucascepeda WebcatBCN, 14/03/2012

  23. JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 var universe

    = { answer: 42 }; // do something else universe.panic = false;
  24. JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 var universe

    = { answer: 42, panic: true }; // do something else universe.panic = false;
  25. JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/javascript-object-structure-speed-matters/2

  26. JS: Selectores @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/id-vs-class-vs-tag-selectors/2

  27. JS: Selectores (CSS3 not vs .not) @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/jquery-css3-not-vs-not

  28. JS: Selectores (nativo vs liberías) @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/finding-an-element-w-jquery/6

  29. JS: Loops @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/loops/29

  30. JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)]

  31. JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)] [0, 1, 2,

    3, b, c][String(a).length]
  32. JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)] [0, 1, 2,

    3, b, c][String(a).length] ({ 'true': b, 'false': c })[a]
  33. JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)] [0, 1, 2,

    3, b, c][String(a).length] ({ 'true': b, 'false': c })[a] switch(a) { case true: return b case false: return c }
  34. JS: ternary operator vs alternatives @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/ternary-operators/3

  35. JS: localStorage vs cookies @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/localstorage-vs-objects/19

  36. Referencias CSS @lucascepeda WebcatBCN, 14/03/2012 http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css http://www.impressivewebs.com/css-specificity-irrelevant/ http://code.google.com/speed/page-speed/docs/rendering.html http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors

  37. Referencias JS @lucascepeda WebcatBCN, 14/03/2012 http://code.google.com/speed/page-speed/docs/ http://developer.yahoo.com/performance/ http://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html http://css-tricks.com/thinking-async/ http://jsperf.com

  38. Gracias @lucascepeda WebcatBCN, 14/03/2012

  39. @lucascepeda WebcatBCN, 14/03/2012