OptimizaciónCSS y JavaScript                    @lucascepeda            WebcatBCN, 14/03/2012
Optimizaciones muy distintas    ● CSS: Optimización para el desarrollador*    ● JavaScript: Optimización para el usuario*@...
CSS: Lo que ya debes saber    ●     Código inline, caca    ●     @import, caca    ●     Debe ir en el <head>    ●     Usar...
CSS: Lo que ya tendrías que hacer    ● Combinar    ● Minimizar    ● Comprimir@lucascepeda                  WebcatBCN, 14/0...
CSS: Combinar    <head>        <link   rel="stylesheet"   type="text/css"   href="styles/yellow.css">        <link   rel="...
CSS: Combinar    <head>        <link rel="stylesheet" type="text/css" href="styles/combined.css">    </head>@lucascepeda  ...
CSS: Minimizar    /*****      Multi-line comment      before a new class name    *****/    .classname {        /* comment ...
CSS: Minimizar    .classname{font-weight:normal}@lucascepeda                         WebcatBCN, 14/03/2012
CSS: Combinar y minimizar    YUI Compressor: http://developer.yahoo.com/yui/compressor/    minify: http://code.google.com/...
CSS: Comprimir    En servidor (apache, node.js, lighttp, IIS...)      ● gzip      ● zlib@lucascepeda                      ...
CSS: Lo que quizá no sepas    ● 25K    ● RTL    #footer .column ul li a { color: #FAFAFA }    ● CSS antes que JS en el <he...
CSS: CSS antes que JS en <head>@lucascepeda                WebcatBCN, 14/03/2012
CSS: CSS antes que JS en <head>@lucascepeda                WebcatBCN, 14/03/2012
CSS: Best practices    ● IDs vs Clases    ● Selectores eficientes    ● OOCSS@lucascepeda                  WebcatBCN, 14/03...
CSS: Optimización prematura@lucascepeda                 WebcatBCN, 14/03/2012
CSS: Optimización prematura@lucascepeda                 WebcatBCN, 14/03/2012
CSS: Problemas conocidos    ● :hover en elementos distintos que <a>    ● border-radius en IE9    ● Expresiones en IE@lucas...
JS: Lo que ya debes saber    ● Bloques <script> al final    ● Evitar document.write    ● eval es evil@lucascepeda         ...
JS: Lo que ya tendrías que hacer    ● Combinar    ● Minimizar    ● Comprimir@lucascepeda                  WebcatBCN, 14/03...
JS: Combinar@lucascepeda       WebcatBCN, 14/03/2012
JS: Lo que quizá no sepas    ● Smart Event Handler    ● Mantener la estructura de los objetos    ● Selectores@lucascepeda ...
JS: Smart Event Handlers@lucascepeda                   WebcatBCN, 14/03/2012
JS: Mantener estructura en objetos    var universe = {       answer: 42    };    // do something else    universe.panic = ...
JS: Mantener estructura en objetos    var universe = {      answer: 42,      panic: true    };    // do something else    ...
JS: Mantener estructura en objetos http://jsperf.com/javascript-object-structure-speed-matters/2@lucascepeda              ...
JS: Selectores http://jsperf.com/id-vs-class-vs-tag-selectors/2@lucascepeda                                        WebcatB...
JS: Selectores (CSS3 not vs .not) http://jsperf.com/jquery-css3-not-vs-not@lucascepeda                                Webc...
JS: Selectores (nativo vs liberías) http://jsperf.com/finding-an-element-w-jquery/6@lucascepeda                           ...
JS: Loops http://jsperf.com/loops/29@lucascepeda                  WebcatBCN, 14/03/2012
JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)]@lucascepeda                          ...
JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)][0, 1, 2, 3, b, c][String(a).length]@l...
JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)][0, 1, 2, 3, b, c][String(a).length]({...
JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)][0, 1, 2, 3, b, c][String(a).length]({...
JS: ternary operator vs alternatives http://jsperf.com/ternary-operators/3@lucascepeda                             WebcatB...
JS: localStorage vs cookies http://jsperf.com/localstorage-vs-objects/19@lucascepeda                                    We...
Referencias CSS  http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css  http://www.impressivewebs....
Referencias JS  http://code.google.com/speed/page-speed/docs/  http://developer.yahoo.com/performance/  http://ariya.ofila...
Gracias                  @lucascepeda          WebcatBCN, 14/03/2012
@lucascepeda   WebcatBCN, 14/03/2012
Upcoming SlideShare
Loading in...5
×

"Optimización de CSS y JavaScript" por @lucascepeda

957

Published on

Presentación realizada en el #webcat Barcelona de Marzo del 2012

Autor: Lucas Cepeda (@lucascepeda)

------------------------------------------------
RECURSOS:

- YUI Compressor
http://developer.yahoo.com/yui/compressor/

- Minify
http://code.google.com/p/minify/

- Avoid document.write
http://code.google.com/speed/page-speed/docs/rtt.html#AvoidDocumentWrite

- JavaScript object structure: speed matters
http://jsperf.com/javascript-object-structure-speed-matters/2

- id vs class vs tag vs pseudo vs. attribute selectors
http://jsperf.com/id-vs-class-vs-tag-selectors/2

- JS: Selectores (CSS3 not vs .not)
http://jsperf.com/jquery-css3-not-vs-not

- Finding a DOM element (native vs jQuery vs Prototype)
http://jsperf.com/finding-an-element-w-jquery/6

- Loops
http://jsperf.com/loops/29

- Ternary Operators: a = false
http://jsperf.com/ternary-operators/3

- localStorage vs. Cookies
http://jsperf.com/localstorage-vs-objects/19

- Website Speed Part 1: Write More Efficient CSS
http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css

- CSS Specificity Should Be Irrelevant
http://www.impressivewebs.com/css-specificity-irrelevant/

- Optimize browser rendering
http://code.google.com/speed/page-speed/docs/rendering.html

- Our (CSS) Best Practices Are Killing US
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

- Performance Impact of CSS Selectors
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors

- Page Speed Family
http://code.google.com/speed/page-speed/docs/
- Exceptional Performance
http://developer.yahoo.com/performance/

- JavaScript object structure: speed matters
http://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html

- Thinking Async
http://css-tricks.com/thinking-async/

- jsPerf — JavaScript performance playground
http://jsperf.com

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

  • Be the first to like this

No Downloads
Views
Total Views
957
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

"Optimización de CSS y JavaScript" por @lucascepeda

  1. 1. OptimizaciónCSS y JavaScript @lucascepeda WebcatBCN, 14/03/2012
  2. 2. Optimizaciones muy distintas ● CSS: Optimización para el desarrollador* ● JavaScript: Optimización para el usuario*@lucascepeda WebcatBCN, 14/03/2012
  3. 3. CSS: Lo que ya debes saber ● Código inline, caca ● @import, caca ● Debe ir en el <head> ● Usar shorthand@lucascepeda WebcatBCN, 14/03/2012
  4. 4. CSS: Lo que ya tendrías que hacer ● Combinar ● Minimizar ● Comprimir@lucascepeda WebcatBCN, 14/03/2012
  5. 5. CSS: Combinar <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>@lucascepeda WebcatBCN, 14/03/2012
  6. 6. CSS: Combinar <head> <link rel="stylesheet" type="text/css" href="styles/combined.css"> </head>@lucascepeda WebcatBCN, 14/03/2012
  7. 7. CSS: Minimizar /***** Multi-line comment before a new class name *****/ .classname { /* comment in declaration block */ font-weight: normal; }@lucascepeda WebcatBCN, 14/03/2012
  8. 8. CSS: Minimizar .classname{font-weight:normal}@lucascepeda WebcatBCN, 14/03/2012
  9. 9. CSS: Combinar y minimizar YUI Compressor: http://developer.yahoo.com/yui/compressor/ minify: http://code.google.com/p/minify/@lucascepeda WebcatBCN, 14/03/2012
  10. 10. CSS: Comprimir En servidor (apache, node.js, lighttp, IIS...) ● gzip ● zlib@lucascepeda WebcatBCN, 14/03/2012
  11. 11. CSS: Lo que quizá no sepas ● 25K ● RTL #footer .column ul li a { color: #FAFAFA } ● CSS antes que JS en el <head>@lucascepeda WebcatBCN, 14/03/2012
  12. 12. CSS: CSS antes que JS en <head>@lucascepeda WebcatBCN, 14/03/2012
  13. 13. CSS: CSS antes que JS en <head>@lucascepeda WebcatBCN, 14/03/2012
  14. 14. CSS: Best practices ● IDs vs Clases ● Selectores eficientes ● OOCSS@lucascepeda WebcatBCN, 14/03/2012
  15. 15. CSS: Optimización prematura@lucascepeda WebcatBCN, 14/03/2012
  16. 16. CSS: Optimización prematura@lucascepeda WebcatBCN, 14/03/2012
  17. 17. CSS: Problemas conocidos ● :hover en elementos distintos que <a> ● border-radius en IE9 ● Expresiones en IE@lucascepeda WebcatBCN, 14/03/2012
  18. 18. JS: Lo que ya debes saber ● Bloques <script> al final ● Evitar document.write ● eval es evil@lucascepeda WebcatBCN, 14/03/2012
  19. 19. JS: Lo que ya tendrías que hacer ● Combinar ● Minimizar ● Comprimir@lucascepeda WebcatBCN, 14/03/2012
  20. 20. JS: Combinar@lucascepeda WebcatBCN, 14/03/2012
  21. 21. JS: Lo que quizá no sepas ● Smart Event Handler ● Mantener la estructura de los objetos ● Selectores@lucascepeda WebcatBCN, 14/03/2012
  22. 22. JS: Smart Event Handlers@lucascepeda WebcatBCN, 14/03/2012
  23. 23. JS: Mantener estructura en objetos var universe = { answer: 42 }; // do something else universe.panic = false;@lucascepeda WebcatBCN, 14/03/2012
  24. 24. JS: Mantener estructura en objetos var universe = { answer: 42, panic: true }; // do something else universe.panic = false;@lucascepeda WebcatBCN, 14/03/2012
  25. 25. JS: Mantener estructura en objetos http://jsperf.com/javascript-object-structure-speed-matters/2@lucascepeda WebcatBCN, 14/03/2012
  26. 26. JS: Selectores http://jsperf.com/id-vs-class-vs-tag-selectors/2@lucascepeda WebcatBCN, 14/03/2012
  27. 27. JS: Selectores (CSS3 not vs .not) http://jsperf.com/jquery-css3-not-vs-not@lucascepeda WebcatBCN, 14/03/2012
  28. 28. JS: Selectores (nativo vs liberías) http://jsperf.com/finding-an-element-w-jquery/6@lucascepeda WebcatBCN, 14/03/2012
  29. 29. JS: Loops http://jsperf.com/loops/29@lucascepeda WebcatBCN, 14/03/2012
  30. 30. JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)]@lucascepeda WebcatBCN, 14/03/2012
  31. 31. JS: ??????Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(,,).push(1)][0, 1, 2, 3, b, c][String(a).length]@lucascepeda WebcatBCN, 14/03/2012
  32. 32. JS: ??????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]@lucascepeda WebcatBCN, 14/03/2012
  33. 33. JS: ??????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}@lucascepeda WebcatBCN, 14/03/2012
  34. 34. JS: ternary operator vs alternatives http://jsperf.com/ternary-operators/3@lucascepeda WebcatBCN, 14/03/2012
  35. 35. JS: localStorage vs cookies http://jsperf.com/localstorage-vs-objects/19@lucascepeda WebcatBCN, 14/03/2012
  36. 36. Referencias CSS 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@lucascepeda WebcatBCN, 14/03/2012
  37. 37. Referencias JS 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@lucascepeda WebcatBCN, 14/03/2012
  38. 38. Gracias @lucascepeda WebcatBCN, 14/03/2012
  39. 39. @lucascepeda WebcatBCN, 14/03/2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×