V8 javascript engine for フロントエンドデベロッパー
•
10 likes•5,975 views
V8 is Google's open source JavaScript engine that is used in Chrome and Node.js. It uses several optimization techniques like hidden classes, inline caching, and TurboFan to improve JavaScript performance. V8 first parses JavaScript into an AST, then compiles it into bytecode which is executed by the Ignition bytecode interpreter or optimized by TurboFan into machine code using techniques like hidden classes to optimize property access and inline caching to optimize function calls.
![AST Rewriter
javascript Spread
var x = [1,2,3];
var y = […x];
V8 AltJS](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-20-320.jpg)
![AST Rewriter
do {
$R = [];
for ($i of x) %AppendElement($R, $i);
$R
} // src/parsing/parser.cc
do for-of](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-21-320.jpg)
![Abstract Syntax Tree
var EXPRESSION STATEMENT
CALL RUNTIME [IniOalizeVarGlobal]
LITERAL (x)
LITERAL (100)
x
100
?](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-24-320.jpg)
![// 擬似的なjavascriptコード !
var Bytecodes = [0,1,2,3]
var index = 0;
function dispatch(next) {
BytecodeHandlers[next]();
}
const BytecodeHandlers = {
['0']() {...; dispatch(Bytecodes[index++])},
['1']() {...; dispatch(Bytecodes[index++])},
['2']() {...; dispatch(Bytecodes[index++])},
['3']() {...; dispatch(Bytecodes[index++])}
}
const firstBytecode = Bytecodes[index++];
BytecodeHandlers[firstBytecode](firstBytecode);](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-30-320.jpg)
![Map
function Point(x, y) {
this.x = x;
this.y = y;
}
Map
FixedArray [
{a: {offset: 0}},
{b: {offset: 1}}
]](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-52-320.jpg)
![Map Transition
function Point(x, y) {
this.x = x;
this.y = y;
}
Map
FixedArray [
{x: {offset: 0}},
{y: {offset: 1}},
transiOon: {address: …}
]
var x = new Point(1, 1);
x.z = 1;
Map
FixedArray [
{x: {offset: 0}},
{y: {offset: 1}},
{z: {offset: 2}}
]
transition](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-55-320.jpg)
![class X {add() {return 1}}!
class Y {add() {return 2}}!
var m = [new X(), new X(), new Y()];!
for (let i = 0; i < m.length; i++) {!
m[i].add();!
}!
!](https://image.slidesharecdn.com/v8-170527074744/85/V8-javascript-engine-for-57-320.jpg)
V8 javascript engine for フロントエンドデベロッパー
- 2. : @brn ( ) : : Cyberagent RightSegment AI Messenger : http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227
- 3. V8 V8 Google javascript Google Chrome javascript
- 4. V8 V8 • • Hidden Class • Inline Caching • GC • 2016 • CPU Mips Arm X64 X86 7
- 6. V8 Code base V8 108 C++ …
- 7. V8 Source AST Bytecode Graph Assembly
- 8. Parsing V8 AST AST AbstractSyntaxTree
- 10. Abstract Syntax Tree IF CONDITION THEN BLOCK EXPRESSION STATEMENT ASSIGN VAR PROXY (X) LITERAL (100) if (x) { x = 100
- 12. Parsing V8
- 15. Lazy Parsing V8
- 17. Dive into Parsing V8 Parsing https://docs.google.com/presentation/d/1b- ALt6W01nIxutFVFmXMOyd_6ou_6qqP6S0Prmb1iDs/present? slide=id.p
- 18. Abstract Syntax Tree V8 yacc lex
- 22. Abstract Syntax Tree AST V8 AST AST …
- 25. Abstract Syntax Tree V8 Runtime C++ AST AST
- 26. AST to Bytecode AST AST Bytecode V8 Bytecode 1Byte Bytecode VM Ignition
- 29. Igniton
- 31. Igniton Dispatch Table 00 01 02 04 08 0f 10 10 Node Node Node MachineCode MachineCode IGNITION_HANDLER Entry Function(Machine Code) グラフからコードを生成 生成したコードを、 DispatchTableの対応する バイトコードのインデックスへ 登録
- 32. Igniton Ignition AST V8 AST v8::internal::AstVisitor<Subclass> AstVisitor Visitor AST
- 35. Igniton Dispatch Table Entry Function(Machine Code) BytecodeArray Dispatch Tableから対応するHandlerを取り出して実行 0 1 3 4 5 6 7 8 8 6 1
- 37. Code Generation Bytecode Bytecode BytecodeHandler
- 38. IGNITION_HANDLER(JumpIfToBooleanFalse, InterpreterAssembler) {! Node* value = GetAccumulator();! // Accumulatorの値を取得! Node* relative_jump = BytecodeOperandUImmWord(0);! // 引数のoperandを取得! Label if_true(this), if_false(this);! BranchIfToBooleanIsTrue(value, &if_true, &if_false);! // valueがtrueならif_true、falseならif_false! Bind(&if_true);! Dispatch();! Bind(&if_false);! // operandのbytecodeまでjump! Jump(relative_jump);! }!
- 41. IGNITION_HANDLER(ForInContinue, InterpreterAssembler) {! ...! Branch(WordEqual(index, cache_length), &if_true, &if_false);! Bind(&if_true);! {! SetAccumulator(BooleanConstant(false));! Goto(&end);! }! Bind(&if_false);! {! SetAccumulator(BooleanConstant(true));! Goto(&end);! }! ...! }!
- 42. Code Generation MacroAssembler MacroAssembler Assembler V8 masm MacroAssembler
- 43. #define __ ACCESS_MASM(masm)! ! static void Generate_StackOverflowCheck(...) {! ! __ LoadRoot(kScratchRegister, Heap::kRealStackLimitRootIndex);! __ movp(scratch, rsp);! ! __ subp(scratch, kScratchRegister);! __ sarp(scratch, Immediate(kPointerSizeLog2));! ! __ cmpp(scratch, num_args);! ! __ j(less_equal, stack_overflow, stack_overflow_distance);! }!
- 44. Code Generation GraphResolver CodeGenerator Graph MacroAssembler Assembler
- 45. Code Generation MacroAssembler Graph Graph • CodeStubAssembler • CodeAssembler • RawMachineAssembler • MachineOperatorBuilder
- 48. Optimization V8 3 • Hidden Class • Inline Caching • TurboFan
- 49. Hidden Class javascript class prototype • •
- 50. Hidden Class V8 function Point(x, y) { this.x = x; this.y = y }; var point = new Point(1, 1); Point
- 51. Map V8 • • • Map Map Map
- 53. Map javascript
- 54. Map Transition V8 transition Map Map
- 57. class X {add() {return 1}}! class Y {add() {return 2}}! var m = [new X(), new X(), new Y()];! for (let i = 0; i < m.length; i++) {! m[i].add();! }! !
- 58. Inline Caching 初回 V8 add Receiver Map Cached address 1. Search 2. Check 4. Cache 3. Call
- 60. Inline Caching Inline Caching 4 • Premonomorphic • Monomorphic • Polymorphic • Megamorphic
- 63. Polymorphic Polymorphic Receiver Polymorphic Map Monomorphic IC
- 66. (Load/Store)IC_Miss 二回目以降 V8 add Receiver (y) Map Cached address (x) 1. Search 2. Compare Map x !== y 3. (Load/Store)IC_Miss
- 67. Optimized Compilation V8 Bytecode Generic Runtime
- 68. Hot Spot V8 • •
- 70. On Stack Replacement for (let i = 0; i < 10000; i++) { doSomething(i); } JumpLoop LoopHeader SlowCode FastCode PC( )
- 71. Function Call Tracing Ignition Return Bytecode BytecodeHandler Interrupt Body
- 73. TurboFan V8 Graph Graph TurboFan
- 74. TurboFan TurboFan • Loop peeling / Loop elimination • Escape analysis • Lowering • Effect and control linearize • Dead code elimination • Control flow optimization • Memory optimization
- 75. Deoptimization Map overlow 0 … V8 Bytecode
- 77. V8 GC V8 GC