high performance javascript 2011

High Performance JavaScriptNicholas C. Zakas | @slicknetNicholas C. Zakas | @slicknet

Who's this guy?

Co-Creator csslint.net

Contributor,Creator of YUI Test

Author Lead Author Contributor Lead Author

@slicknet

Does JavaScript performance matter?

All browsers now haveoptimizing JavaScript engines

Tracemonkey/JaegarMonkey

(3.5+)

V8(all)

Nitro(4+)

Chakra (9+)

Karakan(10.5+)

http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html

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

New computers are generally faster butslow applications still exist

More CPU + more memory = less disciplined application development

Oh yeah, one more thing

http://jeftek.com/1942/motorola-xoom-sunspider-results/

It's still possible to write slow JavaScript

JavaScript performancedirectly

affects user experience

The UI ThreadThe brains of the operation

The browser UI thread is responsible forboth UI updates and JavaScript execution

Only one can happen at a time

Jobs for UI updates and JavaScript executionare added to a UI queue

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 Queuetimetime

When Clicked

UI Thread

UI Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

When Clicked

UI Thread

UI Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

Draw down stateDraw down state

When Clicked

UI Thread

UI Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

When Clicked

UI Thread

UI Queuetimetime

onclickonclick UI UpdateUI UpdateUI UpdateUI Update

Draw up stateDraw up state

No UI updates while JavaScript is executing

JavaScript May Cause UI Update


<script type="text/javascript">window.onload = function(){ document.getElementById("btn").onclick = function(){ 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

timetime

JavaScriptJavaScript UI UpdateUI UpdateUI UpdateUI Update

Unresponsive UI

UI Thread

timetime


The longer JavaScript runs,the worse the user experience

The runaway script timer prevents JavaScriptfrom running for too long

Each browser imposes its own limit (except Opera)

Internet Explorer

Firefox

Safari

Chrome

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

Does JIT compiling help?

Interpreted JavaScript

UI Thread

timetime

InterpretInterpret

JITed JavaScript (1st Run)

UI Thread

timetime

CompileCompile ExecuteExecute

JITed JavaScript (After 1st Run)

UI Thread

timetime

ExecuteExecute

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 TechniquesDon'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

timetime


Result

UI Thread

timetime

foo.jsfoo.js See ya!See ya!Hello world!Hello world!

Result

UI Thread

timetime

DownloadDownload See ya!See ya!Hello world!Hello world! ParseParse RunRun

The UI thread needs to wait for the script todownload, parse, and run before continuing

Result

UI Thread


Download time takes the longest and is variable

Variable Constant

Translation:The page doesn't render while

JavaScript is downloading, parsing, or executing during page load

<!doctype html><html><head> <title>Example</title></head><body> <script src="foo.js"></script> <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

timetime


The more scripts to download in between UIupdates, the longer the page takes to render

JavaScriptJavaScript JavaScriptJavaScript

Technique #1: Put scripts at the bottom

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

Put Scripts at Bottom

UI Thread

timetime

JavaScriptJavaScriptUI UpdateUI UpdateUI UpdateUI Update

Even if there are multiple scripts, the pagerenders quickly


Technique #2: Combine JavaScript files

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

UI Thread

timetime

JavaScriptJavaScriptUI UpdateUI Update

Each script has overhead of downloading


UI Thread

timetime

JavaScriptJavaScriptUI UpdateUI Update

Combining all of the files limits the networkoverhead and gets scripts onto the page faster

<!doctype html><html><head> <title>Example</title></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

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

Using HTML <script>

UI Thread

timetime


<!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script> var script = document.createElement("script"), body = document.body; script.type = "text/javascript"; script.src = "foo.js"; body.insertBefore(script, body.firstChild); </script> <p>See ya!</p></body></html>

Using Dynamic Scripts

UI Thread

timetime

DownloadDownload

See ya!See ya!Hello world!Hello world!

ParseParse

RunRun

Only code execution happens on the UI thread,which means less blocking of UI updates

UI UpdateUI 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

timetime

DownloadDownload


ParseParse

RunRun

Depending on time to download and script size,execution may happen before next UI update

UI UpdateUI Update

Technique #4: Defer scripts

<!doctype html><html><head> <title>Example</title></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

timetime

DownloadDownload


ParseParse

RunRun

Similar to dynamic script nodes, but with aguarantee that execution will happen last

More UIMore UI More UIMore 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> <title>Example</title></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 ??1010

Support for <script async>

Asynchronous scripts behave a lot like dynamic scripts

Using <script async>

UI Thread

timetime

DownloadDownload


ParseParse

RunRun

Download begins immediately and execution isslotted in at first available spot

UI UpdateUI Update

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

Runtime TechniquesWays 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();}

Technique #1: Timers

//create a new timer and delay by 500mssetTimeout(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 Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

When Clicked

UI Thread

UI Queuetimetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick

After 25ms

UI Thread

UI Queuetimetime


JavaScriptJavaScript

After 25ms

UI Thread

UI Queuetimetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript

After Another 25ms

UI Thread

UI Queuetimetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript


After Another 25ms

UI Thread

UI Queuetimetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript JavaScriptJavaScript

Technique #2: Web Workers

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 pagevar worker = new Worker("process.js");worker.onmessage = function(event){ useData(event.data);};worker.postMessage(values);

//in process.jsself.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 Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

When Clicked

UI Thread

UI Queuetimetime

onclickonclick

UI UpdateUI Update

UI UpdateUI Update

Worker Thread

When Clicked

UI Thread

UI Queuetimetime


Worker Thread


Worker Thread Complete

UI Thread

UI Queuetimetime


onmessageonmessage

Worker Thread Complete

UI Thread

UI Queuetimetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick onmessageonmessage

4.04.03.53.5 4.04.0 10.610.61010

Support for Web Workers

Repaint and ReflowHidden performance costs of common operations

Long UI updates=

Unresponsive UI

Unresponsive UI

UI Thread

timetime


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


<script type="text/javascript">window.onload = function(){ document.getElementById("btn").onclick = function(){ this.style.color = "#ff0"; };};</script> Repaint!Repaint!

A reflow occurs when a visual change requires a change in layout

Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style changelayout information retrieved

Reflow


<script type="text/javascript">window.onload = function(){ document.getElementById("btn").onclick = function(){ var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); };};</script> Reflow!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!Reflow x 10!

Limiting repaints/reflows improves overall performance

Technique #1Perform 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

DocumentFragmentvar 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 Reflow1 Reflow

Technique #2Group Style Changes

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

Repaint!Repaint! Reflow!Reflow!

Reflow!Reflow!

Repaint!Repaint!

.active { color: red; height: 100px; fontSize: 25px; background-color: white;}

element.className = "active";

Reflow!Reflow!

Grouping Style Changes

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

Reflow!Reflow!

Grouping Style Changes

Technique #3Avoid Accidental Reflow

element.width = "100px";

var width = element.offsetWidth;

Reflow!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

timetime

CompositingCompositing DrawingDrawing

timetime

Hardware Acceleration

UI Thread

PrepPrep

GPU

CompositingCompositing

Rendering info

WaitWait

DrawingDrawing

Signal complete

The browser UI thread is responsible forboth UI updates and JavaScript execution

Only one can happen at a time

Responsive UI

UI Thread

timetime


Unresponsive UI

UI Thread

timetime


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

Don't be horrible

Do be awesome

Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• These Slides: slideshare.net/nzakas• Hire us: [email protected]

Questions?

Creative Commons Images Used• http://www.flickr.com/photos/lrargerich/3115367361/

• 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/

• http://www.flickr.com/photos/goincase/3843348908/

high performance javascript 2011

Technology