How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects...
Transcript of How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects...
![Page 1: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/1.jpg)
How DRY impacts JavaScript performance //Faster JavaScript execution for the lazy developer
Mathias Bynens – Velocity Europe, November 2011
![Page 2: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/2.jpg)
@mathias
![Page 3: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/3.jpg)
JavaScript & performance
Rule #1: nothing to do with JS
![Page 4: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/4.jpg)
JavaScript & performance
![Page 5: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/5.jpg)
JavaScript & performance
What about
the actual run-time performance
on the client side?
![Page 6: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/6.jpg)
DRYflic.kr/p/2ZGCT
![Page 7: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/7.jpg)
WETflic.kr/p/5Jnj7Q
![Page 8: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/8.jpg)
“DRY leads to readable, maintainable code”
![Page 9: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/9.jpg)
DRY JavaScript improves
performance…if you do it right
![Page 10: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/10.jpg)
So, where to avoid repetition?
![Page 11: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/11.jpg)
What’s slow in JavaScript?
![Page 12: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/12.jpg)
What’s slow in JavaScript?
1. The DOM
![Page 13: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/13.jpg)
What’s slow in JavaScript?
1. The DOM
2. Function calls
![Page 14: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/14.jpg)
What’s slow in JavaScript?
1. The DOM
2. Function calls
3. Lookups
![Page 15: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/15.jpg)
DOM manipulation// Create the element in memoryvar el = document.createElement('p');
// Insert the element into the DOMdocument.body.appendChild(el);
![Page 16: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/16.jpg)
DOM manipulation<body> … <div> <p></p> </div></body>
![Page 17: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/17.jpg)
DOM manipulationvar div = document.createElement('div'), p = document.createElement('p');
// Baddocument.body.appendChild(div);div.appendChild(p);
![Page 18: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/18.jpg)
DOM manipulationvar div = document.createElement('div'), p = document.createElement('p');
// Betterdiv.appendChild(p);document.body.appendChild(div);
![Page 19: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/19.jpg)
DOM manipulation<body> … <p></p> <p></p> <p></p> <p></p></body>
![Page 20: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/20.jpg)
DOM manipulationvar p = document.createElement('p'),
i = 4;
while (i--) { // Add four <p> elements
document.body.appendChild(p.cloneNode(false));
}
![Page 21: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/21.jpg)
DOM manipulationvar frag = document.createDocumentFragment(), p = document.createElement('p'), i = 4;
while (i--) { // Add four <p> elements frag.appendChild(p.cloneNode(false));}
document.body.appendChild(frag);
![Page 22: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/22.jpg)
Function calls// Function declaration
function foo(bar) {
return bar;
}
// Function call
foo('something');
![Page 23: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/23.jpg)
Function callsalert('foo');document.getElementById('foo');$('#foo');
![Page 24: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/24.jpg)
Function calls$('.foo').show();// other stuff…$('.foo').hide();
![Page 25: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/25.jpg)
Function callsvar $foo = $('.foo');$foo.show();// other stuff…$foo.hide();
![Page 26: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/26.jpg)
Function callsvar $foo = $('.foo').show();// other stuff…$foo.hide();
![Page 27: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/27.jpg)
Property lookupsvar obj = { 'x': 42, 'y': { 'foo': 'bar' }};
obj.x; // 42obj.y.foo; // 'bar'
![Page 28: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/28.jpg)
Property lookupsdocument.title
dojo.query(…)
YAHOO.util.Dom.get(…)
![Page 29: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/29.jpg)
Property lookupsvar foo = YAHOO.util.Dom.get('foo'), bar = YAHOO.util.Dom.get('bar'), baz = YAHOO.util.Dom.get('baz'), qux = YAHOO.util.Dom.get('qux');
![Page 30: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/30.jpg)
Property lookupsvar get = YAHOO.util.Dom.get, foo = get('foo'), bar = get('bar'), baz = get('baz'), qux = get('qux');
![Page 31: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/31.jpg)
Array item lookupsvar elems = document.getElementsByTagName('p'), length = elems.length;
while (length--) { if (elems[length].className == 'foo') { // do something with elems[length] elems[length].innerHTML = 'LOLWAT'; }}
![Page 32: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/32.jpg)
Array item lookupsvar elems = document.getElementsByTagName('p'), length = elems.length, elem;
while (length--) { elem = elems[length]; if (elem.className == 'foo') { // do something with elem elem.innerHTML = 'LOLWAT'; }}
![Page 33: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/33.jpg)
Scope lookupsvar foo = 42;foo; // no scope lookup
![Page 34: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/34.jpg)
Scope lookupsvar foo = 42;(function() { foo; // one scope lookup}());// IIFE – see http://mths.be/iife
![Page 35: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/35.jpg)
Scope lookupsvar foo = 42;(function() { (function() { foo; // two scope lookups }());}());
![Page 36: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/36.jpg)
Scope lookups
![Page 37: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/37.jpg)
Scope lookupsvar foo = 42;(function(foo) { (function(foo) { foo; // ZOMG, no scope lookups!!1 }(foo));}(foo));
![Page 38: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/38.jpg)
Scope lookups
![Page 39: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/39.jpg)
Scope lookups(function() { // every time you use `window` // or `document` here // that’s a scope lookup}());
![Page 40: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/40.jpg)
Scope lookups(function() { var doc = document, win = window; // lookup once, then cache}());
![Page 41: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/41.jpg)
Scope lookups(function(win, doc) { // use `win` and `doc` here // no scope lookups // no performance penalty!}(this, document));
![Page 42: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/42.jpg)
Recap: what’s slow in JavaScript?
![Page 43: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/43.jpg)
Recap: what’s slow in JavaScript?
1. The DOM
![Page 44: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/44.jpg)
Recap: what’s slow in JavaScript?
1. The DOM
2. Function calls
![Page 45: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/45.jpg)
Recap: what’s slow in JavaScript?
1. The DOM
2. Function calls
3. Lookups
![Page 46: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/46.jpg)
Especially when used inside…
![Page 47: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/47.jpg)
Especially when used inside…
• Loops
![Page 48: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/48.jpg)
Especially when used inside…
• Loops
• Intervals
![Page 49: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/49.jpg)
Especially when used inside…
• Loops
• Intervals
• Handlers for events that fire frequently
![Page 50: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/50.jpg)
It happens to the best!// Don’t do this:$(window).scroll(function() { $('.foo').something();});
![Page 51: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/51.jpg)
It happens to the best!// Don’t do this:$(window).scroll(function() { $('.foo').something();});
![Page 52: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/52.jpg)
It happens to the best!// Don’t do this:$(window).scroll(function() { $('.foo').something();});
// See http://mths.be/azs
![Page 53: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/53.jpg)
typeof performance != 'the whole story'
![Page 54: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/54.jpg)
tips & tricks(not really)
![Page 55: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/55.jpg)
New objectsvar obj = new Object();obj.x = 42;obj.y = 'foo';obj.z = false;
![Page 56: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/56.jpg)
New objectsvar obj = { 'x': 42, 'y': 'foo', 'z': false};
![Page 57: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/57.jpg)
New arraysvar arr = new Array();arr.push(42);arr.push('foo');arr.push(false);
![Page 58: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/58.jpg)
New arraysvar arr = [ 42, 'foo', false];
![Page 59: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/59.jpg)
Avoid switchswitch(foo) { case 'alpha': // do X break; case 'beta': // do Y break; default: // do Z break;}
![Page 60: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/60.jpg)
Avoid switchvar switchObj = { 'alpha': function() { // do X }, 'beta': function() { // do Y }, '_default': function() { // do Z }};(switchObj.hasOwnProperty(foo) && switchObj[foo] || switchObj._default)(args);
![Page 61: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/61.jpg)
Don’t use jQuery for everything$('.foo').click(function() { $(this).prop('id'); // same as this, before jQuery 1.6: // $(this).attr('id');
// also `href`, `checked`, `value`…});
![Page 62: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/62.jpg)
Don’t use jQuery for everything$('.foo').click(function() { this.id; this.href; this.checked; this.value; // etc.});
![Page 63: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/63.jpg)
jQuery document ready$(document).ready(function() { // teh coads});
![Page 64: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/64.jpg)
jQuery document ready$().ready(function() { // heh});
![Page 65: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/65.jpg)
jQuery document ready$.fn.ready(function() { // not pretty, but fastest solution});
![Page 66: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/66.jpg)
jQuery document ready$(function() { // moar sexy, but slower});
![Page 67: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/67.jpg)
jQuery document ready(function() { // move <script>s to the bottom // and just use an IIFE*}());
// * unless you use .appendChild() / .innerHTML on document.documentElement or document.body: http://mths.be/ieoa
![Page 68: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/68.jpg)
jQuery collection size$('.foo').size(); // NO.
![Page 69: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/69.jpg)
jQuery collection size// jQuery source:$.fn.size = function() { return this.length;};
// …so, just use:$('.foo').length;
![Page 70: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/70.jpg)
Use context$('#foo .bar').addClass('baz');$('#foo .qux').hide();$('#foo input').removeClass('wut');
![Page 71: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/71.jpg)
Use contextvar $foo = $('#foo');$('.bar', $foo).addClass('baz');$('.qux', $foo).hide();$('input', $foo).removeClass('wut');
![Page 72: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/72.jpg)
this.location = 'http://jsperf.com/'
![Page 73: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/73.jpg)
http://jsperf.com/browse/mathias-bynens
![Page 74: How DRY impacts JavaScript performance // Faster ...assets.en.oreilly.com/1/event/74/How DRY Affects JavaScript... · Faster JavaScript execution for the lazy developer Mathias Bynens](https://reader031.fdocuments.net/reader031/viewer/2022030407/5a8440d27f8b9afc5d8b816a/html5/thumbnails/74.jpg)
Questions?@mathias