Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How JS Works

How JS Works

pipopotamasu

May 27, 2020
Tweet

More Decks by pipopotamasu

Other Decks in Programming

Transcript

  1. 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` `(` `)` `{` `}`
  2. (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
  3. 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`
  4. parser(V8) pre parser(V8) ɾAST generator from JavaScript code ɾGenerate AST

    immediately ɾAST generator from JavaScript code ɾGenerate AST on demand
  5. 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)
  6. 4. Generating machine code • Interpreter generates Machine code from

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

    Byte code. • Ready for manipulating by CPU ! • The End…
  8. 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…
  9. 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.
  10. JIT compiler(V8) ɾAbbreviation of Just In Time ɾJIT compiler generates

    machine code when the program runs. ɾV8 JIT compiler is called `TurboFan`.
  11. 6. Deoptimization • Turbo fan can not optimize all code.

    • Example code which can not optimize. • Then Turbo fan restores byte code.
  12. 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