- The Architecture and how the different components work together
- How the Rendering Engine works
- The following diagram illustrates the parts of a web browser and how they interact with each other.
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 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 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.
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.
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
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.
FireFox - SpiderMonkey Engine
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.
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.
I hope this article help you to understand how the Browser work.