Easy website or how to put a browser on a diet
And what if you combine the professionals who worked on large web projects to create a comprehensive guide to optimizing front-end development?
And to get the result is not a boring instruction, but something more interesting? And if you call Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google ), and Sérgio Lopes (Caelum) to collect the best practices?
That is what we did! We will teach you to create fast sites.
- Zeno Rocha , project manager.
Is it really important how fast the site loads?
Sure! And do not say that it is not. So why are there still slow sites that leave an unpleasant residue on the soul of the user who visited them? Following the rules described here, you can make the site load faster. We will not dwell on the influence of the download speed of the WEB giants , let's get straight to the point!
')
HTML
25. Avoid using inline and nested code.
Connect CSS and JavaScript code in three simple ways:
- Inline : Code is written directly in the element tag. For CSS in the style attribute, and for JavaScript in the onclick attribute.
- Nested : CSS and JavaScript code are written in blocks
.
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import( ):
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,
, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .
<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .
<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .
<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .
<script src="example.js"></script>
, , HTML . . .
<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :
.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, .
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :
<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">
HTTP ( ).
<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:
<link rel="stylesheet" href="style.css">
@import():
@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++) { // , 1000 } 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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:
$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.
widthheight, .
<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , ..
:CSS , srcJavaScript.
, , HTTP , HTML . , . , . , . , , , .. HTTP .
CSS/JS HTML . ( )
. , . , .
24. ,, .
<head> <meta charset="UTF-8"> <title> </title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head>
, , .
, JavaScript , .. .<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body>
23. HTML
, , .<p>Lorem ipsum dolor sit amet.</p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
. c HTML .<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
, .
HTML Compressor :
BBC 77,054b 55,324b 28.2% CNet 86,492b 61,896b 28.4% FOX News 75,266b 64,221b 14.7% GameTrailers 112,199b 92,851b 17.2% Kotaku 134,938b 116,280b 13.8% National Post 75,006b 55,628b 25.8% SlashDot 158,137b 142,346b 10.0% StackOverflow 116,032b 100,478b 13.4%
22.
, , , , .<script src="example.js"></script>
, , HTML . . .<script async src="example.js"></script>
, , HTML . . , , .
CSS
21.
HTML , :.center { width: 960px; margin: 0 auto; } /* --- --- */ .intro { margin: 100px; position: relative; }
, ..center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Sass, Less, Stylus .., , .
20. CSS
, :<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">
HTTP ( ).<link rel="stylesheet" href="main.css" media="all">
CSS , .
.
19.link@import
.link:<link rel="stylesheet" href="style.css">@import():
@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++) { // , 1000 } 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.writedocument.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.writewindow.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 Sullivanbackground-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, . . . , , IDfind()children().
, ID , .. DOM:$("#foo");
JSPerf
9.foreach
JavaScript , jQuery.jQuery.eachJavaScript.
, .for injQuery.each.
, , .for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
,forwhile. . , .
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.widthheight, .<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=1home.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 , , -, . , , , , .
Source: https://habr.com/ru/post/178561/
All Articles