Answer: Web Browser Architecture and Major Components

1. Introduction

A web browser is a software application designed to retrieve, present, and navigate resources on the World Wide Web. Its internal architecture is modular, dividing tasks such as network communication, parsing, script execution, rendering, and persistence across distinct interacting subsystems.

+-------------------------------------------------------------+
|                       User Interface                        |
+-------------------------------------------------------------+
                              |
+-----------------------------v-------------------------------+
|                       Browser Engine                        |
+-----------------------------+-------------------------------+
                              |
+-----------------------------v-------------------------------+
|                      Rendering Engine                       |
|  +--------------------+  +-------------------------------+  |
|  |     HTML Parser    |  |          CSS Parser           |  |
|  +---------+----------+  +---------------+---------------+  |
|            |                             |                  |
|            +-------------> Render Tree <-+                  |
|                                  |                          |
|                                  v                          |
|                         Layout & Painting                   |
+---------+------------------------+------------------+-------+
          |                        |                  |
+---------v----------+  +----------v---------+  +-----v-------+
|  Networking Layer  |  | JavaScript Engine  |  | UI Backend  |
| (HTTP/HTTPS/DNS)   |  | (V8, SpiderMonkey) |  | (Widgets)   |
+--------------------+  +--------------------+  +-------------+
                                   |
+----------------------------------v--------------------------+
|                       Data Persistence                      |
|          (Cookies, LocalStorage, IndexedDB, Cache)          |
+-------------------------------------------------------------+

---

2. Major Components of a Browser

1. User Interface (UI)

• Includes all visible parts of the browser window except the main webpage viewport.
• Elements: Address bar (Omnibox), Back/Forward/Reload buttons, Bookmarks menu, Tabs, and Settings.

2. Browser Engine

• Acts as an intermediary bridge between the User Interface and the Rendering Engine.
• Manages high-level actions like navigation queries, history management, and loading progress indicators.

3. Rendering Engine

• The core component that parses HTML, XML, CSS, and embedded media, constructing the visual layout painted on screen.
• Prominent Engines:
  • Blink: Google Chrome, Microsoft Edge, Opera, Brave
  • Gecko: Mozilla Firefox
  • WebKit: Apple Safari

4. Networking Layer

• Handles network communications, DNS lookups, TLS/SSL encryption, HTTP/HTTPS request-response cycles, and connection pooling.
• Manages network caches, redirects, and proxy configurations.

5. JavaScript Engine (Interpreter)

• Parses, compiles (via JIT - Just-In-Time compilation), and executes JavaScript code.
• Manages the execution stack, heap memory allocation, and garbage collection.
• Examples: V8 (Chrome, Edge, Node.js), SpiderMonkey (Firefox), JavaScriptCore (Safari).

6. UI Backend

• Draws standard basic user interface widgets like combo boxes, input fields, checkboxes, and system alert windows.
• Interfaces with the underlying Operating System’s graphic subsystem.

7. Data Persistence (Storage Layer)

• Stores persistent client-side data locally on the user's hard drive.
• Supported Mechanisms:
  • Cookies: Small state tokens sent with HTTP requests.
  • Web Storage: localStorage (persistent) and sessionStorage (tab lifecycle).
  • IndexedDB: NoSQL client-side database for large structured datasets.
  • HTTP Cache: Stores downloaded static resources (scripts, images, CSS) to minimize latency.

---

3. Basic Rendering Flow Pipeline

HTML ---> DOM Tree ------+
                         +---> Render Tree ---> Layout ---> Paint ---> Screen
CSS  ---> CSSOM Tree ----+

1. Constructing DOM Tree: HTML tokens are parsed into Document Object Model nodes.
2. Constructing CSSOM: CSS rules are parsed into the CSS Object Model.
3. Render Tree Creation: Visible DOM nodes are merged with computed styles from CSSOM.
4. Layout (Reflow): Browser calculates exact geometric coordinates and sizes for every visible element.
5. Painting (Rasterization): Pixels are drawn and composited onto the screen display.