4. Importance of performance
• 500 ms slower = 20% drop in
traffic (Google)
• 400 ms slower = 5-9% drop in
full-page traffic (Yahoo!)
5. Importance of performance
• 500 ms slower = 20% drop in
traffic (Google)
• 400 ms slower = 5-9% drop in
full-page traffic (Yahoo!)
• 100 ms slower = 1% drop in
sales (Amazon)
9. On trade-offs
“…everything has its drawbacks,
as the man said when his
mother-in-law died, and they
came upon him for the funeral
expenses.”
Jerome K. Jerome
Three Man in a Boat
10. The Life of Page 2.0
HTML page
request onload settles request
sent
marriage? R.I.P.
conception birth graduation
User perceived
“onload” happens
somewhere here
38. Gzip or minification?
• 62,885 bytes - original jQuery (back in
Aug 2007)
• 31,822 - minified with the YUI
Compressor
• 19,758 - original gzipped
• 10,818 - minified and gzipped FTW
http://www.julienlecomte.net/blog/2007/08/13/
39. 204
• The world’s smallest component?
• 204 No Content
<?php
header(quot;HTTP/1.0 204 No Contentquot;);
// .... do your job, e.g. logging
?>
http://www.phpied.com/204-no-content/
45. Non-blocking JavaScript
• Include via DOM
html
js
png
png
var js = document.createElement('script');
js.src = 'myscript.js';
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);
61. GET vs. POST for XHR
var url = 'test.php';
var request = new XMLHttpRequest();
request.open(quot;POSTquot;, url, false);
// …
request.send('test=1');
68. Local variables
• less crawling up the scope chain
• localize
• function pointers too
• help YUI compressor (it won’t rename
globals)
Wait!
Isn’t that a
micro-optimization?
79. Memoization
• for expensive, repeating tasks
function myFunc(param){
if (!myFunc.cache) {
myFunc.cache = {};
}
if (!myFunc.cache[param]) {
var result = {}; // …
myFunc.cache[param] = result;
}
return myFunc.cache[param];
}
80. Threads
• Web Workers for modern browsers
var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) {
alert(quot;Called back by the worker!quot;);
};
https://developer.mozilla.org/en/Using_DOM_workers
81. Threads
• … or setTimeout() for the rest
1. Do a chunk of work
2. setTimeout(chunk, 1) and return/yield
82. Life after onload
1. Lazy-load ✔
2. Preload ✔
3. XHR ✔
4. JavaScript optimizations ✔
84. YUI3
• Lighter
less KB, modules, sub-modules
• Faster
opportunity to refactor
• A la carte modules
85. YUI3 a la carte
• Combo handler
http://yui.yahooapis.com/combo?oop‐min.js&event‐min.js
• Self-populating
YUI().use(“anim”, function(Y) {
var a = new Y.Anim({...});
a.run();
});