Optimización JavaScript y CSS

Optimización
CSS y JavaScript

@lucascepeda
WebcatBCN, 14/03/2012

Optimizaciones muy distintas

● CSS: Optimización para el desarrollador*

● JavaScript: Optimización para el usuario*

@lucascepeda WebcatBCN, 14/03/2012

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/


CSS: Comprimir

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


CSS: Lo que quizá no sepas

● 25K
● RTL
#footer .column ul li a { color: #FAFAFA }

● CSS antes que JS en el <head>


CSS: CSS antes que JS en <head>


CSS: Best practices

● IDs vs Clases
● Selectores eficientes
● OOCSS


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 else
universe.panic = false;



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



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


JS: Selectores

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


JS: Selectores (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


JS: Loops

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


JS: localStorage vs cookies

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


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


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


Gracias

@lucascepeda
WebcatBCN, 14/03/2012

Optimización JavaScript y CSS

More Related Content

What's hot (18)

Similar to Optimización JavaScript y CSS (20)

Recently uploaded (20)

Optimización JavaScript y CSS