How Javascript Engine's Work?

𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗘𝗻𝗴𝗶𝗻𝗲 is a program that executes the javascript code. These days relevant modern engines use just-in-time compilation for improved performance. (As per Wikipedia)

𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝘀𝘁𝗲𝗽𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲 𝗽𝗶𝗽𝗲𝗹𝗶𝗻𝗲 𝗮𝗿𝗲 (Generic for any JS Engine):

Javascript source code is passed to "Parser"

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.

At the same time engine is actually running the Javascript code

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:
https://www.youtube.com/channel/UCJErruzdazYFQfDdb6avbtA