The components of a browser

#webdev #architecture #javascript #browser

In this series, we are going to explore the components of a browser and go over the details of each component. The purpose of this series is to help you understand what's going on under the hood of a browser and improve your understandings of the web.

The overall structure of a browser

In this first part of the series, we're going to explore the overall structure of a browser. The basic components of a browser are as follows:

User Interface: This unit includes things that are specific to each type of browsers and are not created by the web. It defines the layout of elements available for user to interact in the browser window except for the web page itself. The elements for interaction includes the address bar, the refresh, back, forward buttons, the bookmark bar, etc.
Browser Engine: This unit handles the interactions between the user interface and the rendering engine. The browser engine is the part that receives the input from the UI and processes it to command the render engine. It’s a middle man who sits between UI and Render Engine to connect those 2 parts.
Rendering Engine: It is the unit responsible for rendering/displaying the requested content on the browser window, which is one of the most expensive operations in the browser. For example, if an HTML page is requested, then it is responsible for parsing HTML and CSS, and display the parsed and formatted content on the screen. The most popular rendering engines are:
- Blink – Used in Google Chrome, Microsoft Edge, and Opera browsers. Blink is based on Webkit.
- WebKit – Used in Safari browsers.
- Gecko – Used in Mozilla Firefox browsers.
Networking: This unit handles HTTP calls and other network-related tasks.
JavaScript Interpreter: It is a unit used to parse and execute the JavaScript code in a web page. There are different types of JS engines used by different browsers to analyse, parse and execute. The most popular ones are:
- V8 (C++) – Used in Google Chrome and Microsoft Edge.
- SpiderMonkey (C/C++) – Used by Mozilla Firefox.
- JavaScriptCore (Nitro) – Used by Safari.
UI Backend: This unit uses the user interface methods of the underlying operating system. It is mainly used for drawing basic widgets like a select box, an input box, a check box, etc.
Data Persistence: A web browser needs to store various types of data locally, for example, cookies, localStorage, local cache, etc. As a result, browsers must be compatible with data storage mechanisms such as WebSQL, IndexedDB, FileSystem, etc.

A deep dive into each component

In the upcoming parts of this series, we're going to explore each component in depth. As a web developer, the 4 most significant components that you need to care about are Browser Engine, Rendering Engine, and JavaScript Interpreter, Data Persistence. For the other components, I will be brief because most of the time, a web developer doesn't even have to care about them.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.