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/
42. Free-falling waterfalls
â˘âŻ Less DNS lookups â fetch
components from not more
than 2-4 domains
â˘âŻ Less redirects
â˘âŻ Blocking JavaScript
48. Step 2
â˘âŻ Add to the registry
Instead of:
  <script>alert('boo!');</script>Â
Do:
  <script>Â
    myapp.stuff.push(function(){Â
   alert('boo!');Â
    });Â
  </script>Â
49. Step 3
â˘âŻ Execute all
var l = myapp.stuff.length; Â
for(var i = 0, i < l; i++) {Â
  myapp.stuff[i]();Â
}Â
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?
73. Cleaning up after yourself
â˘âŻ Properties you no longer need
var myApp = {Â
  prop: hugeÂ
};Â
//Â ...Â
delete myApp.prop;Â
74. Cleaning up after yourself
â˘âŻ DOM elements you no longer
need
var el = $('mydiv');Â
el.parentNode.removeChild(el);Â
75. Cleaning up after yourself
â˘âŻ DOM elements you no longer
need
var el = $('mydiv');Â
delete el.parentNode.removeChild(el);Â
76. Init-time branching
â˘âŻ Instead ofâŚ
function myEvent(el, type, fn) {Â
  if (window.addEventListener) {Â
    el.addEventListener(type, fn, false);Â
  } else if (window.attachEvent) {Â
    el.attachEvent(quot;onquot; + type, fn);Â
  } else {âŚÂ
}Â
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();Â
});Â