Understanding the v8 runtime to maximize application performance

UNDERSTANDING THE V8 RUNTIME TO MAXIMIZE
APPLICATION PERFORMANCE
BY DANIEL FIELDS

OVERVIEW
 What is V8?
 Dynamically Typed vs Statically Typed
 The V8 Solution
 Some Practical Measures

DYNAMICALLY TYPED VS STATICALLY TYPED
const point = {
x: 42,
y: 24
};
=
=const tuples =
[42, ’24’];
const point = {};
point.x = 42;
point.y = 24;
const tuples = [];
tuples[0] = 42;
tuples[1] = ’24’;

const point = {
x: 42,
y: 24
};
≠
≠const tuples =
[42, ’24’];
const point = {};
point.x = 42;
point.y = 24;
const tuples = [];
tuples[0] = 42;
tuples[1] = ’24’;

Statically Typed
 Checks type annotations at compile time
 Enforces type constraints
Dynamically Typed
 Checks type annotations at runtime
 No type constraints

Statically Typed
 Checks type annotations at compile time
 Enforces type constraints
Pros
 Compile-time optimizations
Cons
 Rigid / requires more boilerplate
Dynamically Typed
 Checks type annotations at runtime
 No type constraints
Pros
 Very flexible / minimizes boilerplate
Cons
 No compile-time optimizations

let myVar;
myVar = 42;
myVar = ’42’;
myVar = { oh: ‘hai’ };
myVar = [ ‘make it stop’ ];
myVar = () => {
return Date.now;
};
myVar.meta = ”I’m so Meta Even This Acronym”;
myVar = myVar();

WHAT’S GOING ON?
let myVar;
myVar = 42;
myVar = ’42’;
myVar = { oh: ‘hai’ };
myVar = [ ‘make it stop’ ];
myVar = () => {
return Date.now;
};
myVar.meta = ”I’m so Meta Even This Acronym”;
myVar = myVar();
WTF?

THE V8 SOLUTION
Build Type
Annotations

THE V8 SOLUTION
Build Type
Annotations
Cache Access
Strategies

THE V8 SOLUTION
Build Type
Annotations
Cache Access
Strategies
Optimize

THE V8 SOLUTION
Build Type
Annotations
Cache Access
Strategies
Optimize
Hidden Classes Inline Caching TurboFan JIT

THE V8 SOLUTION - HIDDEN CLASSES
let point = {
x: 42,
y: 24
};
Name Offset
x 0
y 1
Point_0

let point = {
x: 42,
y: 24
};
Name Offset
x 0
y 1
Point_0
Values Array
42
24

let point = {
x: 42,
y: 24
};
point.z = 66;
Name Offset
x 0
y 1
Point_0
Values Array
42
24

let point = {
x: 42,
y: 24
};
point.z = 66;
Name Offset
x 0
y 1
Point_0
Values Array
42
24
Name Offset
x 0
y 1
z 2
Point_1
Values Array
42
24
66

function(que) {
let point = (que)
? { x: 42, y: 24 }
: { y: 42, x: 24 };
return point;
};
Name Offset
x 0
y 1
Point_0
Values Array
42
24
Name Offset
y 0
x 1
Point_1
Values Array
24
42

function(que) {
let point = (que)
? { x: 42, y: 24 }
: { x: 42, y: 24 };
return point;
};
Name Offset
x 0
y 1
Point_0
Values Array
42
24
Values Array
24
42

function(que) {
let point = (que)
? { x: 42, y: 24, z: 66 }
: { x: 24, y: 42, z: 66 };
return point;
};
Name Offset
x 0
y 1
z 2
Point_0
Values Array
42
24
66
Values Array
24
42
66

THE V8 SOLUTION - INLINE CACHING
Variable
(A)
Hidden Class
(string)
Inline
Cache

Variable
(A)
Hidden Class
(string)
Variable A
string
shortcut
Inline
Cache

Variable
(A)
Hidden Class
(string)
Variable A
string
shortcut
Hidden Class
(numeric)
Inline
Cache

Variable
(A)
Hidden Class
(string)
Variable A
string
shortcut
Hidden Class
(numeric)
Variable A
numeric
shortcut
Inline
Cache

function square(a) {
return a * a;
}
let value0 = square(2);

return a * a;
}
Shortcut to numeric ”a”

return a * a;
}
Monomorphic

return a * a;
}
let value1 = square(‘2’);
Shortcut to string ”a”
Polymorphic

return a * a;
}
let value2 = square(Date.now);
let value3 = square({
valueOf: () => { return 2; }
});
Shortcut to A_0 object ”a”
Shortcut to string”a”
Shortcut to Date”a”
Megamorphic!

return a * a;
}
let value2 = square(Date.now);
let value3 = square({
valueOf: () => { return 2; }
});
Shortcut to A_0 object ”a”
Shortcut to string”a”
Shortcut to Date”a”
Megamorphic! Megamorphic global hashtable

return a * a;
}
const value0 = square(2);
const value1 = square(parseInt(’3’));
Monomorphic!

THE V8 SOLUTION - THE OPTIMIZING COMPILER (TURBOFAN)

 Functionally similar to the “full compiler”

 Builds a graph of internal representation (IR) of code

 Builds a graph of internal representation (IR) of code
 Optimization engine applies various rules as the
IR is constructed, and un-optimized machine code is
replaced with optimized machine code

const a = 2;
const b = 2;
const sum = a + b;

const a = 2;
const b = 2;
const sum = a + b;
mov eax, a
mov ebx, b
call RuntimeAdd

const a = 2;
const b = 2;
const sum = a + b;
mov eax, a
mov ebx, b
add eax, ebx

const a = 2;
const b = 2;
const sum = a + b;
mov eax, a
mov ebx, b
add eax, ebx
Canonicalization, architecture-specific optimizations, dead code removal, global
value numbering, loop invariant code motion, redundant bounds check elimination,
etc.

 Some code cannot be optimized...

 Some code cannot be optimized...
 Reassigning a defined parameter while mentioning arguments
 Object literals that contain __proto__, or get or set declarations
 Functions that use debugger, eval(), or with statements
 for-in statements where they key is not a local variable
 for-in statements on arrays
 Infinite loops with deep logic exit conditions

SOME PRACTICAL MEASURES
Define variables with as much information as
possible...
Do:
const point = {
x: 42,
y: 24
};
Don’t:
const point = {}
point.x = 42;
point.y = 24;

Perform your own coercion on variables before passing to
functions...
Do:
const a = ’24’;
square(parseInt(a));
Don’t:
const a = ’24’;
square(a);

Don’t reassign a defined parameter while mentioning arguments...
Do:
function argsReassign(a, _b) {
let b = _b;
if (arguments.length < 2) b = 5;
}
Don’t:
function argsReassign(a, b) {
if (arguments.length < 2) b = 5;
}

Don’t use __proto__, get, or set in object literals...
Don’t:
function someUnoptimizableFunction() {
return {
__proto__: 42,
get a() { return ‘a’; }
set a(val) { this._a = val; }
};
}

Don’t use debugger...
Don’t:
function someUnoptimizableFunction() {
if (process.env.NODE_ENV === ‘develop’) {
debugger;
}
}

Don’t use with...
Don’t:
function someUnoptimizableFunction(hello) {
with (hello) {
console.log(world);
}
}

Don’t use eval...
Don’t:
function someUnoptimizableFunction(script) {
return eval(script);
}

Don’t use for-in statements on arrays...
Do:
function optimizable() {
const obj =[1, 1, 2, 3, 5, 8];
for (let i = 0; i < obj.length; i++);
}
Don’t:
function unoptimizable() {
const obj =[1, 1, 2, 3, 5, 8];
for (const item in obj);
}

Don’t create infinite loops with deeply nested exit conditions...
Do:
function optimizable() {
while (someExitCondition()) {
// do stuff
}
}
Don’t:
function unoptimizable() {
while (true) {
if (someExitCondition()) {
break;
}
}
}

TURBOFAN IS RAPIDLY EVOLVING
 The switch from CrankShaft to TurboFan represents a complete redesign of the optimizing compiler.
 TurboFan GREATLY simplified the code.
 Consequently, the project is seeing more contributors.
 Compiler bailouts are being fixed.
 This presentation may be out of date by the time you read it.
 Follow the V8 project on GitHub to keep up-to-date on new features
https://github.com/v8/v8

“We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of
all evil. Yet we should not pass up our opportunities in that critical 3%”
“In established engineering disciplines a 12% improvement, easily obtained, is never considered marginal
and I believe the same viewpoint should prevail in software engineering”
– Donald Knuth

THE END
Thank You!
Dan Fields
https://www.linkedin.com/in/danielsfields
https://github.com/dsfields
@danielsfields

Understanding the v8 runtime to maximize application performance

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Understanding the v8 runtime to maximize application performance

Similar to Understanding the v8 runtime to maximize application performance (20)

Recently uploaded

Recently uploaded (20)

Understanding the v8 runtime to maximize application performance

Editor's Notes