Achieving Performance Zen with YUI 3

Achieving
Performance Zen
with YUI 3

Ryan Grove
YUI Team

“Every 100ms delay costs 1% of sales.”
– Greg Linden, Amazon.com

The economics of web performance
are simple.

Users prefer fast websites.
Better user experience means more users.
More users means more money.

“Premature optimization is the root of all evil.”
– Lazy programmers

“Must go faster!”
– “Rock star” programmers

“Premature optimization is the root of all evil.”
– Lazy programmers

“There is no doubt that the grail of
efﬁciency leads to abuse. Programmers
waste enormous amounts of time thinking about, or
worrying about, the speed of noncritical parts of
their programs, and these attempts at efﬁciency
actually have a strong negative impact
when debugging and maintenance are considered.”
– Donald Knuth

“We should forget about small efﬁciencies, say
about 97% of the time: premature optimization is
the root of all evil.”
– Donald Knuth (cont’d)

“Yet we should not pass up our opportunities in
that critical 3%. A good programmer will not be
lulled into complacency by such reasoning, he will
be wise to look carefully at the critical
code; but only after that code has been identiﬁed.”
– Donald Knuth (cont’d)
http://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf

Too slow Just right! Not worth it

YUI 3 uses careful abstractions to provide the
best possible balance between user
efﬁciency and developer efﬁciency.

Sweet spot

Effort vs. gains

Low / High High / Low

In a single, highly modular library, we provide
support for all capable browsers, including
mobile browsers.

Capability based loading allows us to
deliver streamlined code to all browsers.
Mobile Safari shouldn’t have to suffer for
IE6’s sins.

As with any abstraction layer, it’s important to
understand what’s being abstracted.

Certain tradeoffs are made in order to increase
developer efficiency.
If you find that this impacts user efficiency,
you can shift the balance.

Seed bootstrap
<script src="http://yui.yahooapis.com/combo?3.2.0pr2/build/yui/yui-min.js"></
script>

<script>
YUI().use('node', function (Y) {

});
</script>

Seed + Loader bootstrap
<script src="http://yui.yahooapis.com/combo?3.2.0pr2/build/yui/yui-
min.js&3.2.0pr2/build/loader/loader-min.js"></script>

<script>

});
</script>

No bootstrap
min.js&3.2.0pr2/build/oop/oop-min.js&3.2.0pr2/build/dom/dom-
min.js&3.2.0pr2/build/event-custom/event-custom-base-min.js&3.2.0pr2/build/
event/event-base-min.js&3.2.0pr2/build/pluginhost/pluginhost-min.js&3.2.0pr2/
build/node/node-min.js&3.2.0pr2/build/event/event-delegate-min.js"></script>

<script>
YUI({bootstrap: false}).use('*', function (Y) {

});
</script>

Build-time concatenation
#!/usr/bin/env ruby
require 'open-uri'

ROOT = 'http://yui.yahooapis.com/combo?'
PATH = '3.2.0pr2/build/'

MODULES = [
'yui/yui-min.js',
'oop/oop-min.js',
'dom/dom-min.js',
'event-custom/event-custom-base-min.js',
'event/event-base-min.js',
'pluginhost/pluginhost-min.js',
'node/node-min.js',
'event/event-delegate-min.js'
]

open(ROOT + PATH + MODULES.join("&#{PATH}")) do |yui|
puts yui.read
end

$ ./yui-concat.rb > local-yui-min.js

Lazy bootstrap (use responsibly)
min.js&3.2.0pr2/build/loader/loader-min.js"></script>

<script>
window.onload = function () {

});
};
</script>

YUI uses native APIs when they’re available
and emulates them when they aren’t.

Selectors
Y.one('.foo');

Y.Node

Selectors
Y.one('.foo');

Y.Node Y.Selector

Selectors
Y.one('.foo');

Y.Node Y.Selector

Native?

Selectors
Y.one('.foo');

Y.Node Y.Selector

emulated
Native?
querySelector
No

Selectors
Y.one('.foo');

Y.Node Y.Selector

About 1.5x as fast

emulated native
Native?
querySelector querySelector
No Yes

JSON
Y.JSON.parse(jsonString);
Y.JSON.stringify(someObject);

JSON

Y.JSON

JSON

Y.JSON

Native?

JSON

Y.JSON

emulated
Native?
JSON
No

JSON

Y.JSON

Parse: about 22x as fast
Stringify: about 19x as fast

emulated
Native? native JSON
JSON
No Yes

Transitions
YUI().use('transition', function (Y) {
Y.one('#demo').transition({
duration: 1,
easing: 'ease-out',
height: '10px',
width: '10px',

// Per-property duration and easing.
opacity: {
value: 0,
duration: 2,
easing: 'ease-in'
}
}, function () {
Y.log('transition ﬁnished!');
});
});

opacity: {
value: 0,
duration: 2,
easing: 'ease-in'
}
}, function () {
});
});

Y.Transition

opacity: {
value: 0,
duration: 2,
easing: 'ease-in'
}
}, function () {
});
});

Y.Transition

Native?

opacity: {
value: 0,
duration: 2,
easing: 'ease-in'
}
}, function () {
});
});

Y.Transition

emulated
Native?
transitions
No

opacity: {
value: 0,
duration: 2,
easing: 'ease-in'
}
}, function () {
});
});

Y.Transition

About 32% less CPU

emulated native
Native?
transitions transitions
No Yes

Y.cached()
Provides simple function memoization.
Included in the YUI seed, so it’s always available.
var factorial = Y.cached(function (n) {
return (n === 0 || n === 1) ? 1 : n * factorial(n - 1);
});

Y.cached()
Provides simple function memoization.
Included in the YUI seed, so it’s always available.
var factorial = Y.cached(function (n) {
return (n === 0 || n === 1) ? 1 : n * factorial(n - 1);
});

factorial(150); // 150 function calls
factorial(150); // 1 function call
factorial(100); // 1 function call
factorial(160); // 11 function calls

Cache Utility
Provides a ﬁxed-size memory cache for
key/value pairs.
YUI().use('cache', function (Y) {
var cache = new Y.Cache({max: 10});

function expensive(n) {
var cachedResult = cache.retrieve('result' + n),
result;

if (cachedResult) {
return cachedResult.response;
}

result = 0;

while (result < n) {
result += 1;
}

cache.add('result' + n, result);
return result;
}
});

var cache = new Y.Cache({max: 10});

result;

if (cachedResult) {
}

result = 0;

result += 1;
}

return result;
}
});

expensive(10000000); // about 360ms
expensive(10000000); // <1ms

CacheOfﬂine Utility

Extends Cache to use localStorage.

var cache = new Y.CacheOffline({expires: 1800000}); // 30 minutes

result;

if (cachedResult) {
}

result = 0;

result += 1;
}

return result;
}
});

var cache = new Y.CacheOffline({expires: 1800000}); // 30 minutes

result;

if (cachedResult) {
}

result = 0;

result += 1;
}

return result;
}
});

expensive(10000000); // 1ms

result += 1;
}

return result;
}
});


New pageview


ImageLoader
<img id="img1">
<img id="img2">
<div style="height: 1000px"></div>
<img id="img3">

<script src="http://yui.yahooapis.com/combo?3.2.0pr2/build/yui/yui.js"></
script>

<script>
YUI().use('imageloader', function (Y) {
var foldGroup = new Y.ImgLoadGroup({foldDistance: 25});

foldGroup.registerImage({domId: 'img1', srcUrl: 'aardvark.jpg'});
foldGroup.registerImage({domId: 'img2', srcUrl: 'bumblebee.jpg'});
foldGroup.registerImage({domId: 'img3', srcUrl: 'cheetah.jpg'});
});
</script>

AsyncQueue
YUI().use('async-queue', function (Y) {
var q = new Y.AsyncQueue(function () {
// do something expensive
}, function () {
// do another expensive thing
}, function () {
// and another!
});

q.run();
});

AsyncQueue
}, function () {
}, function () {
// and another!
});

q.run();
});

Task 1 UI

AsyncQueue
}, function () {
}, function () {
// and another!
});

q.run();
});

Task 1 UI Task 2 UI

AsyncQueue
}, function () {
}, function () {
// and another!
});

q.run();
});

Task 1 UI Task 2 UI Task 3

Design code with performance in mind.

Always optimize when it’s easy.

Tackle harder optimizations if it will
measurably improve the user experience.

YUI Profiler
YUI().use('profiler', function (Y) {
Y.Profiler.registerObject('Assist', Y.Search.Assist.Util);

// ... after a bit of usage ...

console.log(Y.Profiler.getFullReport());
});

User efﬁciency is most important.

Developer efﬁciency is important, but less
so than user efﬁciency.

Developer efficiency is important, but less
so than user efficiency.
Efficiency for its own sake is least important.

Photo & illustration credits

• http://www.flickr.com/photos/josefeliciano/3849557951/
• http://www.flickr.com/photos/mgspiller/203376307/
• http://www.flickr.com/photos/formulaphoto/2625359503/
• http://www.flickr.com/photos/paulwoolrich/135550296/
• http://en.wikipedia.org/wiki/File:Dore-munchausen-illustration.jpg
• Laden Swallow by YUI’s own Allen Rabinovich
• http://www.flickr.com/photos/poetatum/3457696479/
• http://www.flickr.com/photos/dipthongasaurus_rex/3530738527/
• http://www.flickr.com/photos/vickisnature/2923728081/
• http://www.flickr.com/photos/80835774@N00/2380266276/
• http://www.flickr.com/photos/wwarby/4915969081/
• http://www.flickr.com/photos/euart/282104427/

Achieving Performance Zen with YUI 3

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Achieving Performance Zen with YUI 3 (20)

Recently uploaded (20)

Achieving Performance Zen with YUI 3

Editor's Notes