Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (18)
Similaire à Optimización JavaScript y CSS
Similaire à Optimización JavaScript y CSS (20)
Dernier
Dernier (20)
Optimización JavaScript y CSS
- 1. Optimización CSS y JavaScript @lucascepeda WebcatBCN, 14/03/2012
- 2. Optimizaciones muy distintas ● CSS: Optimización para el desarrollador* ● JavaScript: Optimización para el usuario* @lucascepeda WebcatBCN, 14/03/2012
- 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. CSS: Lo que ya tendrías que hacer ● Combinar ● Minimizar ● Comprimir @lucascepeda WebcatBCN, 14/03/2012
- 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. CSS: Combinar <head> <link rel="stylesheet" type="text/css" href="styles/combined.css"> </head> @lucascepeda WebcatBCN, 14/03/2012
- 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. CSS: Minimizar .classname{font-weight:normal} @lucascepeda WebcatBCN, 14/03/2012
- 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. CSS: Comprimir En servidor (apache, node.js, lighttp, IIS...) ● gzip ● zlib @lucascepeda WebcatBCN, 14/03/2012
- 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. 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 ● IDs vs Clases ● Selectores eficientes ● OOCSS @lucascepeda WebcatBCN, 14/03/2012
- 15. CSS: Optimización prematura @lucascepeda WebcatBCN, 14/03/2012
- 16. CSS: Optimización prematura @lucascepeda WebcatBCN, 14/03/2012
- 17. CSS: Problemas conocidos ● :hover en elementos distintos que <a> ● border-radius en IE9 ● Expresiones en IE @lucascepeda WebcatBCN, 14/03/2012
- 18. JS: Lo que ya debes saber ● Bloques <script> al final ● Evitar document.write ● eval es evil @lucascepeda WebcatBCN, 14/03/2012
- 19. JS: Lo que ya tendrías que hacer ● Combinar ● Minimizar ● Comprimir @lucascepeda WebcatBCN, 14/03/2012
- 20. JS: Combinar @lucascepeda WebcatBCN, 14/03/2012
- 21. JS: Lo que quizá no sepas ● Smart Event Handler ● Mantener la estructura de los objetos ● Selectores @lucascepeda WebcatBCN, 14/03/2012
- 22. JS: Smart Event Handlers @lucascepeda WebcatBCN, 14/03/2012
- 23. JS: Mantener estructura en objetos var universe = { answer: 42 }; // do something else universe.panic = false; @lucascepeda WebcatBCN, 14/03/2012
- 24. JS: Mantener estructura en objetos var universe = { answer: 42, panic: true }; // do something else universe.panic = false; @lucascepeda WebcatBCN, 14/03/2012
- 25. JS: Mantener estructura en objetos http://jsperf.com/javascript-object-structure-speed-matters/2 @lucascepeda WebcatBCN, 14/03/2012
- 26. JS: Selectores http://jsperf.com/id-vs-class-vs-tag-selectors/2 @lucascepeda WebcatBCN, 14/03/2012
- 27. JS: Selectores (CSS3 not vs .not) http://jsperf.com/jquery-css3-not-vs-not @lucascepeda WebcatBCN, 14/03/2012
- 28. JS: Selectores (nativo vs liberías) http://jsperf.com/finding-an-element-w-jquery/6 @lucascepeda WebcatBCN, 14/03/2012
- 29. JS: Loops http://jsperf.com/loops/29 @lucascepeda WebcatBCN, 14/03/2012
- 30. JS: ?????? Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)] @lucascepeda WebcatBCN, 14/03/2012
- 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. 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. 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. JS: ternary operator vs alternatives http://jsperf.com/ternary-operators/3 @lucascepeda WebcatBCN, 14/03/2012
- 35. JS: localStorage vs cookies http://jsperf.com/localstorage-vs-objects/19 @lucascepeda WebcatBCN, 14/03/2012
- 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. 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. Gracias @lucascepeda WebcatBCN, 14/03/2012
- 39. @lucascepeda WebcatBCN, 14/03/2012