JavaScript Architecture
JavaScript is everywhere. JavaScript running on browsers, servers, and even devices like robots. This is possible because of JavaScript Runtime Environment (JRE). The JRE acts as a container that contain all the components required to execute JavaScript code. These components include the JavaScript Engine, APIs (like Web APIs), Event Loop, Callback Queue, and Microtask Queue. In essence, the JRE provides the infrastructure needed to run JavaScript code efficiently.
JavaScript Runtime Environment is lies the JavaScript Engine, often referred to as the “heart” of the runtime environment. Without the JavaScript Engine, the JRE would not function.
JavaScript is most commonly executed in browsers since every browser provides a JavaScript Runtime Environment. The APIs available within the JRE differ depending on the environment:
- In browsers, APIs like DOM manipulation, fetch, and setTimeout are provided as part of the Web API.
- In Node.js, APIs for file systems, networking, and process management are available.
JS Engine
The JS Engine is the heart of the JavaScript runtime environment. A JavaScript engine translates JavaScript source code into machine code that can be executed by the host system (browser or runtime). Modern engines use techniques like Just-In-Time (JIT) compilation to achieve high performance. Every browser has a JS Engine.
- Chrome has V8. Not only the Chrome, V8 also powers Node.js and Deno.
- Firefox has SpiderMonkey
- Edge has Chakra
- Safari has JavaScriptCore
The most important protocol for a JS Engine is to follow the ECMAScript Standard, which is the governing body of JavaScript. The first JS Engine, SpiderMonkey, was created by Brendan Eich, the creator of the JavaScript language. The initial JS Engine was implemented in Netscape (now Mozilla Firefox)
It is important to note that a JavaScript Engine is not hardware; it is a program written in other programming languages (e.g., V8 is written in C++) that takes JavaScript code, processes it, and generates low-level or machine code for execution.
1. JS Engine Architecture
A JavaScript Engine typically processes high-level JavaScript code in three main steps: Parsing, Compilation, and Execution.
a) Parser:
Converts JavaScript source code into a structure that the engine can understand.The process starts with lexical analysis (tokenization), where the code is broken into tokens. For example, the statement let a = 7; is tokenized into let, a, =, and 7.
There is another thing called ‘Syntax Parser’. It read the code tokens after tokens and see if the grammar is correct. These tokens are then used to construct an Abstract Syntax Tree (AST), which represents the syntactic structure of the code.
b) Compilation (JIT Compilation):
Compilation and execution is done in parallel The JavaScript engines use a Just-In-Time (JIT) compiler to combine the benefits of both interpreters and compilers:
- Interpreters: Execute code line-by-line, making them faster for initial execution but slower overall for repeated operations.
- Compilers: Convert the entire code into optimized machine code before execution, making them slower to start but faster during execution.
Initially, JavaScript was interpreted, but modern engines user JIT to combine interpretation and compilation to achieve high performance.
Get Umair Saeed’s stories in your inbox
Join Medium for free to get updates from this writer.
Once the AST (Abstract Syntax Tree) is created, it is sent to an interpreter, which converts it into bytecode. This bytecode is then executed, while a compiler may work in parallel to optimize the code for better performance. Instead of compiling the entire code before running it (as traditional compilers do), modern JavaScript engines use a method called Just-In-Time (JIT) compilation. This means the code is compiled and optimized while the program is running. This approach ensures the program starts quickly and improves performance over time, making the execution both faster and more efficient.
The JIT Compiler optimizes “hot code” (frequently executed sections) during runtime, applying techniques like:
- Inlining: Replacing function calls with their actual code.
- Copy Elision: Removing unnecessary object copying.
- Inline Caching: Optimizing repeated property lookups.
c) Execution:
The bytecode or machine code is then executed by the JS Engine. The execution relies on two key components.
- Call Stack: Keeps track of function calls. Each function call adds a frame to the stack, and when the function returns, its frame is removed.
- Memory Heap: Stores objects and variables that the application uses.
V8 Engine use Ignition Interpreter and alone with TruboFan Compiler.
2. Garbage Collection
Memory management is an essential part of JavaScript engines. The Garbage Collector (GC) is responsible for reclaiming memory occupied by objects that are no longer in use. Modern engines use the Mark-and-Sweep Algorithm:
- Mark: Identify all objects that are still reachable.
- Sweep: Reclaim memory occupied by unreachable objects.
Advanced techniques like Generational Garbage Collection improve efficiency by categorizing objects into “young” and “old” generations, optimizing collection based on their lifetimes.
3. Browser API
Web APIs are tools provided by the browser that allow JavaScript to interact with browser features. They are not a part of the JavaScript language itself but are included in the runtime environment. These APIs enable JavaScript to do things like manipulate web pages (DOM), fetch data from servers, or work with graphics and animations.
4. Callback/Task Queue
The callback queue, also called the task queue, stores functions and events from asynchronous operations (like setTimeout or click events) that are ready to run. Tasks in the queue are handled in a First In, First Out (FIFO) order. When the call stack (where functions are executed) is empty, the event loop moves the next task from the callback queue to the stack for execution.
5. Microtask Queue
The microtask queue is like the task queue but has higher priority. It handles tasks such as promise resolutions and mutation observers. Microtasks are always processed before regular tasks in the callback queue.
6. Event Loop
The event loop is like an endless cycle that keeps JavaScript running smoothly. It continuously checks the call stack and the callback queue. When the call stack is empty, it picks a task from the queue and pushes it into the stack for execution. This mechanism allows JavaScript to handle asynchronous operations even though it runs on a single thread, making it efficient and non-blocking.
