The 'inside the core' part (deep dives)
This section is for some developers who already know what a browser is but want to understand the internals, how it works under the hood, what its architecture looks like, and how different engines (Chromium, WebKit, Gecko) work and differ. We’ll also touch code, concepts, and components.
Definition and Purpose
A web browser is a client-side software application that fetches, interprets, and displays web content served over the internet. It primarily uses HTTP/HTTPS protocols to communicate with web servers and render HTML, CSS, JavaScript, images, and other assets on the screen. At its core, the browser makes network requests (such as GET and POST), parses code written in HTML, XML, CSS, or JavaScript, builds a DOM and render tree, paints the interface, and handles user input and interactivity.
At its core, the browser:
- Makes network requests (GET, POST, etc.)
- Parses code (HTML/XML/CSS/JS)
- Builds a DOM and render tree
- Paints the interface
- Handles user input and interactivity
Core Architecture of a Browser
Most modern browsers are structured using a multi-process or multi-threaded architecture for both performance and security. The User Interface (UI) encompasses components like the address bar, navigation buttons, bookmarks, and tab management. The Browser Engine acts as a mediator between the UI and the Rendering Engine, instructing the latter on how to behave and update.
The Rendering Engine is responsible for parsing HTML and CSS to construct the DOM and CSSOM, which are then merged into a render tree. This tree undergoes layout calculations and is painted onto the screen, followed by compositing. The Networking module handles HTTP/HTTPS requests, caching, proxy settings, and cookie management. The JavaScript Engine (like V8 or SpiderMonkey) parses, compiles, and executes JavaScript, managing asynchronous tasks using an event loop and callback queue.
Data Storage is managed through technologies like Web Storage (localStorage and sessionStorage), IndexedDB, the Cache API, and traditional cookies. Lastly, browsers contain essential Security Components such as sandboxing, Same-Origin Policy enforcement, CORS (Cross-Origin Resource Sharing), and Content Security Policy (CSP) mechanisms.
User Interface (UI)
- Address bar
- Back/Forward/Reload buttons
- Bookmark bar
- Tab management
Browser Engine
- Acts as a bridge between the UI and the rendering engine.
Source: by Kishan Vikani at Stack Overflow
- Controls rendering engine behavior (navigation, updates, etc.)
Source: by Kishan Vikani at Stack Overflow
Rendering Engine
The DOM (Document Object Model) represents the HTML structure as a tree of elements, while the CSSOM (CSS Object Model) captures styles and rules in a similar tree. Combined, these models create a render tree used for visual representation.
In the Layout and Paint process, each node's position and size is computed, which is known as layout or reflow. The browser then paints the visual elements onto layers and finally performs compositing to merge these layers for display.
Popular Browser Engines
Chromium / Blink (Used by Chrome, Edge, Opera, Vivaldi, Brave,...)
Chromium is an open-source base developed by Google. Blink, a fork of WebKit, is its rendering engine. Chromium uses the V8 JavaScript engine and has a highly modular architecture, supporting sandboxing and a multi-process design. The rendering lifecycle involves parsing JavaScript in V8 and executing code like:
Its architecture includes a UI process for tab and window management, a renderer process for each tab, and a GPU process to handle compositing.
Source: from Wikipedia
WebKit (Used by Safari)
WebKit, developed by Apple and originally forked from KDE's KHTML, uses JavaScriptCore for JavaScript execution. On iOS, it is typically limited to a single process for App Store security reasons. WebKit is optimized for Apple hardware, consumes less memory on mobile, but is less extensible compared to Chromium.
Source: by Tom's Guide
Gecko (Used by Firefox)
Gecko, developed by Mozilla, integrates closely with SpiderMonkey, Firefox’s JavaScript engine. It prioritizes web standards and customization. Its Quantum architecture features multi-threaded painting and Rust-powered components, including the Stylo CSS engine. Firefox is also known for strong sandboxing and security models.
Source: by Lifehacker
JavaScript Engines (Execution Details)
All major JavaScript engines follow a similar process: they parse code into an Abstract Syntax Tree (AST), compile it to bytecode, and further optimize it into native machine code. They also perform automatic garbage collection and manage memory efficiently.
Security in Browsers
Browsers implement sandboxing to isolate tabs and reduce the risk of malicious content spreading. The Same-Origin Policy (SOP) prevents a site from accessing data of another unless explicitly allowed. Content Security Policies (CSP) help restrict resource loading and script execution. Browsers also validate SSL/TLS certificates to ensure HTTPS trust, and include anti-phishing protections through services like Google Safe Browsing.
Developer Tools & APIs
Modern browsers offer powerful developer tools and APIs. DevTools allow developers to inspect elements, monitor network activity, debug code, and trace source maps. Web APIs like the DOM API, Fetch API, WebSocket, Geolocation, and WebRTC enable rich client-side functionality. Additionally, browsers support Extension APIs, such as Chrome’s Manifest v3, for creating plugins and extensions.
Rendering Example: End-to-End
When a user enters a URL like https://example.com in the address bar, the browser first performs a DNS lookup to resolve the domain to an IP address. It then makes an HTTP GET request to fetch the page. Upon receiving the HTML, the browser downloads linked CSS, JavaScript, and images. It parses the HTML into a DOM tree and CSS into a CSSOM, combines them into a render tree, executes JavaScript, lays out elements, paints the page, and composites the output using the GPU. As the user scrolls, additional repainting and compositing occur.
Browser Source Code Examples
