Know Your Engines How to Make Your JavaScript Fast

Transcription

1 Know Your Engines How to Make Your JavaScript Fast Dave Mandelin 8 November 2011 O Reilly Velocity Europe

2 JavaScript is getting really fast and programs are getting crazy Bullet physics engine (ammo.js) H.264 decoder at 30 fps (broadway.js)

3 But it s still easy to go slow function f() { var sum = 0; for (var i = 0; i < N; ++i) { sum += i; function f() { eval( ); var sum = 0; for (var i = 0; i < N; ++i) { sum += i;

4 But it s still easy to go slow function f() { var sum = 0; for (var i = 0; i < N; ++i) { sum += i; function f() { eval( ); var sum = 0; for (var i = 0; i < N; ++i) { sum += i; 0 without eval with eval with eval( ) up to 10x slower!

5 Making JavaScript Fast Or, Not Making JavaScript Slow How JITs make JavaScript not slow How not to ruin animation with pauses How to write JavaScript that s not slow

6 The 2006 JavaScript Engine

7 Inside the 2006 JS Engine DOM Front End Interpreter Standard Library Garbage Collector

8 Inside the 2006 JS Engine // JavaScript source e.innerhtml = n + items ; DOM Front End Interpreter Standard Library Garbage Collector

9 Inside the 2006 JS Engine // JavaScript source e.innerhtml = n + items ; DOM Front End Interpreter Standard Library // bytecode (AST in some engines) tmp_0 = add var_1 str_3 setprop var_0 innerhtml tmp_0 Garbage Collector

10 Inside the 2006 JS Engine // JavaScript source e.innerhtml = n + items ; DOM Front End Interpreter Standard Library Run the bytecode // bytecode (AST in some engines) tmp_0 = add var_1 str_3 setprop var_0 innerhtml tmp_0 Garbage Collector

11 Inside the 2006 JS Engine // JavaScript source e.innerhtml = n + items ; DOM Front End Interpreter Standard Library Run the bytecode Reclaim memory // bytecode (AST in some engines) tmp_0 = add var_1 str_3 setprop var_0 innerhtml tmp_0 Garbage Collector

12 Inside the 2006 JS Engine Set innerhtml // JavaScript source e.innerhtml = n + items ; DOM Front End Interpreter Standard Library Run the bytecode Reclaim memory // bytecode (AST in some engines) tmp_0 = add var_1 str_3 setprop var_0 innerhtml tmp_0 Garbage Collector

13 Why it s hard to make JS fast Because JavaScript is an untyped language. untyped = no type declarations

14 Operations in an untyped language x = y + z can mean many things if y and z are numbers, numeric addition if y and z are strings, concatenation and many other cases; y and z can have different types

15 Engine-Internal Types JS engines use finer-grained types internally. JavaScript type number object

16 Engine-Internal Types JS engines use finer-grained types internally. JavaScript type number Engine type 32-bit* integer 64-bit floating-point object

17 Engine-Internal Types JS engines use finer-grained types internally. JavaScript type number Engine type 32-bit* integer 64-bit floating-point object { a: 1 { a: 1, b: 2 { a: get... { a: 1, proto = new C

18 Engine-Internal Types JS engines use finer-grained types internally. JavaScript type number Engine type 32-bit* integer 64-bit floating-point object { a: 1 { a: 1, b: 2 { a: get... { a: 1, proto = new C Different shapes

19 Values in an untyped language Because JavaScript is untyped, the interpreter needs boxed values. Boxed Unboxed Purpose Storage Computation Examples (INT, 55) 55 (STRING, foo ) foo Definition (type tag, C++ value) C++ value only boxed values can be stored in variables, only unboxed values can be computed with (+, *, etc)

20 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z:

21 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory

22 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory

23 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action

24 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z

25 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action

26 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x

27 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the boxed output x to memory

28 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z This is the only real work! execute the action box the output x write the boxed output x to memory

29 Running Code in the Interpreter Here s what the interpreter must do to execute x = y + z: read the operation x = y + z from memory read the boxed inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the boxed output x to memory This is the only real work! Everything else is overhead.

30 The 2011 JavaScript Engine

31 Inside the 2011 JS Engine JavaScript source Interpreter Garbage Collector DOM Standard Library Front End bytecode/ast

32 Inside the 2011 JS Engine Interpreter Garbage Collector DOM JavaScript source Standard Library Front End Untyped Compiler Compile to x86/x64/arm bytecode/ast

33 Inside the 2011 JS Engine Interpreter Garbage Collector DOM JavaScript source Standard Library Front End Untyped Compiler Fast! x86/x64/arm Compile to x86/x64/arm CPU bytecode/ast

34 Inside the 2011 JS Engine Interpreter Garbage Collector DOM JavaScript source Standard Library Front End Untyped Compiler Fast! x86/x64/arm Compile to x86/x64/arm CPU bytecode/ast Typed Compiler Ultra Fast!

35 Inside the 2011 JS Engine Interpreter Garbage Collector DOM JavaScript source Standard Library Front End Untyped Compiler Fast! x86/x64/arm Compile to x86/x64/arm CPU bytecode/ast Typed Compiler Ultra Fast!

36 Inside the 2011 JS Engine THE SLOW ZONE Interpreter Garbage Collector DOM JavaScript source Standard Library Front End Untyped Compiler Fast! x86/x64/arm Compile to x86/x64/arm CPU bytecode/ast Typed Compiler Ultra Fast!

37 Running Code with the JIT The basic JIT compiler on x = y + z: All Major Browsers read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the output x to memory

38 Running Code with the JIT The basic JIT compiler on x = y + z: All Major Browsers read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the output x to memory CPU does it for us!

39 Running Code with the JIT The basic JIT compiler on x = y + z: All Major Browsers read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action CPU does it for us! box the output x write the output x to memory JIT code can keep things in registers

40 Choosing the action in the JIT

41 Choosing the action in the JIT Many cases for operators like +

42 Choosing the action in the JIT Many cases for operators like + Engines generate fast JIT code for common cases number + number string + string

43 Choosing the action in the JIT Many cases for operators like + Engines generate fast JIT code for common cases number + number string + string Rare cases run in the slow zone number + undefined

44 JITs for Regular Expressions There is a separate JIT for regular expressions Regular expressions are generally faster than manual search Still in the slow zone: Some complex regexes (example: backreferences) Building result arrays (test much faster than exec) All Major Browsers

45 Object Properties function f(obj) { return obj.a + 1;

46 Object Properties function f(obj) { return obj.a + 1; Need to search obj for a property named a slow

47 Object Properties function f(obj) { return obj.a + 1; Need to search obj for a property named a May need to search prototype chain up several levels slow super-slow

48 Object Properties function f(obj) { return obj.a + 1; Need to search obj for a property named a May need to search prototype chain up several levels Finally, once we ve found it, get the property value slow super-slow fast!

49 ICs: a mini-jit for objects All Major Browsers

50 ICs: a mini-jit for objects All Major Browsers Properties become fast with inline caching (we prefer IC)

51 ICs: a mini-jit for objects All Major Browsers Properties become fast with inline caching (we prefer IC) Basic plan:

52 ICs: a mini-jit for objects All Major Browsers Properties become fast with inline caching (we prefer IC) Basic plan: 1. First time around, search for the property in the Slow Zone

53 ICs: a mini-jit for objects All Major Browsers Properties become fast with inline caching (we prefer IC) Basic plan: 1. First time around, search for the property in the Slow Zone 2. But record the steps done to actually get the property

54 ICs: a mini-jit for objects All Major Browsers Properties become fast with inline caching (we prefer IC) Basic plan: 1. First time around, search for the property in the Slow Zone 2. But record the steps done to actually get the property 3. Then JIT a little piece of code that does just those steps

55 ICs: Example Example Code var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1;

56 ICs: Example Example Code var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1; Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

57 Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1; ICs: Example Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

58 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1; icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

59 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1; icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

60 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { return obj.b + 1; icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

61 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; shape=15, in position 0 function f(obj) { return obj.b + 1; icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 Generated JIT Code... jump slowpropaccess continue_1:... slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

62 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; shape=15, in position 0 function f(obj) { return obj.b + 1; Generated JIT Code... jump slowpropaccess continue_1:... icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 icstub_2: compare obj.shape, 15 jumpiffalse slowpropaccess load obj.props[0] jump continue_1 slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

63 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; shape=15, in position 0 function f(obj) { return obj.b + 1; Generated JIT Code... jump slowpropaccess continue_1:... icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 icstub_2: compare obj.shape, 15 jumpiffalse slowpropaccess load obj.props[0] jump continue_1 slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

64 ICs: Example Example Code shape=12, in position 1 var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; shape=15, in position 0 function f(obj) { return obj.b + 1; Generated JIT Code... jump slowpropaccess continue_1:... icstub_1: compare obj.shape, 12 jumpiffalse slowpropaccess load obj.props[1] jump continue_1 icstub_2: compare obj.shape, 15 jumpiffalse slowpropaccess load obj.props[0] jump continue_1 slowpropaccess:... set up call call ICGetProp ; C++ Slow Zone jump continue_1

65 var q = 4; var r; function f(obj) { r = q; These are fast because of ICs Global Variable Access

66 These are fast because of ICs Global Variable Access var q = 4; var r; function f(obj) { r = q; Direct Property Access var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; function f(obj) { obj2.b = obj1.c;

67 These are fast because of ICs Global Variable Access var q = 4; var r; function f(obj) { r = q; Direct Property Access var obj1 = { a: 1, b: 2, c: 3 ; var obj2 = { b: 2 ; Closure Variable Access var f = function() { var x = 1; var g = function() { var sum = 0; for (var i = 0; i < N; ++i) { sum += x; return sum; return g(); function f(obj) { obj2.b = obj1.c;

68 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; function C(z) { this.z = z; C.prototype = new B;

69 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; function C(z) { this.z = z; C.prototype = new B; proto new C(1) new A new B

70 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; function C(z) { this.z = z; C.prototype = new B; proto new C(1) new A new B new C(2)

71 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; proto new C(1) new A new B new C(2) new C(3) function C(z) { this.z = z; C.prototype = new B;

72 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; proto new C(1) new A new B new C(2) new C(3) function C(z) { this.z = z; C.prototype = new B; Shape of new C objects determines prototype

73 Prototype chains don t hurt function A(x) { this.x = x; function B(y) { this.y = y; B.prototype = new A; proto new C(1) new A new B new C(2) new C(3) function C(z) { this.z = z; C.prototype = new B; Shape of new C objects determines prototype -> IC can generate code that checks shape, then reads directly from prototype without walking

74 Many Shapes Slow Down ICs What happens if many shapes of obj are passed to f? function f(obj) { return obj.p; ICs end up looking like this:

75 Many Shapes Slow Down ICs What happens if many shapes of obj are passed to f? function f(obj) { return obj.p; jumpif shape!= 12 read for shape 12 ICs end up looking like this:

76 Many Shapes Slow Down ICs What happens if many shapes of obj are passed to f? function f(obj) { return obj.p; jumpif shape!= 12 read for shape 12 ICs end up looking like this: jumpif shape!= 15 read for shape 15

77 Many Shapes Slow Down ICs What happens if many shapes of obj are passed to f? function f(obj) { return obj.p; jumpif shape!= 12 read for shape 12 ICs end up looking like this: jumpif shape!= 15 read for shape 15 jumpif shape!= 6 read for shape 6

78 Many Shapes Slow Down ICs What happens if many shapes of obj are passed to f? function f(obj) { return obj.p; jumpif shape!= 12 read for shape 12 ICs end up looking like this: jumpif shape!= 16 read for shape jumpif shape!= 15 read for shape 15 jumpif shape!= 6 read for shape 6 jumpif shape!= 22 read for shape 22 jumpif shape!= 3 read for shape 3

79 Many shapes in practice nanoseconds/iteration IE Opera Chrome Firefox Safari IE Opera Chrome Firefox Safari Slow Zone for 2+ shapes # of shapes doesn t matter! more shapes -> slower slower with more shapes, but levels off in Slow Zone # of shapes at property read site

80 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y;

81 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y; f call object h call object j call object First call to f

82 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y; f call object h call object j call object First call to f f call object h call object j call object Second call to f

83 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y; f call object h call object j call object First call to f f call object h call object j call object Second call to f Prototype chains don t slow us down, but deep closure nesting does. Why?

84 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y; f call object h call object j call object First call to f f call object h call object j call object Second call to f Prototype chains don t slow us down, but deep closure nesting does. Why? Every call to f generates a unique closure object to hold x.

85 Deeply Nested Closures are Slower var f = function() { var x; var g = function() { var h = function() { var y; var i = function () { var j = function() { z = x + y; f call object h call object j call object First call to f f call object h call object j call object Second call to f Prototype chains don t slow us down, but deep closure nesting does. Why? Every call to f generates a unique closure object to hold x. The engine must walk to find the right x each time

86 Properties in the Slow Zone

87 var a = {; a.x; Properties in the Slow Zone Undefined Property (Fast on Firefox, Chrome)

88 var a = {; a.x; Properties in the Slow Zone Undefined Property (Fast on Firefox, Chrome) DOM Access (I only tested.id, so take with a grain of salt-- other properties may differ) var a = document.getbyelementid( foo ); a.id;

89 Properties in the Slow Zone Undefined Property (Fast on Firefox, Chrome) var a = {; a.x; Scripted Getter (Fast on IE) var a = { x: get() { return 1; ; a.x; DOM Access (I only tested.id, so take with a grain of salt-- other properties may differ) var a = document.getbyelementid( foo ); a.id;

90 Properties in the Slow Zone Undefined Property (Fast on Firefox, Chrome) var a = {; a.x; Scripted Getter (Fast on IE) var a = { x: get() { return 1; ; a.x; DOM Access (I only tested.id, so take with a grain of salt-- other properties may differ) var a = document.getbyelementid( foo ); a.id; Scripted Setter var a = { x: set(y) { this.x_ = y; ; a.x = 1;

91 The Typed JIT Compiler Firefox 3.5+ (Tracemonkey, JM+TI) Chrome 11+ (Crankshaft)

92 Types FTW! If only JavaScript had type declarations...

93 Types FTW! If only JavaScript had type declarations... The JIT would know the type of every local variable

94 Types FTW! If only JavaScript had type declarations... The JIT would know the type of every local variable Know exactly what action to use (no type checks)

95 Types FTW! If only JavaScript had type declarations... The JIT would know the type of every local variable Know exactly what action to use (no type checks) Local variables don t need to be boxed (or unboxed)

96 Types FTW! If only JavaScript had type declarations... The JIT would know the type of every local variable Know exactly what action to use (no type checks) Local variables don t need to be boxed (or unboxed) I call this kind of JIT a typed compiler

97 But JS doesn t have types

98 But JS doesn t have types Problem: JS doesn t have type declarations

99 But JS doesn t have types Problem: JS doesn t have type declarations Solution: run the program for a bit, monitor types Bonus points: use static analysis to infer more types

100 But JS doesn t have types Problem: JS doesn t have type declarations Solution: run the program for a bit, monitor types Bonus points: use static analysis to infer more types Then recompile optimized for those types

101 Running with the Typed JIT On x = y + z: Firefox 3.5+ Chrome 11+ read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the output x to memory

102 Running with the Typed JIT On x = y + z: Firefox 3.5+ Chrome 11+ read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the output x to memory

103 Running with the Typed JIT On x = y + z: Firefox 3.5+ Chrome 11+ read the operation x = y + z from memory read the inputs y and z from memory check the types of y and z and choose the action unbox y and z execute the action box the output x write the output x to memory

104 function getpop(city) { return popdata[city.id]; for (var i = 0; i < N; ++i) { total += getpop(city); Further Optimization 1 original code Automatic Inlining

105 Further Optimization 1 Automatic Inlining original code function getpop(city) { return popdata[city.id]; for (var i = 0; i < N; ++i) { total += getpop(city); JIT compiles as if you wrote this for (var i = 0; i < N; ++i) { total += popdata[city.id];

106 Further Optimization 2 Loop Invariant Code Motion (LICM, hoisting ) original code for (var i = 0; i < N; ++i) { total += a[i] * (1 + options.tax);

107 Further Optimization 2 Loop Invariant Code Motion (LICM, hoisting ) original code for (var i = 0; i < N; ++i) { total += a[i] * (1 + options.tax); JIT compiles as if you wrote this var f = 1 + options.tax; for (var i = 0; i < N; ++i) { total += a[i] * f;

108 Optimize Only Hot Code

109 Optimize Only Hot Code Typed JITs have longer compile time which would imply longer startup before JS runs

110 Optimize Only Hot Code Typed JITs have longer compile time which would imply longer startup before JS runs To avoid this, engines apply typed JITs selectively Only on hot code (~ runs long enough to be measurable) Only if judged to be worthwhile (incomprehensible heuristics)

111 Current Limitations

112 Current Limitations What happens if the types change after compiling? Just a few changes -> recompile, slight slowdown Many changes -> give up and deoptimize to untyped JIT

113 Current Limitations What happens if the types change after compiling? Just a few changes -> recompile, slight slowdown Many changes -> give up and deoptimize to untyped JIT Array elements, object properties, and closed-over variables Usually still boxed, so fast, but not as fast as C! Typed arrays help in theory, but not always optimized in practice yet

114 Current Limitations What happens if the types change after compiling? Just a few changes -> recompile, slight slowdown Many changes -> give up and deoptimize to untyped JIT Array elements, object properties, and closed-over variables Usually still boxed, so fast, but not as fast as C! Typed arrays help in theory, but not always optimized in practice yet JS semantics require overflow checks for integer math

115 Type-stable JavaScript The key to running faster in future JITs is type-stable JavaScript. This means JavaScript where you could declare a single engine-internal type for each variable.

116 Type-stable JS: examples var g = 34; var o1 = { a: 56 ; var o2 = { a: 99 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; g = 0; Type-stable

117 Type-stable JS: examples var g = 34; var o1 = { a: 56 ; var o2 = { a: 99 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; g = 0; Type-stable NOT type-stable var g = 34; var o1 = { a: 56 ; var o2 = { z: 22, a: 56 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; g = hello ;

118 Type-stable JS: examples var g = 34; var o1 = { a: 56 ; var o2 = { a: 99 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; g = 0; Type-stable NOT type-stable var g = 34; var o1 = { a: 56 ; var o2 = { z: 22, a: 56 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; Different shapes g = hello ;

119 Type-stable JS: examples var g = 34; Type-stable var o1 = { a: 56 ; var o2 = { a: 99 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; NOT type-stable var g = 34; var o1 = { a: 56 ; var o2 = { z: 22, a: 56 ; for (var i = 0; i < 10; ++i) { var o = i % 2? o1 : o2; g += o.a; Different shapes g = 0; g = hello ; Type change

120 Garbage Collection

121 new Object(); new MyConstructor(); { a: 4, b: 5 Object.create(); What Allocates Memory? Objects new Array(); [ 1, 2, 3, 4 ]; Arrays Strings new String( hello ); <p> + e.innerhtml + </p>

122 What Allocates Memory? Objects new Object(); new MyConstructor(); { a: 4, b: 5 Object.create(); Function Objects var x = function () {... new Function(code); Arrays new Array(); [ 1, 2, 3, 4 ]; Strings new String( hello ); <p> + e.innerhtml + </p>

123 What Allocates Memory? Objects new Object(); new MyConstructor(); { a: 4, b: 5 Object.create(); Function Objects var x = function () {... new Function(code); new Array(); [ 1, 2, 3, 4 ]; Arrays Strings new String( hello ); <p> + e.innerhtml + </p> Closure Environments function outer(str) { var name = str; return function inner() { return Hi, + name;

124 What Allocates Memory? Objects new Object(); new MyConstructor(); { a: 4, b: 5 Object.create(); Function Objects var x = function () {... new Function(code); new Array(); [ 1, 2, 3, 4 ]; Arrays Strings new String( hello ); <p> + e.innerhtml + </p> Closure Environments function outer(str) { var name = str; return function inner() { return Hi, + name; name is stored in an implicitly created object!

125 GC Pauses Your Program! Time JavaScript Running GC Running JS Paused

126 GC Pauses Your Program! Time JavaScript Running GC Running JS Paused Basic GC algorithm (mark and sweep) Traverse all reachable objects (from locals, window, DOM) Recycle objects that are not reachable

127 GC Pauses Your Program! Time JavaScript Running GC Running JS Paused Basic GC algorithm (mark and sweep) Traverse all reachable objects (from locals, window, DOM) Recycle objects that are not reachable The JS program is paused during GC for safe traversal

128 GC Pauses Your Program! Time JavaScript Running GC Running JS Paused Basic GC algorithm (mark and sweep) Traverse all reachable objects (from locals, window, DOM) Recycle objects that are not reachable The JS program is paused during GC for safe traversal Pauses may be long: 100 ms or more Serious problem for animation Can also be a drag on general performance

129 Reducing Pauses with Science 1 Generational GC Chrome

130 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects

131 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area

132 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area

133 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area Simple GC JavaScript Running GC Running JS Paused

134 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area Simple GC JavaScript Running GC Running JS Paused Generational GC JavaScript Running

135 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area Simple GC JavaScript Running GC Running JS Paused Generational GC JavaScript Running nursery collection (<100 us)

136 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area Simple GC JavaScript Running GC Running JS Paused Generational GC JavaScript Running nursery collection (<100 us) tenured collection

137 Reducing Pauses with Science 1 Generational GC Chrome Idea: Optimize for creating many short-lived objects Create objects in a frequently collected nursery area Promote long-lived objects to a rarely collected tenured area Simple GC JavaScript Running GC Running JS Paused Generational GC JavaScript Running fewer pauses! nursery collection (<100 us) tenured collection

138 Generational GC by Example scavenging young generation (aka nursery) mark-and-sweep tenured generation Message Array Message

139 Generational GC by Example scavenging young generation (aka nursery) Point mark-and-sweep tenured generation Message Array Message

140 Generational GC by Example scavenging young generation (aka nursery) Point Point mark-and-sweep tenured generation Message Array Message

141 Generational GC by Example scavenging young generation (aka nursery) Point Point Line mark-and-sweep tenured generation Message Array Message

142 Generational GC by Example scavenging young generation (aka nursery) Point Point Line a b mark-and-sweep tenured generation Message Array Message

143 Generational GC by Example scavenging young generation (aka nursery) Point Point Line Point a b mark-and-sweep tenured generation Message Array Message

144 Generational GC by Example scavenging young generation (aka nursery) Point Point Line Point Message a b mark-and-sweep tenured generation Message Array Message

145 Generational GC by Example scavenging young generation (aka nursery) Point Point Line Point Message a b mark-and-sweep tenured generation Message Array Message

146 Generational GC by Example scavenging young generation (aka nursery) Point Point Line Point Message Point a b mark-and-sweep tenured generation Message Array Message

147 Generational GC by Example scavenging young generation (aka nursery) Point Point Line Point Point a b mark-and-sweep tenured generation Message Message Array Message

148 Generational GC by Example scavenging young generation (aka nursery) mark-and-sweep tenured generation Message Message Array Message

149 Reducing Pauses with Science 1I Incremental GC Chrome

150 Reducing Pauses with Science 1I Incremental GC Chrome Idea: Do a little bit of GC traversal at a time

151 Reducing Pauses with Science 1I Incremental GC Chrome Idea: Do a little bit of GC traversal at a time Simple GC JavaScript Running GC Running JS Paused

152 Reducing Pauses with Science 1I Incremental GC Chrome Idea: Do a little bit of GC traversal at a time Simple GC JavaScript Running GC Running JS Paused Incremental GC

153 Reducing Pauses with Science 1I Incremental GC Chrome Idea: Do a little bit of GC traversal at a time Simple GC JavaScript Running GC Running JS Paused Incremental GC shorter pauses!

154 Reducing Pauses in Practice

155 Reducing Pauses in Practice For simple GCs Fewer live objects -> shorter pauses Lower allocation rate (objects/second) -> less frequent pauses Lots of live data + allocate objects in hot loops = very bad

156 Reducing Pauses in Practice For simple GCs Fewer live objects -> shorter pauses Lower allocation rate (objects/second) -> less frequent pauses Lots of live data + allocate objects in hot loops = very bad For incremental GCs Lots of live objects -> slows down program a bit if GC is not generational Mostly, don t worry about pauses!

157 JavaScript Engines in Practice

158 Performance Faults Performance fault: when a tiny change hurts performance Sometimes, just makes one statement slower Other times, deoptimizes the entire function! Reasons we have performance faults bug, tends to get quickly rare case, will get fixed if not rare hard to optimize, RSN...

159 Strings

160 Strings In the Slow Zone, but some things are faster than you might think

161 Strings In the Slow Zone, but some things are faster than you might think.substring() is fast, O(1) Don t need to copy characters, just point within original

162 Strings In the Slow Zone, but some things are faster than you might think.substring() is fast, O(1) Don t need to copy characters, just point within original Concatenation is also optimized Batch up inputs in a rope or concat tree, concat all at once Performance fault: prepending (Opera)

163 Strings In the Slow Zone, but some things are faster than you might think.substring() is fast, O(1) // Prepending example var s = ; Don t need to copy characters, just for point (var i within = 0; i < original 100; ++i) { s = i + s; Concatenation is also optimized Batch up inputs in a rope or concat tree, concat all at once Performance fault: prepending (Opera)

164 Arrays fast: dense array var a = []; for (var i = 0; i < 100; ++i) { a[i] = 0; 3-15x slower: sparse array var a = []; a[10000] = 0; for (var i = 0; i < 100; ++i) { a[i] = 0; a.x = 7; // Fx, IE only Want a fast array? Make sure it s dense 0..N fill or push fill is always dense Huge gaps are always sparse N..0 fill is sparse on Firefox adding a named property is sparse on Firefox, IE

165 Iteration over Arrays fastest: index iteration // This runs in all in JIT code, // so it s really fast. for (var i = 0; i < a.length; ++i) { sum += a[i];

166 Iteration over Arrays 3-15x slower: functional style fastest: index iteration // This runs in all in JIT code, // so it s really fast. for (var i = 0; i < a.length; ++i) { sum += a[i]; // This makes N function calls, // and most JITs don t optimize // through C++ reduce(). sum = a.reduce(function(a, b) { return a + b; ); 20-80x slower: for-in // This calls a C++ function to // navigate the property list. for (var i in a) { sum += a[i];

167 Functions Function calls use ICs, so they are fast Manual inlining can still help sometimes Key performance faults: f.call() x slower than f() f.apply() x slower than f() arguments - often very slow, but varies

168 Creating Objects Creating objects is slow Doesn t matter too much how you create or populate

169 Creating Objects Creating objects is slow Doesn t matter too much how you create or populate Exception: Constructors on Chrome are fast function Cons(x, y, z) { this.x = x; this.y = y; this.z = z; for (var i = 0; i < N; ++i) new Cons(i, i + 1, i * 2);

170 OOP Styling

171 OOP Styling Prototype function Point(x, y) { this.x = x; this.y = y; Point.prototype = { distance: function(pt2)...

172 OOP Styling Prototype function Point(x, y) { this.x = x; this.y = y; Point.prototype = { distance: function(pt2)... Information-Hiding function Point(x, y) { return { distance: function(pt2)...

173 OOP Styling Prototype function Point(x, y) { this.x = x; this.y = y; Point.prototype = { distance: function(pt2)... Information-Hiding function Point(x, y) { return { distance: function(pt2)... Instance Methods function Point(x, y) { this.x = x; this.y = y; this.distance = function(pt2)...

174 OOP Styling Prototype function Point(x, y) { this.x = x; this.y = y; Point.prototype = { distance: function(pt2)... Information-Hiding function Point(x, y) { return { distance: function(pt2)... Prototype style is much faster to create (each closure creates a function object) Instance Methods function Point(x, y) { this.x = x; this.y = y; this.distance = function(pt2)...

175 OOP Styling Prototype function Point(x, y) { this.x = x; this.y = y; Point.prototype = { distance: function(pt2)... Information-Hiding function Point(x, y) { return { distance: function(pt2)... Prototype style is much faster to create (each closure creates a function object) Using the objects is about the same Instance Methods function Point(x, y) { this.x = x; this.y = y; this.distance = function(pt2)...

176 Exceptions Exceptions assumed to be rare in perf-sensitive code running a try statement is free on most browers throw/catch is really slow There are many performance faults around exceptions just having a try statement deoptimizes on some browers try-finally is perf fault on some

177 eval and with Short version: Do not use anywhere near performance sensitive code! Mind-Bogglingly Awful 5-100x slower than using a function call var sum = 0; for (var i = 0; i < N; ++i) { sum = eval( sum + i ); Still Terrible 2-10x slower than without eval var sum = 0; eval( ); for (var i = 0; i < N; ++i) { sum = eval( sum + i );

178 Top 5 Things to Know

179 Top 5 Things to Know 5. Avoid eval, with, exceptions near perf-sensitive code

180 Top 5 Things to Know 5. Avoid eval, with, exceptions near perf-sensitive code 4. Avoid creating objects in hot loops

181 Top 5 Things to Know 5. Avoid eval, with, exceptions near perf-sensitive code 4. Avoid creating objects in hot loops 3. Use dense arrays (know what causes sparseness)

182 Top 5 Things to Know 5. Avoid eval, with, exceptions near perf-sensitive code 4. Avoid creating objects in hot loops 3. Use dense arrays (know what causes sparseness) 2. Write type-stable code

183 Top 5 Things to Know 5. Avoid eval, with, exceptions near perf-sensitive code 4. Avoid creating objects in hot loops 3. Use dense arrays (know what causes sparseness) 2. Write type-stable code 1....

184 Talk To Us JS engine developers want to help you. Tell us about: Performance faults you run into Exciting apps that require fast JS Anything interesting you discover about JS performance