How JS Works

Transcript

1. How JavaScript Works The Journey of JavaScript to Machine code 2020/05/25 Yamato Murakami
2. Agenda - Motivation - Technical terms - How JavaScript Works - Conclusion
3. Motivation
4. JS perfomance article
5. How JavaScript Works
9. 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` `(` `)` `{` `}`
10. (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
12. 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`
13. AST ɾ Abbreviation of Abstract Syntax Tree ɾCodes which tokenized and arranged as tree structure
14. parser(V8) pre parser(V8) ɾAST generator from JavaScript code ɾGenerate AST immediately ɾAST generator from JavaScript code ɾGenerate AST on demand
16. 3. Generating byte code • Interpreter generates Byte code from AST.
17. 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)
19. 4. Generating machine code • Interpreter generates Machine code from Byte code. • Ready for manipulating by CPU !
20. Machine code ɾInstruction set designed for actual CPU ɾ010010101001010100101010100101001010011
21. 4. Generating machine code • Interpreter generates Machine code from Byte code. • Ready for manipulating by CPU ! • The End…
22. 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…
24. 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.
25. JIT compiler(V8) ɾAbbreviation of Just In Time ɾJIT compiler generates machine code when the program runs. ɾV8 JIT compiler is called `TurboFan`.
27. 6. Deoptimization • Turbo fan can not optimize all code. • Example code which can not optimize. • Then Turbo fan restores byte code.
29. Conclusion
30. 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