This slides provide brief understanding of Javascript Engine, especially V8 Engine which is used by chrome and nodejs

1. Understanding Javascript
Engine to Code better
Ihsan Fauzi rahman

2. What is Javascript
Engine ?

3. JavaScriptCore
Chakra
Rhino
SpiderMonkey
Carakan

5. Ignition & Turbofan
Ignition
Bytecode
Optimize
Turbofan
Optimized
Code
Interpreted Optimized

6. How to Make use of
that ?

7. Hidden Class
function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(1, 2);
A Point
Object
Initial Hidden
Class H0
var p2 = new Point(1, “2”);
Initial Hidden
Class H1
A Point
Object
var p3 = new Point(1, 2);
p3.z = 3;
Initial Hidden
Class H3
A Point
Object

8. Inline Cache
Polymorphic
Offset 0: x
Offset 1: y
Offset 2: z
Offset 0: x
Offset 1: y
Offset 0: x
Offset 1: y
Monomorphic

9. Optimization Killer

10. Unsupported Syntax
function containsObjectLiteralWithSetter() {
return {
set prop(val) {
this.val = val;
}
};
}
function containsObjectLiteralWithGetter() {
return {
get prop() {
return 3;
}
};
}
function containsObjectLiteralWithProto() {
return {__proto__: 3};
}
var errorObject = {value: null};
function tryCatch(fn, ctx, args) {
try {
return fn.apply(ctx, args);
}
catch(e) {
errorObject.value = e;
return errorObject;
}
}
var result = tryCatch(mightThrow, void 0, [1,2,3]);
//Unambiguously tells whether the call threw
if(result === errorObject) {
var error = errorObject.value;
}
else {
//result is the returned value
}
Workaround

11. Unmanaged Arguments
function defaultArgsReassign(a, b) {
if (arguments.length < 2) b = 5;
}
function reAssignParam(a, b_) {
var b = b_;
//unlike b_, b can safely be reassigned
if (arguments.length < 2) b = 5;
}
Workaround

12. Unmanaged Arguments
function leaksArguments1() {
return arguments;
}
function leaksArguments2() {
var args = [].slice.call(arguments);
}
function leaksArguments3() {
var a = arguments;
return function() {
return a;
};
}
function doesntLeakArguments() {
//.length is just an integer, this doesn't leak
//the arguments object itself
var args = new Array(arguments.length);
for(var i = 0; i < args.length; ++i) {
//i is always valid index in the arguments object
args[i] = arguments[i];
}
return args;
}
function anotherNotLeakingExample() {
var i = arguments.length;
var args = [];
while (i--) args[i] = arguments[i];
return args
}
Workaround

13. Unmanaged Arguments
function assignToArguments() {
arguments = 3;
return arguments;
}
There’s no workaround, just remove this.

14. Switch-Case
function over128Cases(c) {
switch(c) {
case 1: break;
case 2: break;
case 3: break;
...
case 128: break;
case 129: break;
}
}
Use if else or Array of Function

15. For-In
function nonLocalKey1() {
var obj = {}
for(var key in obj);
return function() {
return key;
};
}
Always use local variable
var key;
function nonLocalKey2() {
var obj = {}
for(key in obj);
}
The key is not a local variable

16. For-In
function hashTableIteration() {
var hashTable = {"-": 3};
for(var key in hashTable);
}
Use simple enumerable object
The object being iterated is not a
“simple enumerable"

17. For-In
Object.prototype.fn = function() {}; Except Object.create(null)
The object has enumerable properties
in its prototype chain

18. For-In
function iteratesOverArray() {
var arr = [1, 2, 3];
for (var index in arr) {
}
}
Always use Object.keys and
iterate over array using for loop
function inheritedKeys(obj) {
var ret = [];
for(var key in obj) {
ret.push(key);
}
return ret;
}

19. let
let a = 0;
a += 5;
Workaround
let a = 0;
let b = 3;let a = 0, b = 3;
let a = 0;
a = a + 5;

20. For-In
Infinite loops with deep logic exit conditions
or unclear exit conditions
while (true) { for (;;) {

21. Thank You