high performance javascript (capitoljs 2011)

High Performance JavaScript

Nicholas C. Zakas | CapitolJS | September 18, 2011Nicholas C. Zakas | CapitolJS | September 18, 2011

Who's this guy?

Co-Creator csslint.net

Contributor,Creator of YUI

Author Lead Author Contributor Lead Author

Ex-tech leadYahoo!

@slicknet

(complaints: @voodootikigod)

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 applicationsSmall 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

It's still possible to write slow JavaScript

JavaScript performancedirectly

affects user experience

The UI Threadaka Browser Event Loop

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 execution

are added to a UI queueEach job must wait in line for its turn to execute

<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>

window.onload = function(){

document.getElementById("btn").onclick = function(){

//do something

</script>

Before Click

UI Thread

UI Queue

timetime

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

Draw down stateDraw down state

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick UI UpdateUI UpdateUI UpdateUI Update

Draw up stateDraw up state

No UI updates while JavaScript is executing

JavaScript May Cause UI Update

<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>

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 JavaScript

from running for too longEach 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

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>

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

<!doctype html>

<html>

<head>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Result

UI Thread

timetime

The more scripts to download in between UI

updates, the longer the page takes to render

JavaScriptJavaScript JavaScriptJavaScript

Technique #1: Load scripts dynamically

var script = document.createElement("script"),

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>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Using HTML <script>

UI Thread

timetime

<!doctype html>

<html>

<head>

</head>

<body>

<p>Hello world!</p>

var script = document.createElement("script"),

body = document.body;

script.type = "text/javascript";

script.src = "foo.js";

body.insertBefore(script, body.firstChild);

</script>

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

function loadScript(url, callback){

var script = document.createElement("script"), body = document.body;script.type = "text/javascript";

if (script.readyState){ //IE <= 8 script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } };} else { //Others script.onload = function(){ callback(); };}

script.src = url;body.insertBefore(script, body.firstChild);

loadScript("foo.js", function(){

alert("Loaded!");

Timing Note:Script execution begins

immediately after download and parse – timing of execution is not

guaranteed

Technique #2: Defer scripts

<!doctype html>

<html>

<head>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

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 #3: Asynchronous scripts

<!doctype html>

<html>

<head>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

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 is

slotted 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 500ms

setTimeout(function(){

//code to execute here

}, 500);

setTimeout() schedules a function to be added to the UI queue after a

function timedProcessArray(items, process, callback){

//create a clone of the original var todo = items.concat();

setTimeout(function(){

var start = +new Date();

process(todo.shift());

} while (todo.length > 0 &&

(+new Date() - start < 50));

if (todo.length > 0){

setTimeout(arguments.callee, 25);

} else {

callback(items);

}, 25);

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick

After 25ms

UI Thread

UI Queue

timetime

JavaScriptJavaScript

After 25ms

UI Thread

UI Queue

timetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript

After Another 25ms

UI Thread

UI Queue

timetime

After Another 25ms

UI Thread

UI Queue

timetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript JavaScriptJavaScript

Technique #2: Script Yielding

//delay a function until after UI updates are done

setImmediate(function(){

//code to execute here

setImmediate() adds code to the UI queue after pending UI updates are

finished

Support for Script Yielding

? ? ? 10 ?

msSetIntermediate()

function yieldingProcessArray(items, process, callback){

//create a clone of the original var todo = items.concat();

setImmediate(function(){

var start = +new Date();

process(todo.shift());

} while (todo.length > 0 &&

(+new Date() - start < 50));

if (todo.length > 0){

setImmediate(arguments.callee);

} else {

callback(items);

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

After Last UI Update

UI Thread

UI Queue

timetime

After Last UI Update

UI Thread

UI Queue

timetime

No Other UI Updates

UI Thread

UI Queue

timetime

No Other UI Updates

UI Thread

UI Queue

timetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick JavaScriptJavaScript JavaScriptJavaScript

Technique #3: Web Workers

Support for Web Workers

10 10.6

Web Workers• Asynchronous JavaScript execution• Execution happens outside the UI thread

– Doesn’t block UI updates• Data-Driven API

– Data is serialized going into and out of the worker

– No access to DOM or BOM– 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

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

When Clicked

UI Thread

UI Queue

timetime

onclickonclick

UI UpdateUI Update

Worker Thread

When Clicked

UI Thread

UI Queue

timetime

Worker Thread

Worker Thread Complete

UI Thread

UI Queue

timetime

onmessageonmessage

Worker Thread Complete

UI Thread

UI Queue

timetime

UI UpdateUI UpdateUI UpdateUI Update onclickonclick onmessageonmessage

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

• 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– Script Yielding (future)– Web Workers

Etcetera•My blog: www.nczonline.net•Twitter: @slicknet•These Slides: slideshare.net/nzakas•Hire us: projects@stubbornella.org

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 (capitoljs 2011)

Technology

javascript engine performance

javascript performance pattern - a presentation

tech headline - javascript performance

mastering javascript high performance - sample chapter

javascript performance tricks

performance em javascript

beyond domready: ultra high-performance javascript

javascript performance rocks samples

high-quality javascript code

javascript, progressive enhancement & performance

measuring javascript performance, javascript games

performance optimisation in javascript

javascript performance optimisation

high performance javascript (yuiconf 2010)

ipt high performance reactive programming with java 8 and...

modern javascript engine performance

high-performance javascript: why everything youve been...

performance in javascript

javascript performance tweaks

high performance javascript 2011