How JavaScript Works The Journey of JavaScript to Machine code 2020/05/25 Yamato Murakami 

Agenda - Motivation - Technical terms - How JavaScript Works - Conclusion 

Motivation 

JS perfomance article 

How JavaScript Works 

No content

No content

No content

1. Fetching source code • Browser parses HTML and detect script tag. • Fetch JavaScript code from Network, Browser cache or Service worker etc… . • Encoded Code gets loaded from one of these resources via byte stream. • ex) ‘function’ <-> 0066 0075 006e 0063 0074 0069 006f 006e • Decoding loaded Code by byte stream decoder. • Pass over decoded ‘tokens' to parser. • token • function hellow () { } • `function` `hellow` `(` `)` `{` `}` 

(Byte) Stream (Byte) Stream Decoder ɾI/O abstraction between program and recourses ɹ(network, memory, file etc…) ɾOr data type abstracting stream of programming language (ex: Java) ɾDecoder which can decode encoded data in stream 

No content

2. Parsing source code • Parser builds AST from tokens. • Not all tokens are transformed to AST immediately. • Tokens needed immediately are transformed to AST (by parser). • Tokens not needed immediately transformed to AST when they are needed (by pre parser). • This system is called `lazy parsing` 

AST ɾ Abbreviation of Abstract Syntax Tree ɾCodes which tokenized and arranged as tree structure 

parser(V8) pre parser(V8) ɾAST generator from JavaScript code ɾGenerate AST immediately ɾAST generator from JavaScript code ɾGenerate AST on demand 

No content

3. Generating byte code • Interpreter generates Byte code from AST. 

Interpreter(V8) Byte code ɾByte code generator from AST ɾMachine code generator from Byte code ɾInstruction set designed for Virtual Machine CPU ɾV8 interpreter is called `ignition` ɾThe language which VM CPU can handle (like Machine code) 

No content

4. Generating machine code • Interpreter generates Machine code from Byte code. • Ready for manipulating by CPU ! 

Machine code ɾInstruction set designed for actual CPU ɾ010010101001010100101010100101001010011 

4. Generating machine code • Interpreter generates Machine code from Byte code. • Ready for manipulating by CPU ! • The End… 

4. Generating machine code • Interpreter generates Machine code and Type Feedback from Byte code. • Type Feedback • meta data to optimize machine code • Including type info, the number of execution of code • Ready for manipulating by CPU ! • The End… 

No content

5. Optimization • JIT compiler `TurboFan` generates optimized machine code from byte code and type feedback. • How does TurboFan optimize machine code ? • Skip type check • You know JavaScript is dynamical type programming language. • Example code which can optimize. 

JIT compiler(V8) ɾAbbreviation of Just In Time ɾJIT compiler generates machine code when the program runs. ɾV8 JIT compiler is called `TurboFan`. 

No content

6. Deoptimization • Turbo fan can not optimize all code. • Example code which can not optimize. • Then Turbo fan restores byte code. 

No content

Conclusion 

References • https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf • http://generator.tubudeco.com/g519/ • https://www.youtube.com/watch?v=voDhHPNMEzg • https://v8.dev/blog/preparser • https://stackoverflow.com/questions/54957946/what-does-v8s-ignition-really-do • https://v8.dev/blog/launching-ignition-and-turbofan • https://blog.hiroppy.me/entry/2017/08/03/095304 • https://docs.google.com/presentation/d/ 1OqjVqRhtwlKeKfvMdX6HaCIu9wpZsrzqpIVIwQSuiXQ/ edit#slide=id.g1357e6d1a4_0_58