Performance patterns

Performance Patterns

Stoyan Stefanov
JSConfEU
Berlin, 2010
http://slideshare.net/stoyan/

Lies,
damn lies,
and performance advise

On the agenda
1.  Understanding the problem
2.  Some pointers/patterns

Moving targets
•  Browsers
•  Libraries

•  e.g. IE string concatenation

+= or array.join()
var res = '', var res = [],
count = 10000; count = 10000;
while (count--) { while (count--) {
res += 'a'; res.push('a');
} }

res = res.join('');

http://jsperf.com/join-concat/

“The Pen is mightier
than the Sword” *

* only if the Sword is very small
and the Pen very sharp

Commonly…
var start = new Date();
// ... go crazy ...
var took = new Date() – start;

But…
•  Releasing the thread?
•  Updating the page?
•  In-memory DOM
operations?

Better…
var start = new Date();
// ... go crazy ...
setTimeout(function () {
var took = new Date() – start;
}, 0);

Zero timeout
•  15 ms in IE
•  10 in FF, Safari
•  4 in Chrome

When benchmarking…
1.  Long enough operations
(much longer than 15ms)
2.  200 runs for statistical
significance
3.  Filtering outliers
4.  0-timeout end time

Results
•  Average
•  Median
•  Throw < 25% and >75%

Quarters

¼ ¼ ¼ ¼

Garbage Data Garbage

Benchmarks
•  No need to benchmark
browsers
•  Time values not important
•  Question is: given A and B,
which way to go? Really?
All the time?

JSPerf.com
•  Type in a form
•  Test, compare browsers
•  Community

Speeding Up
1.  Loading
2.  Running

Loading – the basics
•  Reducing the # scripts
•  Gzip
•  Minification
•  Expires
•  CDN

Loading asynchronously
•  Async === Good
•  Progress
•  Perception

JavaScript blocks

html
js
png

png

JavaScript at the bottom

html
png

png

js

Non-blocking JavaScript
•  defer and async
•  Defer: IE innovation, ok to
delay, but keep order
•  Async: HTML5, whatever
<script async src="my.js" onload="doIt()"></script>
<script defer src="my.js" onload="doIt()"></script>

defer and async timeline

async

defer

DOMContentLoaded
load

Non-blocking JavaScript
•  Asynchronous JavaScript
html
js

png

png

var js = document.createElement('script');
js.src = 'myscript.js';
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);

flush() early
html
png

js 
css

html

js
png
✔
css

flush()
<html>
<head>
<script src="my.js"
type="text/javascript"></script>
<link href="my.css"
type="text/css" rel="stylesheet" />
</head>

<?php flush() ?>
<body>
....

Progressive rendering
Chunk
#1

Chunk
#2

x.appendChild(script) Chunk
#3

<!doctype html>
<html>
<head><title>My App</title></head>
<body>
<div id="header">
<img src="logo.png" />
...
</div> 

... The full body of the page ...


<script src="all_20100925.js"></script>
</body>
</html>

Script injection patterns
document.getElementsByTagName("head")[0]
.appendChild(script);

document.documentElement.firstChild
.appendChild(script);

document.body.appendChild(script);

var first_script = document
.getElementsByTagName('script')[0];
first_script.parentNode
.insertBefore(script, first_script);

HTTP chunking: not only HTML
•  Google Instant
•  /*""*/ - delimited JSON
pieces, MXHR anyone?
•  Chunk #1 suggestions
•  Chunk #2 results

http://tinyurl.com/chunkview

Moar HTML5 attributes
•  ping="http://stats…"
•  prefetch="http://later…"

Preload sans execute
var preload;
if (/*@cc_on!@*/false) { // IE
preload = function (file) {
new Image().src = file;
};
} else {
preload = function (file) {
var obj = document.createElement('object'),
body = document.body;
obj.width = 0;
obj.height = 0;
obj.data = file;
body.appendChild(obj);
};
}

Runtime performance
1.  Going local
2.  Reusing
aka caching, aka DRY

Runtime performance
1.  Going local
2.  Reusing

Local variables

•  globals are all sorts of bad
•  use var
•  localize globals

Local variables
var a = 1;
(function (){
var a = 2;
function b(){
var a = 3;
alert(a);
}
b();
})(); // 3

Local variables
var a = 1;
(function (){
var a = 2;
function b(){
// var a = 3;
alert(a);
}
b();
})(); // 2

Local variables
var a = 1;
(function (){
// var a = 2;
function b(){
// var a = 3;
alert(a);
}
b();
})(); // 1

Local variables

•  less crawling up the scope
chain
•  helps minification

Localization
var mamodule = (function () {

window...
document...
otherModule...

}());

Localization
var mamodule = (function (g, d, om)
{

g... // global
d... // document reference
om... // another common module

}(this, document, otherModule));

Runtime performance
1.  Going local
2.  Reusing, aka caching

Init-time branching
•  Before…
function myEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
} else {...
}

Init-time branching
•  After…
if (window.addEventListener) {
var myEvent = function (el, type, fn) {
el.addEventListener(type, fn, false);
}
} else if (window.attachEvent) {
var myEvent = function (el, type, fn) {
el.attachEvent("on" + type, fn);
}
}

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];
}

Memoization – other options
•  in a closure
•  offline

Classical inheritance
•  Before…

var inherit = function (C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
};

Classical inheritance
•  After…

var inherit = (function () {
var F = function () {};
return function (C, P) {
F.prototype = P.prototype;
C.prototype = new F();
C.uber = P.prototype;
C.prototype.constructor = C;
}
}());
http://jsperf.com/holy-grail-classical-reuse

Regex loops
•  Before…

var i = 1000,
dude;

while (i--) {
dude = /[a-z]/.test('duderino');
};

Regex loops
•  After…

var i = 1000,
dude,
re = /[a-z]/;

while (i--) {
dude = re.test('duderino');
}

http://jsperf.com/regexp-loops

Cashing lengths in loops
•  before…

var a = [];

for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}

•  later…

var a = [],
i = 0;

for (; i < a.length; i += 1) {
console.log(a[i]);
}

•  after…

var a = [],
i = 0,
len = a.length;

for (; i < len; i += 1) {
console.log(a[i]);
}

•  alternatively…

var a = [],
i = a.length;

while (i--) {
console.log(a[i]);
}

DOM – case A
// bad
var count = 0;
for (; count < 15000; count += 1) {

document.getElementById('here').innerHTML += 'a';

}

// DOM access = (1 get + 1 set) * 15000

DOM – case B
// better
var count = 0, content = '';
for (; count < 15000; count += 1) {

content += 'a';

}
document.getElementById('here').innerHTML += content;

// DOM access: get + set

IE 6

IE 7

IE 8

Firefox 3

Firefox 3.5

Safari 3.2

Safari 4

Chrome 2

Chrome 3

Opera 9.64
How bad is A compared to B?

Opera 10

Proxy pattern
•  One object acts as an
interface to another

Words of Wisdom
•  Ask why? How?
•  Load quickly and async
•  Don’t touch the DOM
•  Go local

Thank you!

Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com

Performance patterns

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Performance patterns

Similar to Performance patterns (20)

More from Stoyan Stefanov

More from Stoyan Stefanov (20)

Recently uploaded

Recently uploaded (20)

Performance patterns