):
@import url('style.css');
, , .
JavaScript
18.
, Youtube like/tweet.
, . : , firewall.
, ( Friendly iFrame)
var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
, .
17.
JavaScript. .
, , .
var arr = new Array(1000),
len, i;
for (i = 0; i < arr.length; i++) {
}
for (i = 0, len = arr.length; i < len; i++) {
}
JSPerf
: .
DOM, Node(NodeList), , , document.getElementsByTagName('a'). " ", .. .
var links = document.getElementsByTagName('a'),
len, i;
for (i = 0; i < links.length; i++) {
}
for (i = 0, len = links.length; i < len; i++) {
}
for (i = 0; i < links.length; i++) {
document.body.appendChild(document.createElement('a'));
}
16. document.write
document.write , .
, , , , JavaScript .
HTML5 Boilerplate, , jQuery Google .
<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>')</script>
: document.write window.onload, .
<span>foo</span>
<script>
window.onload = function() {
document.write('<span>bar</span>');
};
</script>
bar, foobar. , window.onload
, , .
<span>foo</span>
<script>
setTimeout(function() {
document.write('<span>bar</span>');
}, 1000);
window.onload = function() {
};
</script>
15.
, DOM, .
. Nicole Sullivan 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'),
widthToSet = div.offsetWidth,
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = widthToSet + 'px';
}
style.width, . , , .. . , , offsetWidth, , .
, , .
14. DOM
DOM, .
, . , JavaScript , DOM.
: , DOM. , :
for (var i = 0; i < 100; i++) {
document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
var myList = "";
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
document.getElementById("myList").innerHTML = myList;
JSPerf
13.
CSS HTML, .
:
BrowserDiet.app = function() {
var foo = true;
return {
bar: function() {
}
};
};
:
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
12. js
, CSS, HTTP , .
<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>
DOM? .
jQuery
11. jQuery
jQuery , .
jQuery, :
http://code.jquery.com/jquery-latest.js
. , .. . , .
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
: " " :P
10.
, jQuery, . . . , , ID find() children().
, ID , .. DOM:
$("#foo");
JSPerf
9. for each
JavaScript , jQuery. jQuery.each JavaScript.
, . for in jQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) {
e = a[i];
}
, for while . . , .
JSPerf
8. jQuery...
... :)
JavaScript jQuery.
attr() ID ?
$('a').on('click', function() {
console.log( $(this).attr('id') );
});
:
$('a').on('click', function() {
console.log( this.id );
});
.
JSPerf
7. CSS
.
CSS.
.icon-foo {
background-image: url('mySprite.png');
background-position: -10px -10px;
}
.icon-bar {
background-image: url('mySprite.png');
background-position: -5px -5px;
}
, HTTP .
, . , .
, , . . , .
6. Data URI
- CSS .
Data-URI , , . Data-URI .
:
.icon-foo {
background-image: url('foo.png');
}
:
.icon-foo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}
IE8 base64.
, . Data-URI , , . , CSS, . gzip , .. HTTP .
5.
width height , .
<img width="100" height="100" src="logo.jpg" alt="Logo">
, 700x700px 5050px.
, .
: ,
4.
Web . , JPEG Exif (, , .). PNG , . , .
. .
. . JPEG, ( 0 100). , . PNG , PNG-24 PNG-8.
JPEG . JPEG . ().
3.
- . - . , , . .
( , ). , , Apache, .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"
, , CSS JS 6 - . .
: , , . , . , timestamp. , home.js, home-v1.js, , home-v2.js ..
GET URL. , home.js?v=1 home.js?v=2, GET .
2. gzip
(HTML, CSS, JavaScript, JSON, XML ..). GZIP .
GZIP , " " . . GZIP.
. , Apache, .htaccess :
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
( !). .
1. -
, , YSlow PageSpeed. .
, WebPageTest, HTTP Archive PageSpeed.
, .
0.
, , :)
: , , . - , .
, .
\o/
-1.
/ http://browserdiet.com/.
25 , , -, . , , , , .