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.
- V8 (C++) – Used in Google Chrome and Microsoft Edge.
- SpiderMonkey (C/C++) – Used by Mozilla Firefox.
- 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