Optimización JavaScript y CSS

OptimizaciónCSS y JavaScript

@lucascepedaWebcatBCN, 14/03/2012

http://twitter.com/lucascepeda

Optimizaciones muy distintas

@lucascepeda WebcatBCN, 14/03/2012

● 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 shorthand















CSS: Lo que ya tendrías que hacer


● Combinar● Minimizar● Comprimir















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>















CSS: Combinar


<head> <link rel="stylesheet" type="text/css" href="styles/combined.css"></head>















CSS: Minimizar


/***** Multi-line comment before a new class name*****/.classname { /* comment in declaration block */ font-weight: normal;}















CSS: Minimizar


.classname{font-weight:normal}















CSS: Combinar y minimizar


YUI Compressor: http://developer.yahoo.com/yui/compressor/minify: http://code.google.com/p/minify/















http://developer.yahoo.com/yui/compressor/

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

CSS: Comprimir


En servidor (apache, node.js, lighttp, IIS...)● gzip● zlib















CSS: Lo que quizá no sepas


● 25K● RTL ● CSS antes que JS en el <head>

#footer .column ul li a { color: #FAFAFA }















CSS: CSS antes que JS en <head>
















CSS: CSS antes que JS en <head>
















CSS: Best practices


● IDs vs Clases● Selectores eficientes● OOCSS















CSS: Optimización prematura
















CSS: Optimización prematura
















CSS: Problemas conocidos


● :hover en elementos distintos que <a>● border-radius en IE9● Expresiones en IE















JS: Lo que ya debes saber


● Bloques <script> al final● Evitar document.write● eval es evil















JS: Lo que ya tendrías que hacer


● Combinar● Minimizar● Comprimir















JS: Combinar
















JS: Lo que quizá no sepas


● Smart Event Handler● Mantener la estructura de los objetos● Selectores















JS: Smart Event Handlers
















JS: Mantener estructura en objetos


var universe = { answer: 42};// do something elseuniverse.panic = false;

















var universe = { answer: 42, panic: true};// do something elseuniverse.panic = false;

















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















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

JS: Selectores


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















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

JS: Selectores (CSS3 not vs .not)


http://jsperf.com/jquery-css3-not-vs-not















http://jsperf.com/jquery-css3-not-vs-not

JS: Selectores (nativo vs liberías)


http://jsperf.com/finding-an-element-w-jquery/6















http://jsperf.com/finding-an-element-w-jquery/6

JS: Loops


http://jsperf.com/loops/29















http://jsperf.com/loops/29

JS: ??????


Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)]















JS: ??????



[0, 1, 2, 3, b, c][String(a).length]















JS: ??????




({ 'true': b, 'false': c})[a]















JS: ??????




({ 'true': b, 'false': c})[a]

switch(a) { case true: return b case false: return c}















JS: ternary operator vs alternatives


http://jsperf.com/ternary-operators/3















http://jsperf.com/ternary-operators/3

JS: localStorage vs cookies


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















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

Referencias CSS


http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-csshttp://www.impressivewebs.com/css-specificity-irrelevant/http://code.google.com/speed/page-speed/docs/rendering.htmlhttp://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















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

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.htmlhttp://css-tricks.com/thinking-async/http://jsperf.com















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

Gracias

@lucascepedaWebcatBCN, 14/03/2012

















Date post:	18-Dec-2014
Category:	Design
Upload:	lucascepeda
View:	1,316 times
Download:	2 times

Optimización JavaScript y CSS

Design