Weitere ähnliche Inhalte Ähnlich wie Optimización JavaScript y CSS (20) Kürzlich hochgeladen (20) 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
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
21. JS: Lo que quizá no sepas
● Smart Event Handler
● Mantener la estructura de los objetos
● Selectores
@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
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
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
