Browser Architecture: Engines and Rendering

d8 --print-bytecode v8script.js
We get the following output in bytecode format

Style calculations, Layout, Paint / composite



JavaScript engines run alongside the browser's rendering engine. When you visit a website: The browser will first of all fetch HTML, CSS and JavaScript files.
JavaScript engine in the browser will parse and execute those scripts.
The rendering engine combines the processed HTML, CSS, and JavaScript to display the webpage.

Rendering engines (also known as layout engines or browser engines) are part of a web browser that transforms HTML, CSS, and other resources of a web page into a visual representation on a screen. Common rendering engines include: BlinkGeckoWebKit
Rendering is the process of updating the UI, including: Layout (calculating element positions and sizes) Painting (drawing pixels on the screen) Compositing (assembling layers for display)

Whereas HTML defines a webpage's structure and content and CSS sets the formatting and appearance, JavaScript adds interactivity to a webpage and creates rich web applications. However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model).


A JavaScript engine is simply a computer program that executes JavaScript code. It's responsible for translating human-readable JavaScript code into machine-readable instructions that the computer's hardware can execute. When you write JavaScript code and run it in a browser, the code doesn't directly interact with your computer's hardware. Instead, it interacts with the JavaScript engine, which acts as an intermediary between your code and the underlying machine.
Any JS engine always contains a call stack and a heap. The call stack is where our code gets executed with the help of the execution context.

At a high level, you could say that a JavaScript engine is a program that takes your JavaScript (JS) code and turns it into something that your computer can actually run. Each browser has their own JavaScript engine, designed to deliver the best performance to their users:

In a browser, the JavaScript engine operates together with the rendering engine via the Document Object Model and Web IDL bindings. Some JavaScript engines also execute WebAssembly code in the same sandbox as regular JavaScript code. Do not confuse JavaScript engines with rendering engines, which are also crucial parts of browsers.

In compilation, the entire code is converted into machine code at once and written in a binary file that can be executed by a computer. In interpretation, the interpreter runs through the source code and executes it line by line. The code still needs to get converted into machine code, but this time it is happening line by line while executing the program. JS used to be a purely interpreted language.
But the modern JS engine now use a mix of compilation and interpretation which is known as "just-in-time" compilation In JIT compilation, the entire code is converted into machine code at once and then executed immediately.

You may wonder what's the difference between the compilation and JIT. Well, there's one major difference: after compilation, the machine code is stored in a portable file. It can be executed at any time – there's no need to rush immediately after the compilation process. But in the case of JIT, the machine code needs to execute as soon as the compilation ends. I'm not going to go in-depth into these concepts, but now you hopefully understand the basics of the compilation, interpretation and JIT.
During this parsing process, the code is parsed into a data structure called the AST (Abstract Syntax Tree). This works by first splitting up each line of code into pieces that are meaningful to the language (like the const or function keywords), and then saving all these pieces into the tree in a structured way. This step also checks if there are any syntax errors. The resulting tree will later be used to generate the machine code.
The next step is compilation. Here the engine takes the AST and compiles it to machine code.
But this is not the end. The modern JS engine generates inefficient machine code just to execute the program as fast as possible. Then the engine takes the already pre-compiled code to optimise and recompile the code during the already running program execution. All this optimisation happens in the background


Browser architecture, template, storage types, engines browser/ rendering/ js JS engine controls call stack and heap, manage memory/ garbage collection, compilation to binary


Parsing -> AST -> Byte code -> Machine code -> Code runs on CPU


JavaScript engines are interpreters that parse and execute JavaScript code. Modern JavaScript engines use just-in-time (JIT) compilation to convert JavaScript code into machine code that can be executed by a computer's processor. A JavaScript engine is typically developed and used in web browsers to run client-side code but can also be used in server-side environments like Node.js.

Modern engines use multiple techniques to make sure your JavaScript runs fast and is memory efficient: JIT Inline Caching In the process of accessing an object property, Engine checks Cache locations at first, if it is found that will reduce the overall execution time used to lookup for a place where property actually is. Example: It basically means if you access user.name multiple times, engine will remember object where user data is stored so that next time it does not have to find that object again and it can be directly accessed.

In summary, machine code is more closely tied to the hardware and is platform-specific, while bytecode provides a level of abstraction that allows for greater portability across different platforms. The trade-off is often between performance (machine code) and portability (bytecode)💡.

Machine code is a low-level programming language that directly represents the instructions executed by a computer’s central processing unit (CPU). It consists of binary code, usually in the form of a sequence of 0s and 1s, which corresponds to specific CPU instructions. Machine code is executed directly by the computer’s hardware. Each instruction in machine code corresponds to a specific operation that the CPU can perform. Machine code is often specific to a particular computer architecture or CPU.

The renderer process takes care of - HTML parsing - CSS parsing - Image decoding - JavaScript interpreter - Regular expressions - Layout - Document Object Model - Rendering - SVG - XML parsing - XSLT
The browser process takes care of - Cookie database - History database - Password database - Window management - Location bar - Safe Browsing blacklist - Network stack - SSL/TLS - Disk cache - Download manager - Clipboard

The browser tries to render around 60 times per second, which is roughly every 16 ms (a frame).


The browser’s high level structure The key elements of the browser comprise:
1. User Interface: This encompasses the address bar, back/forward buttons, and bookmarking menu. It encompasses every aspect of the browser display except the main window where the requested page is visible.
2. Browser Engine: This is the interface for querying and manipulating the rendering engine.
3. Rendering Engine: Its primary role is to display the requested content. For instance, when the requested content is in HTML, it handles tasks like parsing the HTML and CSS and presenting the parsed content on the screen.
4. Networking: Utilized for network calls, like HTTP requests, with a platform-independent interface that includes specific implementations for each platform.
5. UI Backend: Employed for drawing fundamental widgets such as combo boxes and windows. It provides a generic interface not tied to any particular platform, using the underlying operating system’s user interface methods.
6. JavaScript Interpreter: This interprets and executes JavaScript code.
7. Data Storage: As a persistence layer, this component ensures that the browser can store various data types, such as cookies, on the hard disk. The HTML5 specification introduces a ‘web database,’ a lightweight database integrated into the browser.

• Style – apply CSS rules
• Layout – calculate positions and sizes
• Paint – draw pixels
• Composite – assemble layers for display