"optimización de css y javascript" por @lucascepeda
DESCRIPTION
Presentación realizada en el #webcat Barcelona de Marzo del 2012Autor: Lucas Cepeda (@lucascepeda)------------------------------------------------RECURSOS:- YUI Compressorhttp://developer.yahoo.com/yui/compressor/- Minifyhttp://code.google.com/p/minify/- Avoid document.writehttp://code.google.com/speed/page-speed/docs/rtt.html#AvoidDocumentWrite- JavaScript object structure: speed mattershttp://jsperf.com/javascript-object-structure-speed-matters/2- id vs class vs tag vs pseudo vs. attribute selectorshttp://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- Loopshttp://jsperf.com/loops/29- Ternary Operators: a = falsehttp://jsperf.com/ternary-operators/3- localStorage vs. Cookieshttp://jsperf.com/localstorage-vs-objects/19- Website Speed Part 1: Write More Efficient CSShttp://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css- CSS Specificity Should Be Irrelevanthttp://www.impressivewebs.com/css-specificity-irrelevant/- Optimize browser renderinghttp://code.google.com/speed/page-speed/docs/rendering.html- Our (CSS) Best Practices Are Killing UShttp://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/- Performance Impact of CSS Selectorshttp://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors- Page Speed Familyhttp://code.google.com/speed/page-speed/docs/- Exceptional Performancehttp://developer.yahoo.com/performance/- JavaScript object structure: speed mattershttp://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html- Thinking Asynchttp://css-tricks.com/thinking-async/- jsPerf — JavaScript performance playgroundhttp://jsperf.comTRANSCRIPT
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
@lucascepeda WebcatBCN, 14/03/2012
● Código inline, caca● @import, caca● Debe ir en el <head>● Usar shorthand
CSS: Lo que ya tendrías que hacer
@lucascepeda WebcatBCN, 14/03/2012
● Combinar● Minimizar● Comprimir
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>
CSS: Combinar
@lucascepeda WebcatBCN, 14/03/2012
<head> <link rel="stylesheet" type="text/css" href="styles/combined.css"></head>
CSS: Minimizar
@lucascepeda WebcatBCN, 14/03/2012
/***** Multi-line comment before a new class name*****/.classname { /* comment in declaration block */ font-weight: normal;}
CSS: Minimizar
@lucascepeda WebcatBCN, 14/03/2012
.classname{font-weight:normal}
CSS: Combinar y minimizar
@lucascepeda WebcatBCN, 14/03/2012
YUI Compressor: http://developer.yahoo.com/yui/compressor/minify: http://code.google.com/p/minify/
CSS: Comprimir
@lucascepeda WebcatBCN, 14/03/2012
En servidor (apache, node.js, lighttp, IIS...)● gzip● zlib
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 }
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
@lucascepeda WebcatBCN, 14/03/2012
● IDs vs Clases● Selectores eficientes● OOCSS
CSS: Optimización prematura
@lucascepeda WebcatBCN, 14/03/2012
CSS: Optimización prematura
@lucascepeda WebcatBCN, 14/03/2012
CSS: Problemas conocidos
@lucascepeda WebcatBCN, 14/03/2012
● :hover en elementos distintos que <a>● border-radius en IE9● Expresiones en IE
JS: Lo que ya debes saber
@lucascepeda WebcatBCN, 14/03/2012
● Bloques <script> al final● Evitar document.write● eval es evil
JS: Lo que ya tendrías que hacer
@lucascepeda WebcatBCN, 14/03/2012
● Combinar● Minimizar● Comprimir
JS: Combinar
@lucascepeda WebcatBCN, 14/03/2012
JS: Lo que quizá no sepas
@lucascepeda WebcatBCN, 14/03/2012
● Smart Event Handler● Mantener la estructura de los objetos● Selectores
JS: Smart Event Handlers
@lucascepeda WebcatBCN, 14/03/2012
JS: Mantener estructura en objetos
@lucascepeda WebcatBCN, 14/03/2012
var universe = { answer: 42};// do something elseuniverse.panic = false;
JS: Mantener estructura en objetos
@lucascepeda WebcatBCN, 14/03/2012
var universe = { answer: 42, panic: true};// do something elseuniverse.panic = false;
JS: Mantener estructura en objetos
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/javascript-object-structure-speed-matters/2
JS: Selectores
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/id-vs-class-vs-tag-selectors/2
JS: Selectores (CSS3 not vs .not)
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/jquery-css3-not-vs-not
JS: Selectores (nativo vs liberías)
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/finding-an-element-w-jquery/6
JS: Loops
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/loops/29
JS: ??????
@lucascepeda WebcatBCN, 14/03/2012
Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)]
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]
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]
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}
JS: ternary operator vs alternatives
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/ternary-operators/3
JS: localStorage vs cookies
@lucascepeda WebcatBCN, 14/03/2012
http://jsperf.com/localstorage-vs-objects/19
Referencias CSS
@lucascepeda WebcatBCN, 14/03/2012
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
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.htmlhttp://css-tricks.com/thinking-async/http://jsperf.com
@lucascepeda WebcatBCN, 14/03/2012