High Performance JavaScript

HIGH PERFORMANCE JAVASCRIPT

by Mike Wilcox

Wednesday, September 3, 2014

WHAT NEEDS PERFORMANCE

Before tuning the JavaScript...

Page and Resource Loading

Libraries or Library Usage

Application Architecture

Memory Management

JavaScript

PAGE AND RESOURCE LOADING

Too many resources is very slow

Using requirejs in dev mode can mean 50 files

DNS lookup + only a few files load in parallel

The 50 jQuery plugin scripts is a no-no

Too few resources can be very slow

Not uncommon for web apps to have 3+ megabytes of code

Solution:

Load a main core file, enough to display the page, then lazy-load the rest, or as needed.

Solution:

Load a main core file, enough to display the page, then lazy-load the rest, or as needed.

Learn (much) more: http://www.slideshare.net/anm8tr/faster-websites-kill-kill-4402077

LIBRARIES

Use the right library

LIBRARIES

jQuery is easy not fast

LIBRARIES

Angular needs to load a lot of boilerplate and polyfills

LIBRARIES

Use the library the way it was intended

LIBRARIES

The Dojo fallacy was making “everything a widget”

LIBRARIES

Angular makes everything a component

LIBRARIES

Knockout templates can get slow

LIBRARIES

No library can be the right library

LIBRARIES

No library can be the right library

No overhead to download - write exactly what the app needsWednesday, September 3, 2014

APPLICATION ARCHITECTURE

Don’t parse everything at once

Don’t download all the data at once

Display *something* as soon as possible

Know the limits of:

The browser

Know the limits of:

The browser

Your users

Know the limits of:

The browser

Your users

Most of the time, creating nodes is faster than a big innerHTML

createTextNode can be many times faster than innerHTML

Create your widget in a fragment first, then add it to the page

Image resizing is extra work for the browser

Like in CSS, setting and getting sizes and positions, and scroll causes a reflow

addEventListener is not free

Add listeners to the parent and check the clicked node via event.target

Do NOT add a listener to hundreds of child nodes

Use as few stylesheets as reasonable

Keep them clean and maintained, so time is wasted downloading unused definitions

Don’t use JavaScript when it’s a job for CSS

Use element.style as little as possible

Set classNames (or better, use classList)

Use transitions or animations, not jQuery

Know what styles affect a page reflow and affect performance

Namely anything to do with sizes: setting as well as getting

MEMORY MANAGEMENT

Value Graph

Root Node Object Node

Scalar Node

How Garbage Collection Works

MEMORY MANAGEMENTObject is dereferenced, and it and its descendants are slated for GC

Value GraphWednesday, September 3, 2014

MEMORY MANAGEMENTHowever, if there is a reference to any object in the tree, it can’t be released

Value GraphWednesday, September 3, 2014

MEMORY MANAGEMENTValue graph example shown in code

var app = {! registry: {},! getWidget: function(id){! ! var widget = {};! ! this.registry[id] = widget;! ! return widget;! }};var widget = app.getWidget('mine');widget = null; // will not release

MEMORY MANAGEMENTValue graph example shown in code

var app = {! registry: {},! getWidget: function(id){! ! var widget = {};! ! this.registry[id] = widget;! ! return widget;! }};var widget = app.getWidget('mine');widget = null; // will not release

Moral: Clean up after yourself. Suggest a dispose(); method on the widget that removes itself from the registry

Before tuning the JavaScript...

WHEN TO OPTIMIZE

“Premature optimization is the root of all evil”

~ Donald Knuth

“Premature optimization is the root of all evil”

~ Donald Knuth

“Except when you should be planning ahead.”

~ Mike Wilcox

PLANNING AHEAD

Clean up after yourself

PLANNING AHEAD

Implement or use a widget life cycle system

PLANNING AHEAD

Unbind event listeners that aren't needed any more

PLANNING AHEAD

Careful with scope

PLANNING AHEAD

Careful with scope

Browsers are actually really good at GC

PLANNING AHEAD

Careful with scope

But know when you are capturing in your closures

PLANNING AHEAD

Careful with scope

Use JSHint in your IDE

PLANNING AHEAD

Careful with scope

Use JSHint in your IDE

It will warn against bad practices that can slow your code

DON’T WORRY

Maintainability trumps performance 98.6% of the time

DON’T WORRY

90% of the time, the only performance you'll need is rendering DOM

DON’T WORRY

Code that is async, or immediately after is not performance critical

DON’T WORRY

Size matters

DON’T WORRY

Size matters

A loop of 20 items will be fine in a forEach, suffering a few measly milliseconds

CRITICAL AREAS

Memory is always critical - it can give you the scrolling “janks”

CRITICAL AREAS

Template parsing; especially many widgets on page load

CRITICAL AREAS

Canvas rendering; especially animation

CRITICAL AREAS

Oft-triggered actions, like on page resize or mousemove

CRITICAL AREAS

Millions of items of grid data

CRITICAL AREAS

Millions of items of grid data

Just kidding. You should never do this.

JAVASCRIPT PERFORMANCE

Now you’re ready improve your...

AVOID EVAL

As well as new Function(...) or a string in setTimeout()

AVOID EVAL

Expensive operations as each time they are called, the script engine must convert source to executable code

AVOID EVAL

Has to be interpreted at runtime - #NOJIT

AVOID EVAL

Better:

AVOID EVAL

Better:

Use JSON

AVOID EVAL

Better:

Use JSON

Parse function with a predetermined convention

Slow:with (test.object) { foo = 'Value of foo property of object'; bar = 'Value of bar property of object';}

Faster:var myObj = test.object;myObj.foo = 'Value of foo property of object';myObj.bar = 'Value of bar property of object';

Hopefully you weren’t doing this...

AVOID WITH

Slow:with (test.object) { foo = 'Value of foo property of object'; bar = 'Value of bar property of object';}

Faster:var myObj = test.object;myObj.foo = 'Value of foo property of object';myObj.bar = 'Value of bar property of object';

Hopefully you weren’t doing this...

AVOID WITH

Slow: for (i = 0; i < object.length; i++) { try { // do something that throws an exception } catch (e) { // handle exception }}

Faster:try { for (i = 0; i < object.length; i++) { // do something }} catch (e) { // handle exception}

#NOJIT

TRY-CATCH

Slow: for (i = 0; i < object.length; i++) { try { // do something that throws an exception } catch (e) { // handle exception }}

Faster:try { for (i = 0; i < object.length; i++) { // do something }} catch (e) { // handle exception}

#NOJIT

TRY-CATCH

Slow:window.str = '';function globalScope() { for (var i=0; i < 100; i++) { str += i; }}

Faster:window.str = '';function localScope() { var tempstr = ''; for (var i=0; i < 100; i++) { tempstr += i; } str = tempstr;}

Slow lookup; Bad GC

AVOID GLOBAL SCOPE

Slow:window.str = '';function globalScope() { for (var i=0; i < 100; i++) { str += i; }}

Faster:window.str = '';function localScope() { var tempstr = ''; for (var i=0; i < 100; i++) { tempstr += i; } str = tempstr;}

Slow lookup; Bad GC

AVOID GLOBAL SCOPE

// always the same! Get the variable firstvar a = 0;for(var i = 0; i < array.length; i++){

a += Math.sin(1);}

// creating a new function every time #NOJITvar a = 0, b = [1,2,3];for(var i = 0; i < array.length; i++){

b.forEach(function(num){a += num;

Functions take time, creating them is worse

UNNECESSARY FUNCTIONS

a += Math.sin(1);}

// Problem: for large arrays, this can get slowvar items = [{id:'a'}, {id:'b'}, {id:'c'}];function getItemById(id){! for(var i = 0; i < items.length; i++){! ! if(items[i].id === id){! ! ! return items[i];! ! }! }}

// Solution: use a hash map insteadvar items = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};function getItemById(id){! return items[id];}

Unnecessary Array lookups

LIST VS MAPS

// Problem: for large arrays, this can get slowvar items = [{id:'a'}, {id:'b'}, {id:'c'}];function getItemById(id){! for(var i = 0; i < items.length; i++){! ! if(items[i].id === id){! ! ! return items[i];! ! }! }}

// Solution: use a hash map insteadvar items = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};function getItemById(id){! return items[id];}

Unnecessary Array lookups

LIST VS MAPS

Problem: you need an “ordered hash map”

LIST VS MAPS

// Solution: Why not use both?

LIST VS MAPS

// Solution: Why not use both?var

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);! itemMap[item.id] = item;

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);! itemMap[item.id] = item;}

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);! itemMap[item.id] = item;}function getItemByIndex(index){

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);! itemMap[item.id] = item;}function getItemByIndex(index){! return itemList[index];

LIST VS MAPS

// Solution: Why not use both?var! itemList = [{id:'a'}, {id:'b'}, {id:'c'}],! itemMap = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};!function addItem(item){! itemList.push(item);! itemMap[item.id] = item;}function getItemByIndex(index){! return itemList[index];}

LIST VS MAPS

function getItemById(id){

LIST VS MAPS

function getItemById(id){! return itemMap[id];

LIST VS MAPS

function getItemById(id){! return itemMap[id];}

LIST VS MAPS

// Could also get tricky:

LIST VS MAPS

// Could also get tricky: itemList.map = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};

LIST VS MAPS

// Could also get tricky: itemList.map = {a:{id:'a'}, b:{id:'b'}, c:{id:'c'}};

LIST VS MAPS

// Fastestfor(var i = 0; i < array.length; i++){

this.doThing(i); }

// Fast(ish)array.forEach(function(){

doThing(i); });

// Slowvar self = this;array.forEach(function(i){ self.doThing(i); });

// Slowestarray.forEach(function(i){ this.doThing(i); }, this);

Changing context on a function is costly

OBJECTS VS ARRAYS

http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/Wednesday, September 3, 2014

OBJECTS VS ARRAYS

Properties on objects are quite complex: they can be created with setters, and with differing enumerability and writability.

OBJECTS VS ARRAYS

Items in arrays aren’t able to be customized as heavily — they either exist or they don’t. At an engine level, this allows for more optimization.

OBJECTS VS ARRAYS

Items in arrays aren’t able to be customized as heavily — they either exist or they don’t. At an engine level, this allows for more optimization.

This is particularly beneficial when the array contains numbers. For example, when you need vectors, don’t define a class with properties x, y, z; use an array instead.

Memoryhttps://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

Loopshttp://jsperf.com/fastest-array-loops-in-javascript/32

http://jsperf.com/add-a-property-to-an-array/2http://jsperf.com/array-vs-uint32array

Functionshttp://jsperf.com/iifes-vs-nested-functions/2

Performancehttps://github.com/sq/JSIL/wiki/JavaScript-Performance-For-Madmen

https://gist.github.com/khoomeister/4985691 (make js faster)http://www.html5rocks.com/en/tutorials/speed/v8/

http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/http://developer.nokia.com/community/wiki/JavaScript_Performance_Best_Practices

http://code.mendhak.com/angular-performance/

Librarieshttp://xepler.com/blog/2014/03/19/the-good-the-bad-and-the-ugly-a-jquery-tale

References

High Performance JavaScript

Technology

Transcript of High Performance JavaScript

High Performance JavaScript 2011

JavaScript, Progressive Enhancement & Performance

CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google souders@cs.stanford.edu.

IPT High Performance Reactive Programming with JAVA 8 and JavaScript

High Performance JavaScript - jQuery Conference SF Bay Area 2010

JAVASCRIPT PERFORMANCE PATTERN - A Presentation

WebVK: JavaScript binding to Vulkan for High …onlinepresent.org/proceedings/vol146_2017/3.pdf · WebVK: JavaScript binding to Vulkan for High Performance Browser Running on Linux

Tech Headline - JavaScript Performance

Javascript Performance Tweaks

JavaScript Performance 20160723

High Performance JavaScript - WebDirections USA 2010

JavaScript performance patterns

JavaScript Performance (at SFJS)

V8: An Open-Source, High-Performance JavaScript Engine

Performance Optimization and JavaScript Best Practices

High Performance JavaScript (YUIConf 2010)

JavaScript Performance Tuning Secrets

Developing High Performance Websites and Modern Apps with JavaScript and HTML5

Performance optimisation in javascript

Javascript Performance Tricks