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






DOM






DOM

CSS






DOM

CSS

Memory Management






DOM

CSS

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:









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


http://www.slideshare.net/anm8tr/faster-websites-kill-kill-4402077

http://www.slideshare.net/anm8tr/faster-websites-kill-kill-4402077

LIBRARIES


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:






Know the limits of:

The browser






Know the limits of:

The browser

Your users






Know the limits of:

The browser

Your users

You


DOM


DOM

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


DOM


createTextNode can be many times faster than innerHTML


DOM



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


DOM




Image resizing is extra work for the browser


DOM





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


DOM






addEventListener is not free


DOM







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


DOM







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

Do NOT add a listener to hundreds of child nodes


CSS


CSS

Use as few stylesheets as reasonable


CSS


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


CSS



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


CSS




Use element.style as little as possible


CSS





Set classNames (or better, use classList)


CSS






Use transitions or animations, not jQuery


CSS







Know what styles affect a page reflow and affect performance


CSS







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


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


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


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


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


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


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


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

THIS


OBJECTS VS ARRAYS

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

http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/


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


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

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

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

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

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

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

http://jsperf.com/array-vs-uint32array

http://jsperf.com/array-vs-uint32array

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

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

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

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

https://gist.github.com/khoomeister/4985691

https://gist.github.com/khoomeister/4985691

http://www.html5rocks.com/en/tutorials/speed/v8/

http://www.html5rocks.com/en/tutorials/speed/v8/



http://developer.nokia.com/community/wiki/JavaScript_Performance_Best_Practices

http://developer.nokia.com/community/wiki/JavaScript_Performance_Best_Practices



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

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

high performance javascript

Technology

handle exceptionnojitwednesday

handle exceptionfaster

intendedthe

clicked node

heavily theyeither

main core

wasteddownloading

application