Web browser architecture

A browser is made of several cooperating components:

            +---------------- User Interface ----------------+
            | address bar, tabs, back/forward, bookmarks      |
            +------------------------+------------------------+
                                     |
                            +--------v--------+
                            | Browser Engine  |  (controls rendering engine)
                            +--------+--------+
            +------------------------+------------------------+
   +--------v--------+   +-----------v----------+   +---------v--------+
   | Rendering Engine|   |  Networking          |   | JavaScript Engine|
   | (Blink/Gecko)   |   |  (HTTP/HTTPS, DNS)   |   | (V8, SpiderMonkey)|
   +--------+--------+   +----------------------+   +---------+--------+
            |                                                  |
   +--------v--------------------------------------------------v-------+
   | UI backend  |  Data storage (cookies, localStorage, cache, IndexedDB)|
   +--------------------------------------------------------------------+

Components

1. User interface: everything visible except the page itself: address bar, tabs, navigation buttons, bookmarks.
2. Browser engine: the link between the UI and the rendering engine; passes actions such as "load this URL".
3. Rendering engine: parses HTML and CSS and displays the result (Blink in Chrome, Gecko in Firefox, WebKit in Safari).
4. Networking: performs DNS lookups and HTTP/HTTPS requests, handles caching, cookies, and TLS.
5. JavaScript engine: parses and executes JavaScript (V8, SpiderMonkey).
6. UI backend: draws basic widgets (windows, form controls) using the operating system's graphics.
7. Data storage: stores cookies, localStorage, sessionStorage, IndexedDB, and cache on disk.

How components interact to render a page

1. The user types a URL; the UI passes it to the browser engine.
2. The networking layer resolves the domain through DNS, opens a TCP/TLS connection, and sends an HTTP request.
3. The server's HTML response arrives; the rendering engine begins work.
4. Parsing: HTML is parsed into the DOM tree; CSS is parsed into the CSSOM.
5. Linked resources (CSS, JS, images) are fetched by networking; the JavaScript engine runs scripts, which can modify the DOM and CSSOM.
6. Render tree: DOM and CSSOM are combined, keeping only visible nodes with their computed styles.
7. Layout (reflow): the position and size of each node is calculated.
8. Painting: pixels are drawn (text, colours, images), then layers are composited by the GPU and shown through the UI backend.
9. Later user actions or script changes trigger reflow/repaint as needed.

Modern browsers use a multi-process design (separate processes per tab, renderer, and GPU) for stability and security.