JavaScript Need for Speed @ariyahidayat San Francisco, April 11, 2013 1 

whoami 2 

Performance Principles 3 

Secrets of High Performance Avoid slow code Write fast code 4 

Computer Programming as an Art, Knuth’s Turing Award lecture (1974) The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming. 5 

“The Big Rock” “First Things First”, Steven Covey 6 

Journey: The Quadrant http://ariya.ofilabs.com/2012/11/optimization-journey-vs-destination.html 7 

Under the Hood 8 

JavaScript Engines SpiderMonkey Firefox JavaScriptCore/Nitro Safari V8 Node.js, Chrome JScript/Chakra Internet Explorer Carakan Opera 9 

Building Blocks Virtual Machine/ Interpreter Parser Runtime Source Syntax Tree Built-in objects, host objects, ... 10 

var answer = 42 Parser keyword equal sign identifier number Variable Declaration Identifier Literal Constant Tokenization → Tokens Parsing → Syntax Tree 11 

Syntax Visualization http://esprima.org/demo/parse.html 12 

Execution in Interpreter Tree Visitor Traverse the syntax tree Run every syntax node Bytecode Interpreter Traverse and produce bytecodes Execute bytecodes in VM JIT Compiler Generate native machine codes Transfer the control to the codes 13 

Execution Steps http://toolness.github.io/slowmo-js/ 14 

Execution Visualization http://int3.github.io/metajs/ 15 

Tiered Execution Baseline Optimized Fast startup Minimal memory usage Decent execution speed Intensive initialization Potentially eat more memory Very fast execution button.onclick = function() { doSomething(); } for (i = 0; i < employees.length; ++i) total += employees[i].salary; 16 

Playing with V8 17 

Playing with V8 git clone git://github.com/v8/v8.git cd v8 make dependencies make x64.release -j4 make x64.debug -j4 18 

Performance Analysis 19 

http://ariya.ofilabs.com/2012/12/javascript-performance-analysis-sampling-tracing-and-timing.html Timing Prepare the stopwatch Mark the start and the end Sampling Periodically check which function is being executed Tracing Track all function calls and exits 20 

Stopwatch Measurement http://calendar.perfplanet.com/2010/bulletproof-javascript-benchmarks/ var start = Date.now(); for (var i = 0; i < 100; i++) { doSomething(); } console.log(Date.now() - start, 'ms'); 21 

Measurement Confidence Accuracy Precision 22 

Using Benchmark.js var suite = new Benchmark.Suite; suite.add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1; }) .on('complete', function() { console.log('Fastest is ' + this.filter('fastest').pluck('name')); }) .run(); http://benchmarkjs.com/ 23 

Loop-invariant Code Motion What you write Optimized by the engine for (var i = 0; i < 100; i++) { sum += Math.sqrt(2) * i; } var temp = Math.sqrt(2); for (var i = 0; i < 100; i++) { sum += temp * i; } Offset → Loss of accuracy 24 

Dead-Code Elimination http://blogs.msdn.com/b/ie/archive/2010/11/17/html5-and-real-world-site- performance-seventh-ie9-platform-preview-available-for-developers.aspx What you write Optimized by the engine function test() { var a = 0, b = 0; for (var i = 0; i < 100; i++) { a += i; b += i * i; } return a; } function test() { var a = 0; for (var i = 0; i < 100; i++) { a += i; } return a; } 25 

Run-Time Optimization 26 

What (Not)to Optimize Function Calls Garbage Collection Fixed Object Shape Profile-Guided 27 

Function Calls 28 

“Function Call is Expensive” sortDepartment totalDepartementExpense totalEmployeesSalaries getEmployeeData 29 

Automatic Inlining What you write Optimized by the engine function square(x) { return x * x; } function f(x) { var sum = 0; for (var i = 0; i < x; i++) { sum += square(i); } return sum; } function f(x) { var sum = 0; for (var i = 0; i < x; i++) { sum += i * i; } return sum; } http://ariya.ofilabs.com/2013/04/automatic-inlining-in-javascript-engines.html 30 

V8 Inlining Tracing http://floitsch.blogspot.com/2012/03/optimizing-for-v8-inlining.html d8 --trace-inlining example.js Did not inline InstantiateFunction called from Instantiate (target text too big). Did not inline Instantiate called from Instantiate (target not inlineable). Did not inline called from Instantiate (target not inlineable). Did not inline ConfigureTemplateInstance called from Instantiate (target not inlineable). Did not inline ToObject called from valueOf (target not inlineable). Did not inline FunctionSourceString called from toString (target not inlineable). Did not inline InstantiateFunction called from Instantiate (target text too big). Did not inline Instantiate called from Instantiate (target not inlineable). Did not inline ConfigureTemplateInstance called from Instantiate (target not inlineable). Inlined square called from f. Inlined square called from f. 31 

Deferred Parsing To further reduce the time to first executed instruction, Chakra processes and emits bytecode only for functions that are about to be executed using a mechanism called deferred parsing. http://blogs.msdn.com/b/ie/archive/2012/06/13/advances-in-javascript- performance-in-ie10-and-windows-8.aspx 32 

Code, Tree, Memory http://ariya.ofilabs.com/2012/07/lazy-parsing-in-javascript-engines.html function add(x, y) { return x + y; } function mul(x, y) { return x * y; } alert(add(40, 2)); { "type": "Program", "body": [ { "type": "FunctionDeclaration", "id": { "type": "Identifier", "name": "add" }, "params": [ { "type": "Identifier", "name": "x" }, { "type": "Identifier", "name": "y" } ], "defaults": [], "body": { "type": "BlockStatement", "body": [ { "type": "ReturnStatement", "argument": { "type": "BinaryExpression", "operator": "+", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" } } } ] }, "rest": null, "generator": false, "expression": false }, { "type": "FunctionDeclaration", "id": { "type": "Identifier", "name": "mul" }, "params": [ { "type": "Identifier", "name": "x" }, { "type": "Identifier", "name": "y" } ], "defaults": [], "body": { "type": "BlockStatement", "body": [ { "type": "ReturnStatement", "argument": { "type": "BinaryExpression", "operator": "*", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" } } } ] }, "rest": null, "generator": false, "expression": false }, { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "Identifier", "name": "alert" }, "arguments": [ { "type": "CallExpression", "callee": { "type": "Identifier", "name": "add" }, "arguments": [ { "type": "Literal", "value": 40, "raw": "40" }, { "type": "Literal", "value": 2, "raw": "2" } ] } ] } } ] } { "type": "FunctionDeclaration", "id": { "type": "Identifier", "name": "add" }, "params": [ { "type": "Identifier", "name": "x" }, { "type": "Identifier", "name": "y" } ] }; 33 

Deep Construction function add(x, y) { return x + y; } Declare a function called add. It accepts x and y as the arguments. It has one statement, a return statement. The return value is a binary operation + of x and y. function mul(x, y) { return x * y; } Declare a function called mul. It accepts x and y as the arguments. It has one statement, a return statement. The return value is a binary operation * of x and y. alert(add(40, 2)); Create a function call to alert. The argument is the result of function add with 40 and 2 as the arguments. 34 

Lazy Construction function add(x, y) { return x + y; } Declare a function call add with the function body “{ return x + y; }”. function mul(x, y) { return x * y; } Declare a function call mul with the function body “{ return x * y; }”. alert(add(40, 2)); Create a function call to alert. The argument is the result of function add with 40 and 2 as the arguments. Call function add. Hmm, it is not parsed yet. Call the real parser for “{ return x + y; }”. It accepts x and y as the arguments. The return value is a binary operation + of x and y. 35 

Fixed Object Shape 36 

Shape Transition function Vehicle() { this.color = 'white'; this.speed = 0; } var car = new Vehicle(); car.color = 'black'; color speed var motorbike = new Vehicle(); motorbike.wheels = ['front', 'back']; car.maker = 'BMW'; color speed maker color speed wheels 37 

Property Access console.log(car.color); Check if the object has the property ‘color’. If it is not found, check the property chain. Get the value of the property. Quiz: What if color does not exist? 38 

Faster Property Access Execute the generic property access color speed Shape check Get the value from property #1 console.log(car.color); 39 

“Freeze” the Shape http://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html var universe = { answer: 42 }; // do something else universe.panic = false; var universe = { answer: 42, panic: true }; // do something else universe.panic = false; Note: Monomorphic inline-cache reduces the impact 40 

Avoid Conditional Transition var vehicle = { color: 'blue' }; if (currentYear > 2014) vehicle.backupCamera = new Camera(); var vehicle = { color: 'blue', backupCamera: null }; if (currentYear > 2014) vehicle.backupCamera = new Camera(); 41 

Garbage Collector 42 

Minimize Object Construction http://www.youtube.com/watch?v=Vo72W1HWeFI var tick = new Date(); for (var i = 0, j = 0; i < 4e4; ++i) { var delta = new Date(); delta = delta - tick; tick = new Date(); j += delta; } var tick = Date.now(); for (var i = 0, j = 0; i < 4e4; ++i) { var delta = Date.now() - tick; tick = Date.now(); j += delta; } A lot of small Date objects 43 

V8 Garbage Collector Tracing d8 --trace-gc example.js new Date() Date.now() 56 ms: Scavenge 1.8 (36.0) -> 0.9 (36.0) MB, 2.8 ms 73 ms: Scavenge 1.8 (36.0) -> 0.9 (37.0) MB, 2.8 ms 89 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 1.0 ms 109 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 1.0 ms 126 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 0.9 ms 141 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 0.9 ms 159 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 0.9 ms 176 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 1.0 ms 192 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 0.9 ms 207 ms: Scavenge 1.9 (37.0) -> 0.9 (37.0) MB, 1.0 ms 54 ms: Scavenge 1.8 (36.0) -> 0.9 (36.0) MB, 2.9 ms 67 ms: Scavenge 1.8 (36.0) -> 0.9 (37.0) MB, 2.7 ms. 44 

Profile-Guided 45 

Classifier Task Array [1, 2, 3] Object { a: 1, b: 3 } Expression in brackets (x + y) Function function test() { } Identifier x Literal 42 ? 46 

Naive Classifier function parsePrimaryExpression() { if (match('[')) return parseArrayInitialiser(); if (match('{')) return parseObjectInitialiser(); if (match('(')) return parseBracketExpression(); if (matchKeyword('function')) return parseFunctionExpression() if (matchKeyword('this')) return createThisExpression(); if (match('/') || match('/=')) return createRegExpLiteral(); var token = lex(); if (token.type === Token.Identifier) return createIdentifier(token); if (token.type === Token.NullLiteral) return createNullLiteral(); if (token.type === Token.NumericLiteral) return createNumericLiteral(token); if (token.type === Token.StringLiteral) return createStringLiteral(token); if (token.type === Token.BooleanLiteral) return createBooleanLiteral(token); return throwUnexpected(token); } 47 

Input Distribution 54362 Identifier 10419 Keyword 8170 String 5820 Punctuator 5213 Numeric 1575 Boolean 909 Null 48 

Optimized Classifier function parsePrimaryExpression() { var token = lookahead(); if (token.type === Token.Identifier) return createIdentifier(token); if (token.type === Token.NumericLiteral) return createNumericLiteral(token); if (token.type === Token.StringLiteral) return createStringLiteral(token); if (matchKeyword('this')) return createThisExpression(); if (matchKeyword('function')) return parseFunctionExpression() if (token.type === Token.BooleanLiteral) return createBooleanLiteral(token); if (token.type === Token.NullLiteral) return createNullLiteral(); if (match('[')) return parseArrayInitialiser(); if (match('{')) return parseObjectInitialiser(); if (match('(')) return parseBracketExpression(); if (match('/') || match('/=')) return createRegExpLiteral(); return throwUnexpected(lex()); } 49 

Short Circuit http://ariya.ofilabs.com/2011/11/matching-a-decimal-digit.html function isDigit(ch) { return '0123456789'.indexOf(ch) >= 0; } function isDigit(ch) { return ch !==' ' && '0123456789'.indexOf(ch) >= 0; } Letters Digits Spaces 50 

Object in a Set http://ariya.ofilabs.com/2012/08/determining-objects-in-a-set-examples-in-javascript.html var valid_words = { 'foobar': true, 'bar': true, 'baz': true, 'quux': true }; function is_valid(word) { return valid_words.hasOwnProperty(word); } is_valid('fox'); // false Dictionary Spell checker Alternatives: array lookup, switch case, prefix/suffix tree, perfect hash 51 

Tiered Conditionals function is_valid(word) { switch (word.length) { case 3: return word === 'bar' || word === 'baz'; case 4: return word === 'quux'; case 6: return word === 'foobar'; } return false; } Filter #1: Length http://ariya.ofilabs.com/2012/08/determining-objects-in-a-set-examples-in-javascript.html 52 

Scalability 53 

Fast = Enough? Alice Bob Chuck Dan ... Bob Alice Dan Chuck ... Address Book Application Sort How’s the speed? 2 ms to sort 10 contacts 54 

The Code Array.prototype.swap = function (i, j) { var k = this[i]; this[i] = this[j]; this[j] = k; } function sort(list) { var items = list.slice(0), swapped = false, p, q; for (p = 1; p < items.length; ++p) { for (q = 0; q < items.length - p; ++q) { if (items[q + 1] < items[q]) { items.swap(q, q + 1); swapped =true; } } if (!swapped) break; } return items; } Bubble Sort ??? 55 

Function Instrumentation Array.prototype.swap = function (i, j) { var k = this[i]; this[i] = this[j]; this[j] = k; } Array.prototype.swap = function (i, j) { Log({ name: 'Array.prototype.swap', lineNumber: 1}); var k = this[i]; this[i] = this[j]; this[j] = k; } http://ariya.ofilabs.com/2012/01/scalable-web-apps-the-complexity-issue.html 56 

Run-time Analysis 0 250000 500000 0 500 1000 Calls to swap() Input Size http://ariya.ofilabs.com/2012/01/scalable-web-apps-the-complexity-issue.html 57 

Start-up Execution Tracking https://gist.github.com/1823129 jQuery Mobile startup log 4640 function calls jquery.js 26 jQuery jquery.js 103 init undefined, undefined, [object Object] jquery.js 274 each (Function) jquery.js 631 each [object Object], (Function), undefined jquery.js 495 isFunction [object Object] jquery.js 512 type [object Object] jquery.mobile.js 1857 [Anonymous] jquery.mobile.js 642 [Anonymous] jquery.mobile.js 624 enableMouseBindings jquery.mobile.js 620 disableTouchBindings http://ariya.ofilabs.com/2012/02/tracking-javascript-execution-during-startup.html 58 

Final Words 59 

Multi-dimensional Application revision Execution time Baseline 60 

http://www.trollquotes.org/5-gandalf-troll-quote/ 61 

Measure twice, cut once Under the hood: learn & explore Be advised of every best practice 62 

Thank You [email protected] @AriyaHidayat ariya.ofilabs.com Many artworks are from OpenClipArt speakerdeck.com/ariya 63 

More Stuff Vyacheslav Egorov http://mrale.ph/ Florian Loitsch http://floitsch.blogspot.com/ Andy Wingo http://wingolog.org/ http://blip.tv/jsconf/jsconf2012-andy-wingo-6139109 Michael Starzinger: The Footprint of Performance http://www.youtube.com/watch?v=ZhshEZIV2F4 Google I/O 2012 - Breaking the JavaScript Speed Limit with V8 http://www.youtube.com/watch?v=UJPdhx5zTaw 64