High Performance JavaScript (YUIConf 2010)

High Performance JavaScript
Nicholas C. Zakas
Yahoo!, Inc.
YUIConf 2010 | November 9, 2010

Greetings, program
Principal Front End
Engineer
Contributor,
Creator of YUI Test
Author Lead Author Contributor Lead Author

Is he really going to use a Tron
theme throughout this
presentation?

JavaScript performance
directly
affects user experience

"Know the enemy and know yourself; in a hundred battles you
will never be in peril."
-Sun Tzu, The Art of War

The UI Thread
The brains of the operation

The browser UI thread is responsible for
both UI updates and JavaScript execution
Only one can happen at a time

Jobs for UI updates and JavaScript execution are
added to a UI queue if the UI thread is busy
Each job must wait in line for its turn to execute

<button id="btn" style="font-size: 30px; padding: 0.5em
1em">Click Me</button>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
//do something
};
};
</script>

Before Click
UI Thread
UI Queue
time

When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update

When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
Draw down state

When Clicked
UI Thread
UI Queue
time
onclick UI UpdateUI Update
Draw up state

No UI updates while JavaScript is
executing

JavaScript May Cause UI Update
var div = document.createElement(“div”);
div.className = “tip”;
div.innerHTML = “You clicked me!”;
document.body.appendChild(div);
};
};
</script>

A UI update must use the latest
info available

Long-running JavaScript
=
Unresponsive UI

Responsive UI
UI Thread
time
JavaScript UI UpdateUI Update

Unresponsive UI
UI Thread
time

The longer JavaScript runs,
the worse the user experience

The browser vendors know this and
put limits on JavaScript via the
runaway script timer

Runaway Script Timer Limits
• Internet Explorer: 5 million statements
• Firefox: 10 seconds
• Safari: 5 seconds
• Chrome: Unknown, hooks into normal crash
control mechanism
• Opera: none

Interpreted JavaScript
UI Thread
time
Interpret

JITed JavaScript (1st
Run)
UI Thread
time
Compile Execute

JITed JavaScript (After 1st
Run)
UI Thread
time
Execute

How Long Is Too Long?
“0.1 second [100ms] is about the limit for
having the user feel that the system is reacting
instantaneously, meaning that no special
feedback is necessary except to display the
result.”
- Jakob Nielsen

Translation:
No single JavaScript job should
execute for more than 100ms to
ensure a responsive UI

Recommendation:
Limit JavaScript execution to no more
than 50ms
measured on IE6 :)

Loadtime Techniques
Don't let JavaScript interfere with page load performance

During page load, JavaScript
takes more time on the UI thread

<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="foo.js"></script>
<p>See ya!</p>
</body>
</html>

Result
UI Thread
time

Result
UI Thread
time
foo.js See ya!Hello world!

Result
UI Thread
time
Download See ya!Hello world! Parse Run
The UI thread needs to wait for the script to
download, parse, and run before continuing

Result
UI Thread
Download time takes the longest and is variable
Variable Constant
UI Thread

Translation:
The page doesn't render while
JavaScript is downloading, parsing, or
executing during page load

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<script src="bar.js"></script>
<p>See ya!</p>
<script src="baz.js"></script>
<p>Uh oh!</p>
</body>
</html>

Result
UI Thread
time
The more scripts to download in between UI
updates, the longer the page takes to render
JavaScript JavaScript

Technique #1: Put scripts at the
bottom

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<p>See ya!</p>
</body>
</html>

Put Scripts at Bottom
UI Thread
time
JavaScriptUI UpdateUI Update
Even if there are multiple scripts, the page
renders quickly

Technique #2: Combine
JavaScript files

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<p>See ya!</p>
<script src="bar.js"></script>
<script src="baz.js"></script>
</body>
</html>

UI Thread
time
JavaScriptUI Update
Each script has overhead of downloading

UI Thread
time
JavaScriptUI Update
Combining all of the files limits the network
overhead and gets scripts onto the page faster

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<p>See ya!</p>
<script src="foo-and-bar-and-baz.js"></script>
</body>
</html>

Technique #3: Load scripts
dynamically

var script = document.createElement("script"),
body;
script.type = "text/javascript";
script.src = "foo.js";
body.insertBefore(script, body.firstChild);
Basic Technique
Dynamically loaded scripts are non-blocking

Downloads no longer block the
UI thread

Using HTML <script>
UI Thread
time

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<script>
body = document.body;
script.src = "foo.js";
</script>
<p>See ya!</p>
</body>
</html>

Using Dynamic Scripts
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Only code execution happens on the UI thread,
which means less blocking of UI updates
UI Update

loadScript("foo.js", function(){
alert("Loaded!");
});
Usage

Timing Note:
Script execution begins immediately
after download and parse – timing of
execution is not guaranteed

Using Dynamic Scripts
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Depending on time to download and script size,
execution may happen before next UI update
UI Update

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<script defer src="foo.js"></script>
<p>See ya!</p>

</body>
</html>

7.07.03.53.5 5.05.0 ??4.04.0
Support for <script defer>

Deferred scripts begin to
download immediately,
but don't execute until all UI
updates complete

Using <script defer>
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Similar to dynamic script nodes, but with a
guarantee that execution will happen last
More UI More UI

Timing Note:
Although scripts always execute after
UI updates complete, the order of
multiple <script defer> scripts is not
guaranteed across browsers

Technique #5: Asynchronous
scripts

<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<script async src="foo.js"></script>
<p>See ya!</p>

</body>
</html>

7.07.03.63.6 5.05.0 ????
Support for <script async>

Asynchronous scripts behave a
lot like dynamic scripts

Using <script async>
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Download begins immediately and execution is
slotted in at first available spot
UI Update

Note:
Order of execution is explicitly not
preserved for asynchronous scripts

Runtime Techniques
Ways to ensure JavaScript doesn't run away

function processArray(items, process, callback){
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
callback();
}

//create a new timer and delay by 500ms
setTimeout(function(){
//code to execute here
}, 500)
setTimeout() schedules a function to be
added to the UI queue after a delay

When Clicked
UI Thread
UI Queue
time
UI UpdateUI Update onclick

After 25ms
UI Thread
UI Queue
time
JavaScript

After 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript

After Another 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript
JavaScript

After Another 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript JavaScript

Web Workers
●
Asynchronous JavaScript execution
●
Execution happens outside of UI thread
●
Not on the UI thread = no UI delays
●
Data-driven API
●
Data is serialized when sending data into or
out of Worker
●
No access to DOM, BOM
●
Completely separate execution environment

//in page
var worker = new Worker("process.js");
worker.onmessage = function(event){
useData(event.data);
};
worker.postMessage(values);
//in process.js
self.onmessage = function(event){
var items = event.data;
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
self.postMessage(items);
};

When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
Worker Thread

When Clicked
UI Thread
UI Queue
time
Worker Thread
JavaScript

Worker Thread Complete
UI Thread
UI Queue
time
onmessage

Worker Thread Complete
UI Thread
UI Queue
time
UI UpdateUI Update onclick onmessage

4.04.03.53.5 4.04.0 10.610.6??
Support for Web Workers

Repaint and Reflow
Hidden performance costs of common operations

Long UI updates
=
Unresponsive UI

JavaScript can cause
long UI updates by triggering
repaint and reflow

A repaint occurs when a visual change doesn't
require recalculation of layout
Changes to visibility, colors (text/background), background images, etc.

Repaint
this.style.color = "#ff0";
};
};
</script> Repaint!

A reflow occurs when a visual change
requires a change in layout
Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change
layout information retrieved

Reflow
var div = document.createElement(“div”);
div.className = “tip”;
div.innerHTML = “You clicked me!”;
document.body.appendChild(div);
};
};
</script>
Reflow!

Repaints and reflows are queued
up as JavaScript executes
and then executed in order

Reflow
var list = document.getElementsByClassName("items")[0],
i, item;
for (i=0; i < 10; i++){
item = document.createElement("li");
item.innerHTML = "Item #" + i;
list.appendChild(item);
}
Reflow x 10!

Limiting repaints/reflows
improves overall performance

Technique #1
Perform DOM manipulations
off-document

Off-Document Operations
• Fast because there's no repaint/reflow
• Techniques:
– Remove element from the document, make
changes, insert back into document
– Set element's display to “none”, make
changes, set display back to default
– Build up DOM changes on a
DocumentFragment then apply all at once

DocumentFragment
• A document-like object
• Not visually represented
• Considered to be owned by the document from
which it was created
• When passed to appendChild(), appends all
of its children rather than itself

DocumentFragment
var list = document.getElementsByClassName("items")[0],
fragment = document.createDocumentFragment(),
i, item;
for (i=0; i < 10; i++){
item = document.createElement("li");
item.innerHTML = "Item #" + i;
fragment.appendChild(item);
}
list.appendChild(fragment);
1 Reflow

Technique #2
Group Style Changes

element.style.color = "red";
element.style.height = "100px";
element.style.fontSize = "25px";
element.style.backgroundColor = "white";
Repaint! Reflow!
Reflow!
Repaint!

.active {
color: red;
height: 100px;
fontSize: 25px;
background-color: white;
}
element.className = "active";
Reflow!
Grouping Style Changes

var item = document.getElementById("myItem");
item.style.cssText = "color:red;height:100px;" +
"font-size:25px;background-color: white");
Reflow!
Grouping Style Changes

Technique #3
Avoid Accidental Reflow

element.width = "100px";
var width = element.offsetWidth;
Reflow!
Accidental Reflow

What to do?
• Minimize access to layout information
– offsetTop, offsetLeft, offsetWidth, offsetHeight
– scrollTop, scrollLeft, scrollWidth, scrollHeight
– clientTop, clientLeft, clientWidth, clientHeight
– Most computed styles
• If a value is used more than once, store in
local variable

Does hardware acceleration
help?

Traditional Rendering
UI Thread
time
Compositing Drawing

Hardware Acceleration
UI Thread
timetime
Prep
GPU
Compositing
Rendering info
Wait
Drawing
Signal complete

Does JavaScript performance
matter?

After all, all browsers now have
optimizing JavaScript engines
Tracemonkey/
JaegarMonkey
(3.5+)
V8
(all)
Squirrelfish
(4+)
Chakra
(9+)
Karakan
(10.5+)

So our scripts are getting really,
really fast

Old computers ran slow applications
Small amounts of CPU power and memory

New computers are generally faster but
slow applications still exist
More CPU + more memory = less disciplined application development

It's still possible to write slow
JavaScript on the new, faster
JavaScript engines

Avoid Slow Loading JavaScript
• Put scripts at the bottom
• Concatenate scripts into as few files as
possible
• Choose the right way to load your scripts
– Dynamically created scripts
– Deferred scripts
– Asynchronous scripts

Avoid Slow JavaScript
• Don't allow JavaScript to execute for more
than 50ms
• Break up long JavaScript processes using:
– Timers
– Web Workers

Avoid Long UI Updates
• Be careful of repaint and reflow
• Perform complex DOM operations off-
document
– Remove elements and re-add them
– Use DocumentFragment objects
• Group style changes together
• Avoid accidental reflow

Etcetera
• My blog:
www.nczonline.net
• Twitter:
@slicknet
• These Slides:
http://slideshare.net/nzakas/
• Rate Me:
http://spkr8.com/t/5000

Creative Commons Images Used
• http://www.flickr.com/photos/hippie/2406411610/
• http://www.flickr.com/photos/55733754@N00/3325000738/
• http://www.flickr.com/photos/eurleif/255241547/
• http://www.flickr.com/photos/off_the_wall/3444915939/
• http://www.flickr.com/photos/wwarby/3296379139/
• http://www.flickr.com/photos/derekgavey/4358797365/
• http://www.flickr.com/photos/mulad/286641998/
• http://www.flickr.com/photos/torley/2361164281/
• http://www.flickr.com/photos/ottoman42/455242/

High Performance JavaScript (YUIConf 2010)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to High Performance JavaScript (YUIConf 2010)

Similar to High Performance JavaScript (YUIConf 2010) (20)

More from Nicholas Zakas

More from Nicholas Zakas (17)

Recently uploaded

Recently uploaded (20)

High Performance JavaScript (YUIConf 2010)