Web Browser Architecture

Web Browser Architecture

1. What is a Web Browser?

A web browser is a client-side software application that requests, receives, interprets and renders web resources (HTML, CSS, JavaScript, images) from web servers using HTTP/HTTPS, presenting them as a graphical page to the user. Examples: Chrome, Firefox, Edge, Safari, Opera, and the older Netscape Navigator / Internet Explorer.

2. High-Level Components of a Browser

 +---------------------------------------------------------------+
 |                      USER INTERFACE (UI)                      |
 |  back/fwd, reload, home, address bar, bookmarks, progress bar |
 +------------------------------+--------------------------------+
                                |
 +------------------------------v--------------------------------+
 |                      BROWSER ENGINE                           |
 |   bridges UI <-> rendering engine (handles actions like       |
 |   'load this URL', 'back', 'reload')                          |
 +------------------------------+--------------------------------+
                                |
 +------------------------------v--------------------------------+
 |                     RENDERING ENGINE                          |
 |   parses HTML/CSS -> DOM + CSSOM -> Render tree -> Layout     |
 |   -> Paint -> Display. (Blink/Chromium, Gecko, WebKit)        |
 +---------+--------------------------+-------------------------+
           |                          |
 +---------v---------+      +---------v----------+
 |  NETWORKING LAYER |      |  JS INTERPRETER    |
 |  HTTP, DNS, TLS,  |      |  parses & executes |
 |  caching, cookies |      |  JavaScript (V8,   |
 |  (fetches URL)    |      |  SpiderMonkey)     |
 +---------+---------+      +--------------------+
           |
 +---------v---------+     +-------------------------+   +----------------+
 |   UI BACKEND      |     |  DATA PERSISTENCE       |   |   PLUGINS /    |
 | (draw widgets:    |     | (cookies, cache, local  |   |   EXTENSIONS   |
 |  combobox, etc.)  |     |  storage, IndexedDB)    |   | (PDF, Flash)   |
 +-------------------+     +-------------------------+   +----------------+

3. Component Roles

Component	Responsibility
User Interface	Everything except the page window — address bar, back/forward/reload/home buttons, bookmarks menu, status/progress bar, settings
Browser engine	The "brain" between UI and rendering engine; routes user actions (e.g. reload → render engine; back → history + network)
Rendering engine	Displays requested content — parses HTML to DOM, CSS to CSSOM, builds the render tree, computes layout (reflow), paints pixels. Every browser has its own: Chrome → Blink, Firefox → Gecko, Safari → WebKit
Networking	Handles all HTTP/HTTPS requests, DNS resolution, TLS handshake, cookie header handling, cache lookups (per rendered document context, with security restrictions like same-origin policies)
JavaScript interpreter	Parses and executes JS code (V8, SpiderMonkey, JavaScriptCore), passing results back to the rendering engine
UI backend	Draws core widgets (combo boxes, scrollbars, dialogs) — exposes a generic OS-independent interface
Data persistence	Local storage of cookies, cache, browsing history, passwords, localStorage/IndexedDB
Plugins/Extensions	External content handlers (PDF viewer, media codecs, ad blockers)

4. Rendering Engine Workflow (Critical Rendering Path)

1. Parse HTML → build the DOM tree.
2. Parse CSS → build the CSSOM tree (also handles inline styles & media queries).
3. Combine DOM + CSSOM → Render tree (only visible nodes).
4. Layout (reflow) — compute exact geometry/position of each node.
5. Paint — fill pixels (text, colours, images, borders) in layers.
6. Composite — merge layers and display on screen.

<script> tags block parsing (parser pauses until JS executes) — hence async/defer attributes and CSS placement in <head> vs blocking style at render.

5. Key Concepts

• Same-Origin Policy (SOP): scripts can access only data from the same origin (protocol + host + port) — the browser's main defence against cross-site attacks; cross-origin access needs CORS headers.
• Session vs persistent cookies: session cookies live in memory until the browser closes; persistent cookies carry an expiry date and are stored on disk.
• Caching: memory cache (current session, RAM) and disk cache (across sessions) reduce network traffic; controlled by HTTP headers (Expires, Cache-Control, ETag).
• History: back/forward stack of visited URLs.
• Proxy configuration: browser can route HTTP/HTTPS/FTP via a proxy server with exceptions.

6. Exam Points

• Draw and explain the architecture of a web browser with all components — 10 marks (very frequent).
• Explain the working of the rendering engine (DOM, CSSOM, render tree, layout, paint) — 7 marks.
• Short notes: same-origin policy, browser cache & cookies, plugins/extensions — 3-5 marks.
• Distinguish browser engine vs rendering engine vs JavaScript engine — 5 marks.