Browser Overview

A browser is software that lets you access and view information on the World Wide Web. Modern browsers are sophisticated applications with multiple subsystems working together to fetch, parse, render, and display web content.

Understanding browser architecture helps you understand performance bottlenecks, rendering behavior, and how your code interacts with the browser.

Main Structure of a Browser

A browser consists of several major components, each with specific responsibilities.

User Interface (UI)

The user interface displays page contents and interacts with the user. It includes the address bar, back/forward buttons, bookmarks, tabs, and other controls.

The UI takes user input like URLs, clicks, and form data, and sends commands to the Browser Engine for processing.

Browser Engine

The browser engine acts as the communication bridge between the UI and the core components (rendering engine and JavaScript engine).

It instructs the rendering engine what and when to render, handles communication between user actions and web content, computes CSS units (like converting pixels to device pixels), and manages tabs, navigation stack, back-forward cache, timers, and user interactions.

Examples of browser engines:

• Blink (Chrome, Edge, Opera)
• WebKit (Safari)
• Gecko (Firefox)

Rendering Engine

The rendering engine is responsible for visual output. It converts web code (HTML, CSS, JavaScript) into pixels you see.

Steps inside rendering:

1. Parse HTML → Build DOM Tree
2. Parse CSS → Build CSSOM Tree
3. Combine → Render Tree
4. Layout → Compute positions and sizes
5. Reflow → Recalculate layout (triggered by DOM/CSS changes)
6. Painting → Draw pixels on screen
7. Repaint → Redraw pixels without re-layout (e.g., color change)

Networking Layer

The networking layer handles all communication with servers.

It sends HTTP/HTTPS requests, manages DNS lookup, TCP handshake, and SSL/TLS encryption, receives and decodes responses, downloads resources (HTML, CSS, JavaScript, images), handles redirects, compression (gzip/br), and caching, and manages cookies, cache, and security (SSL/TLS).

Timers and performance:

• Measures network latency
• Implements keep-alive and connection pooling
• Uses service workers and HTTP cache to reduce network calls

JavaScript Engine

The JavaScript engine executes JavaScript code embedded in web pages.

Core features:

• Parses and compiles JavaScript into bytecode or machine code
• Performs Just-In-Time (JIT) compilation for speed
• Optimizes frequently executed code
• Handles the event loop, callbacks, promises, and async/await

Event Loop and Timers:

• Call Stack: Executes functions in order
• Event Queue: Stores asynchronous tasks
• Timers: setTimeout(fn, delay) for single callback, setInterval(fn, delay) for repeated execution
• Microtasks (Promises, MutationObservers) run before the next macro task

Examples of JavaScript engines:

• V8 (Chrome, Edge, Opera)
• SpiderMonkey (Firefox)
• JavaScriptCore (Safari)

These engines compile JavaScript to machine code for faster performance.

UI Backend

The UI backend is responsible for drawing basic widgets like address bar, back button, tabs, and windows using OS-level libraries (e.g., Windows UI APIs, macOS Cocoa).

In short, the UI Backend paints the browser’s outer shell, while the Rendering Engine paints the web page inside it.

Data Storage

Browsers store various kinds of data locally:

• Cookies
• Cache
• LocalStorage / SessionStorage
• IndexedDB
• Bookmarks / History

Simplified Diagram

+-----------------------------------+
|           User Interface          |
+-----------------+-----------------+
|    Browser Engine (Controller)    |
+-----------------+-----------------+
| Rendering Engine|JavaScript Engine|
+-----------------+-----------------+
|    Networking   |   UI Backend    |
+-----------------+-----------------+
|        Data Persistence (Storage) |
+-----------------------------------+

Simple Analogy

Think of your browser like a restaurant:

• You (user): Place an order (type a URL)
• Browser engine: The supplier who takes your order and coordinates everything
• Rendering engine: The chef who prepares the meal (draws the webpage)
• JavaScript engine: The assistant chef who handles dynamic tasks (scripts)
• Network module: The waiter bringing ingredients (files) from the web

How Components Work Together

When you type a URL:

1. UI receives the URL
2. Browser Engine initiates the loading process
3. Networking Layer sends an HTTP request to the server
4. Rendering Engine receives HTML and begins parsing
5. Browser Engine coordinates fetching CSS and JavaScript
6. JavaScript Engine executes scripts
7. Rendering Engine paints the page
8. UI Backend displays the browser chrome
9. Data Storage caches resources for future use

Multi-Process Architecture

Modern browsers use a multi-process architecture for stability and security.

Chrome’s process model:

• Browser Process: Manages the UI, networking, and storage
• Renderer Process: One per tab, runs the rendering engine and JavaScript engine
• GPU Process: Handles graphics and compositing
• Plugin Process: Isolates plugins like Flash (deprecated)
• Extension Process: Isolates browser extensions

Benefits:

• If one tab crashes, others continue working
• Security: Tabs are sandboxed and isolated
• Performance: Parallel processing of multiple tabs

Summary

Understanding browser architecture gives you insight into performance optimization, debugging, and how web standards are implemented. Each component plays a crucial role in delivering the web experience users expect.