Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Web Applications HTML5 Games Windows 8 HTML Apps Basic Web Pages JavaScript Execution Speed DOM Interactions Accelerated Graphics Page Load Time."— Presentation transcript:

1

2

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

4

5

6 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);

7

8

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

10 Chakra Your Code Other Subsystems

11

12

13

14

15

16 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"; }

17

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

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

20 GC 28% Your Code 64%

21 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;

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

23

24

25 Slow Property Access 41%

26 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

27 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);

28 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";

29 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

30 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})

31 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

32 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

33 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}

34 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;

35 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

36 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

37 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}”

38 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}”

39

40

41 Garbage Collection 25%

42 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

44 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

45 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…

46 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

47 Generic Machine Code Chakra Helper Code Chakra Interpreter

48 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)

49 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;...

50

51

52 Garbage Collection 90% of 1 CPU

53

54 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

55 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

56 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

57 convenience performance

58

59

60

61


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

Similar presentations


Ads by Google