DEV Community

loading...

How Javascript Engine's Work?

varunprashar5
ใƒป2 min read

๐—๐—ฎ๐˜ƒ๐—ฎ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—˜๐—ป๐—ด๐—ถ๐—ป๐—ฒ is a program that executes the javascript code. These days relevant modern engines use just-in-time compilation for improved performance. (As per Wikipedia)

javascript engine

๐——๐—ถ๐—ณ๐—ณ๐—ฒ๐—ฟ๐—ฒ๐—ป๐˜ ๐˜€๐˜๐—ฒ๐—ฝ๐˜€ ๐—ผ๐—ณ ๐—๐—ฎ๐˜ƒ๐—ฎ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—ฒ๐—ป๐—ด๐—ถ๐—ป๐—ฒ ๐—ฝ๐—ถ๐—ฝ๐—ฒ๐—น๐—ถ๐—ป๐—ฒ ๐—ฎ๐—ฟ๐—ฒ (Generic for any JS Engine):

  1. Javascript source code is passed to "Parser"

  2. Parser divides the code into multiple tokens

  3. It is converted into AST (Abstract Syntax Tree), a tree-like structure that represents functions, conditionals, scopes etc.

  4. This AST is passed to the interpreter which converts the code into Bytecode.

  5. At the same time engine is actually running the Javascript code

  6. Bytecode is used by optimizing compiler along with profiling data

  7. "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.

๐—Ÿ๐—ฒ๐˜'๐˜€ ๐˜€๐—ฒ๐—ฒ ๐˜๐—ต๐—ฒ๐˜€๐—ฒ ๐—ถ๐—ป ๐—ฉ๐Ÿด:

  1. Interpreter is called "Ignition".
  2. Optimizing compiler is called "TurboFan".
  3. 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

Discussion (0)