𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝘀𝘁𝗲𝗽𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲 𝗽𝗶𝗽𝗲𝗹𝗶𝗻𝗲 𝗮𝗿𝗲 (Generic for any JS Engine):
Parser divides the code into multiple tokens
It is converted into AST (Abstract Syntax Tree), a tree-like structure that represents functions, conditionals, scopes etc.
This AST is passed to the interpreter which converts the code into Bytecode.
Bytecode is used by optimizing compiler along with profiling data
"Optimizing compiler" make certain assumptions based on profiling data and produces highly optimized machine code.
Sometimes there is a case where the 'optimization' assumption is incorrect and then it goes back to the previous version via the "Deoptimize" phase (where it actually becomes the overhead to us)
JS Engine usually optimizes "hot functions" and uses inline caching techniques to optimize the code.
𝗟𝗲𝘁'𝘀 𝘀𝗲𝗲 𝘁𝗵𝗲𝘀𝗲 𝗶𝗻 𝗩𝟴:
- Interpreter is called "Ignition".
- Optimizing compiler is called "TurboFan".
- Apart from Parser, there is a "pre-parser" that checks for syntax and tokens
𝗔 𝗿𝗲𝗰𝗲𝗻𝘁 𝘂𝗽𝗱𝗮𝘁𝗲 𝗶𝗻 𝗩𝟴: "Sparkplug" is introduced which is present between "Ignition" & "TurboFan" which is also called Fast Compiler.
𝗡𝗼𝘁𝗲: These are high-level step's that most of the JS engines goes through and every engine goes through their own set of steps for further optimizations.
They do have stack, heap, garbage collector and is out of scope for this post.
Do share more about JS engines in the comments
Checkout my youtube channel for more such content: