Web Applications HTML5 Games Windows 8 HTML Apps Basic Web Pages JavaScript Execution Speed DOM Interactions Accelerated Graphics Page Load Time

Bubbles setInterval(animate, 1000/60) bs[i] = new Bubble(0, 1); for (var i = 0; i < 1000; i++) { bs[i].move(); for (var j = 0; j < i + 1; j++) { Bubbles.collide(bs[i], bs[j]); } var distance2 = (b1.x–b2.x)*(b1.x–b2.x)+(b1.x–b2.x)*(b1.x–b2.x); var magnitude = (dvx * dx + dvy * dy) / d2; this.elem.style.left = this.x + "px"; this.elem.style.top = this.y + "px"; this.canvas.getContext("2d").putImageData(canvasImageData, 0, 0); setInterval(animate, 1000/60) bs[i] = new Bubble(0, 1); for (var i = 0; i < 1000; i++) { bs[i].move(); for (var j = 0; j < i + 1; j++) { Bubbles.collide(bs[i], bs[j]); } } var distance2 = (b1.x–b2.x)*(b1.x–b2.x)+(b1.x–b2.x)*(b1.x–b2.x); var magnitude = (dvx * dx + dvy * dy) / d2; this.elem.style.left = this.x + "px"; this.elem.style.top = this.y + "px"; this.canvas.getContext("2d").putImageData(canvasImageData, 0, 0);

Networking HTML CSS Collections JavaScript Marshalling DOM Formatting Block Building Layout Rendering Is JavaScript your bottleneck?

Chakra Your Code Other Subsystems

JavaScript DOM for (var i = 0; i < this.nOfBubbles; i++) { document.body.box.getElementById("ball0").style.left = b.x + "px"; document.body.box.getElementById("ball0").style.top = b.y + "px"; }

this.nOfBubbles = document.getElementById(“dropDown").value; 30% of rendering time in string conversion Slow Operations 11% Value Conversions 18% GC 17% Your Code 45%

this.nOfBubbles = document.getElementById(“dropDown").value; “128”128

GC 28% Your Code 64%

FlexibilityPerformance “Think C++”“Think Script” Simple WebsitesComplex Apps, Games var r = 3 * "10"; // r == 300 var a = new Array(); a.push(10); var p = {x: 0, y: 0}; p.z = 5; p["some text"] = 1; p[1] = 2; eval("var s = p[1] * a[0]"); // s == 20 var r = 3 * parseInt("10"); var a = new Array(100); a[0] = 10; var p = new Point(0, 0, 0); p.z = 5;

Core #1 Foreground Core #1 Foreground Interpreter Byte Code AST Parser Source Code Core #2 Background Core #2 Background Native Code Background Compiler

Slow Property Access 41%

var base = { color: "red" }; base.x = 10; base["any string"] = 0; for (var p in base) {...} function Bubble() {...} Bubble.prototype = base; var b = new Bubble(); var c = b.color; // c == "red“ b.y = 20; var x = b.x; // x == 10 delete base.x; var u = b.x; // u == undefined property bags, no classes add properties on the fly class-like pattern prototypal inheritance even remove properties enumerate properties use as dictionaries but still just property bags

b1.typeb2.type Bubble “x” “y” Bubble “x” Bubble b b1 function Bubble(x, y) { this.x = x; this.y = y; } var b1 = new Bubble(0, 1); var b2 = new Bubble(10, 11);

b1.typeb2.type Bubble “x” “y” “c” Bubble “x” “y” Bubble “x” Bubble “red” b2 0 1 b1 function Bubble(x, y) { this.x = x; this.y = y; } var b1 = new Bubble(0, 1); var b2 = new Bubble(10, 11); b2.c = "red";

function Point() { this.x = 0; this.y = 0; } var p1 = new Point(); p1.prop01 = 1;... p1.prop99 = 99; b1.type = fast-type({x,y}) too many properties? b1.type = slow-property-bag

function Point() { this.x = 0; this.y = 0; } var p1 = new Point(); delete p1.y; b1.y = undefined; b1.type = fast-type({x,y}) deleting properties? b1.type = slow-property-bag b1.type == fast-type({x,y})

function Point() { this.x = 0; this.y = 0; } var p1 = new Point(); p1["some text"] = 1; b1.type = fast-type({x,y}) non-identifier properties? b1.type = slow-property-bag

function Bubble(x, y) { Object.defineProperty(this, "x", { get : function() { return x; }, set : function(value) { x = value; }, }); Object.defineProperty(this, "y", { get : function() { return y; }, set : function(value) { y = value; }, }); } var b = new Bubble(0, 1); var x = b.x; b.y = 5; getters & setters? b.type = slow-property-bag

function Color(alpha) { this.r = 0; this.g = 0; this.b = 0; if (alpha) { this.a = 0; } var c1 = new Color(true); var c2 = new Color(false); c1.type = {r,g,b,a} c2.type = {r,g,b}

function TreeNode(key, value) { this.key = key; this.value = value; }; TreeNode.prototype.left = null; TreeNode.prototype.right = null; var t1 = new TreeNode("k1", "v1"); var t2 = new TreeNode("k2", "v2"); var t3 = new TreeNode("k3", "v3"); t1.left = t2; t2.right = t3;

class Bubble { public int x; public int y; } class Program { static void Reset(Bubble b) { b.x = 0; b.y = 0; } mov edx, 0 mov eax, [p] mov [p+4], edx

function Bubble(x, y) { this.x = x; this.y = y; } function Bubble.prototype.reset() { this.x = 0; this.y = 0; } mov eax, 0x mov ebx, [this] mov ecx, [this.type] cmp ecx, [ic.type] jne $callSetProperty mov ecx, [this.propArray] mov edx, [ic.index] mov [p.propArray[ic.index]], eax // 100s of assembly instructions engine.LookUpProperty(this, x) engine.SetProperty(this, x, 0) inline cache

function Bubble(x, y) {...} function Bubble.prototype.reset() { this.x = 0; this.y = 0; } var b1 = new Bubble(0, 1); var b2 = new Bubble(10, 11); for (var i = 0; i < 1000; i++) { bubbles[i].reset(); } inline cache mov eax, 0x mov ebx, [this] mov ecx, [this.type] cmp ecx, [ic.type] jne $callSlowSetProperty mov ecx, [this.propArray] mov edx, [ic.index] mov [p.propArray[ic.index]], eax b1.type = “{x,y}” b2.type = “{x,y}” b1.type = “{x,y}” b2.type = “{x,y}”

function Bubble(x, y) {...} function Bubble.prototype.reset() { this.x = 0; this.y = 0; } var b1 = new Bubble(0, 1); var b2 = new Bubble(10, 11); b2.c = "red"; for (var i = 0; i < 1000; i++) { bubbles[i].reset(); } inline cache mov eax, 0x mov ebx, [this] mov ecx, [this.type] cmp ecx, [ic.type] jne $callSlowSetProperty mov ecx, [this.propArray] mov edx, [ic.index] mov [p.propArray[ic.index]], eax b1.type = “{x,y}” b2.type = “{x,y,c}” b1.type = “{x,y}” b2.type = “{x,y,c}”

Garbage Collection 25%

function doMath(a, b, c, d) { return a * b + c * d; } var a = 3; var b = "10"; var c = new Date(); var d = {valueOf: function() { return 5; }} var r = doMath(a, b, c, d); r == Flexible? YesFast? No

var a = 3; a = 2.5; a = "text"; a = { x: 0, y: 1}; a = new Date(); var b = getSomeValue(); var c = someObject.c; function doSomething(a, b, c) { global.r = a + b + c; } a b c Number 3 Object 0 1 Number 2.5 String “text” Date … heap stack

return a + b + c; av = getValueFromHeap(a) bv = getValueFromHeap(b) at = getType(a) bt = getType(b) op = selectOperation(at, bt) rv1 = op(av, bv) r1 = boxOnHeap(rv1) r1 = doPlus(a, b) r2 = doPlus(r1, c) return r2

var a = 3; var b = "text"; var c = 2.5; var d = 0x ; function doSomething(a, b, c, d) { global.r = a + b + c + d; } doSomething(a, b, c, d); stack 0x a: 0x005e4148 b: 0x005e4160 c: String “text” Number 2.5 Number 0x x005e4170 d: Number 3 heap 0x005e4148: 0… x07 represents 3: 0…

var a = 5; var b = 2; var r = ((a + b) / 2) | 0; // r = 3 var r = Math.round((a + b) / 2); // r = 4 var a = 5; var b = 2; var r = (a + b) / 2); // r = 3.5 stack 0x005e4148 r: 0x r: 0x r: Number 3.5 heap

Generic Machine Code Chakra Helper Code Chakra Interpreter

function (b1, b2) { var dx = b1.x - b2.x; var dy = b1.y - b2.y; var dvx = b1.vx - b2.vx; var dvy = b1.vy - b2.vy; var d2 = dx * dx + dy * dy; var mag = (dvx * dx + dvy * dy) / d2; var delta_vx = dx * mag; var delta_vy = dy * mag; b1.vx -= delta_vx; b1.vy -= delta_vy; b2.vx += delta_vx; b2.vy += delta_vy; } stack 0.10 d mag 0.05 delta_vx 0.25 delta_vy registers 2.70 eax(dx) ebx(dy) ecx(dvx) edx(dvy)

function (b1, b2) { (...) var dx = b1.x - b2.x; var dy = b1.y - b2.y;... var d2 = dx * dx + dy * dy;... } Bubble.prototype.collide(b1, b2); for (var i = 0; i < nOfBubbles; i++) { for (var j = i + 1; j < nOfBubbles; j++) { Bubble.prototype.collide(bs[i], bs[j]); } } MOV eax, dx MOV ebx, dy MUL eax, eax MUL ebx, ebx ADD eax, ebx // d2 in eax now if (b1.type != Bubble) bail out; if (b1.x.type != “float”) bail out; if (b2.type != Bubble) bail out; if (b2.x.type != “float”) bail out;...

Garbage Collection 90% of 1 CPU

var value = 5; var a = new Array(100); a[0] = value; // a[0] == 5 (tagged) a[1] = value / 2; // a[1] == 2.5 (boxed) a[2] = "text"; // a[2] == "text" var a = new Uint32Array(100); a[0] = value; // a[0] == 5 ("naked", no tagging required) a[1] = value / 2; // a[1] == 2 ("naked", no tagging required) a[2] = "text"; // a[2] == 0 var a = new Float64Array(100); a[0] = value; // a[0] == 5 ("naked", no tagging required) a[1] = value / 2; // a[1] == 2.5 ("naked", no boxing required!) a[2] = "text"; // a[2] == 0 flexibility performance

var b = new Bubble(0, 1); for (var i = 0; i < 100; i++) { b[i] = i + 2; } var a = new Array(100); for (var i = 0; i < 100; i++) { a[i] = i + 2; } convenience performance

var a = new Array(100); for (var i = 0; i < 100; i++) { a[i] = i + 2; } var a = new Array(); for (var i = 0; i < 100; i++) { a.push(i + 2); } convenience performance 0? ?+1?? … 0100

convenience performance