Cómo perder peso (en el navegador)
25
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus 1 de 25 01/04/2013 03:00 p.m.
Transcript of Cómo perder peso (en el navegador)
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
1 de 25 01/04/2013 03:00 p.m.
style
onclick
✎
✎
∞
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
2 de 25 01/04/2013 03:00 p.m.
<style>
<script>
<link>
src <script>
<head> ✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
3 de 25 01/04/2013 03:00 p.m.
<head>
<meta charset="UTF-8">
<title>Browser Diet</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<!-- JS -->
<script src="script.js"></script>
</body>
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
4 de 25 01/04/2013 03:00 p.m.
<p>Lorem ipsum dolor sit amet.</p>
<!-- My List -->
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><
<script src="example.js"></script>
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
5 de 25 01/04/2013 03:00 p.m.
<script async src="example.js"></script>
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
6 de 25 01/04/2013 03:00 p.m.
.center {
width: 960px;
margin: 0 auto;
}
/* --- Estructura --- */
.intro {
margin: 100px;
position: relative;
}
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
7 de 25 01/04/2013 03:00 p.m.
<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">
<link rel="stylesheet" href="main.css" media="all">
<link>
<link rel="stylesheet" href="style.css">
@import
<style>
@import url('style.css');
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
8 de 25 01/04/2013 03:00 p.m.
var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
✎
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
9 de 25 01/04/2013 03:00 p.m.
var arr = new Array(1000),
len, i;
for (i = 0; i < arr.length; i++) {
// Mal - arr.length necesita ser recalculada 1000 veces
}
for (i = 0, len = arr.length; i < len; i++) {
// Bien - arr.length es calculada sólo una vez y entonces es almacenada
}
NodeList
document.getElementsByTagName('a')
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
10 de 25 01/04/2013 03:00 p.m.
var links = document.getElementsByTagName('a'),
len, i;
for (i = 0; i < links.length; i++) {
// Mal - cada iteración la lista será recalculada para ver si hubo algún cambio
}
for (i = 0, len = links.length; i < len; i++) {
// Bien - el tamaño de la lista es obtenido y almacenado, y entonces comparado cada iteración
}
// Terrible: ejemplo de loop infinito
for (i = 0; i < links.length; i++) {
document.body.appendChild(document.createElement('a'));
// cada iteración la lista de links aumenta, haciendo quel loop nunca se termine
// esto no pasaría si el tamaño fuera almacenado y usado como una condición
}
document.write ✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
11 de 25 01/04/2013 03:00 p.m.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>'
document.write
window.onload
<span>foo</span>
<script>
window.onload = function() {
document.write('<span>bar</span>');
};
</script>
window.onload
<span>foo</span>
<script>
setTimeout(function() {
document.write('<span>bar</span>');
}, 1000);
window.onload = function() {
// ...
};
</script>
setTimeout window.onload
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
12 de 25 01/04/2013 03:00 p.m.
background-color
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = div.offsetWidth + 'px';
}
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
anchoAConfigurar = div.offsetWidth,
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = anchoAConfigurar + 'px';
}
style.width
offsetWidth
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
13 de 25 01/04/2013 03:00 p.m.
// fatal!
for (var i = 0; i < 100; i++) {
document.getElementById("mi-elemento").innerHTML += "<span>" + i + "</span>";
}
// mucho mejor :)
var miLista = "";
for (var i = 0; i < 100; i++) {
miLista += "<span>" + i + "</span>";
}
document.getElementById("mi-elemento").innerHTML = miLista;
✎
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
14 de 25 01/04/2013 03:00 p.m.
BrowserDiet.app = function() {
var foo = true;
return {
bar: function() {
// do something
}
};
};
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
✎
✎
∞
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
15 de 25 01/04/2013 03:00 p.m.
<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>
<script src="main.js"></script>
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
16 de 25 01/04/2013 03:00 p.m.
http://code.jquery.com/jquery-latest.js
<script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery.each for
for in
jQuery.each
for
length
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
17 de 25 01/04/2013 03:00 p.m.
for ( var i = 0, len = a.length; i < len; i++ ) {
e = a[i];
}
while for
attr()
$('a').on('click', function() {
console.log( $(this).attr('id') );
});
this
$('a').on('click', function() {
console.log( this.id );
});
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
18 de 25 01/04/2013 03:00 p.m.
.icon-foo {
background-image: url('mySprite.png');
background-position: -10px -10px;
}
.icon-bar {
background-image: url('mySprite.png');
background-position: -5px -5px;
}
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
19 de 25 01/04/2013 03:00 p.m.
.icon-foo {
background-image: url('foo.png');
}
.icon-foo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACne
}
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
20 de 25 01/04/2013 03:00 p.m.
width height
<img width="100" height="100" src="logo.jpg" alt="Logo">
✎
✎
∞
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
21 de 25 01/04/2013 03:00 p.m.
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
22 de 25 01/04/2013 03:00 p.m.
.htaccess
ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
home.js
home-v1.js
home-v2.js
home.js?v=1 home.js?v=2
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
23 de 25 01/04/2013 03:00 p.m.
.htaccess
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
✎
∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
24 de 25 01/04/2013 03:00 p.m.
● ●
✎∞
Cómo perder peso (en el navegador) http://browserdiet.com/es/#bonus
25 de 25 01/04/2013 03:00 p.m.
