The Architecture of Web Browsers

How Web Browsers Work

- The Architecture and how the different components work together

- How the Rendering Engine works

How Web Browsers Work

- The following diagram illustrates the parts of a web browser and how they interact with each other.

User Interface

This is the user interface for the browser. It includes the Address Bar, back button, Bookmarking options, Refresh button, etc.

The browser’s user interface is not specified in any formal specification, but comes from practices shaped over decades of experience (and browsers copying each other).

As a result, all browsers have UIs that are extremely similar to each other.

The Browser Engine

The browser engine marshals actions between the browser’s user interface and the browser’s rendering engine.

When you type in a new website and press the enter key, the browser UI will tell the browser engine, which will then communicate with the rendering engine.

The Rendering Engine

The rendering engine is responsible for displaying the requested content.

The rendering engine will start by getting the contents of the requested document from the networking layer.

It takes in the HTML code and parses it to create the DOM (Document Object Model) tree.

The rendering engine will then parse the CSS to build the CSSOM (CSS Object Model). It’s like the DOM, but for the CSS rather than the HTML.

While the CSS is being parsed and the CSSOM is being created, the browser is downloading other assets through the Network Layer like JavaScript files.

The rendering engine communicates with the JavaScript engine to execute the JavaScript code and manipulate the DOM and CSSOM.

The rendering engine then takes the DOM and the CSSOM and combines them to create the Render tree.

The rendering engine then uses the UI backend for laying out the website on the screen and finally painting the pixels on the screen.

The entire process that the rendering engine goes through is called the Critical Rendering Path.

Examples of rendering engine include

- Safari - WebKit Rendering Engine

- Chrome - Blink Rendering Engine (Blink is a fork of WebKit)

- FireFox - Gecko Rendering Engine

Here’s a more detailed look at the flow for WebKit

Networking Layer

The Networking Layer is responsible for making network calls to fetch resources.

It imposes the right connection limits, formats requests, deals with proxies, caching, and much more.

You can read more about the Networking Layer here.

JavaScript Engine

The JavaScript Engine is used to parse and execute JavaScript code on the DOM or CSSOM. The JavaScript code is provided by the web server, or it can be provided by the web browser (browser extensions or features of the browser like automatic ad-blocking).

Early browsers used JavaScript interpreters, but modern JavaScript engines use Just-In-Time compilation for improved performance.

Examples of JavaScript Engine include

- Chrome - V8 JavaScript Engine

- Safari - JavaScriptCore

- FireFox - SpiderMonkey Engine

UI Backend

This layer is responsible for drawing the basic widgets like select or input boxes and windows. Underneath it uses operating system UI methods.

The rendering engine uses the UI backend layer during the layout and painting stages to display the web page on the browser.

Data Storage

The browser needs to save data locally (cookies, cache, etc.) so the Data Storage component handles this part.

Modern browsers also support storage mechanisms like localStorage, IndexedDB, and FileSystem. This is a great article on all the options for browser-side storage.

We’ve just covered the surface level here, if you’d like to dig deeper on how the HTML and CSS parsers work as well as how the JavaScript Engine works, read the full blog post here.