Web Applications — Behind the scenes
Have you ever wondered how web applications are displayed in your browser? What happens behind the scenes while you read an article? Let’s…
Web Applications — Behind the scenes
Have you ever wondered how web applications are displayed in your browser? What happens behind the scenes while you read an article? Let’s explore a high‑level overview of how your webpage gets displayed.
Requesting a Webpage
You type a URL (e.g., https://medium.com/) or click a link.
DNS Lookup
- The browser asks the DNS server to resolve the domain name (e.g.,
medium.com) to an IP address. - To improve performance, the browser first checks its cache (and the OS cache) for a recent entry with a valid TTL (Time to Live).
- Each DNS record has a TTL value set by the domain’s authoritative server. As long as the record’s TTL hasn’t expired, subsequent visits will use the cached IP address instead of querying DNS servers again.
DNS Lookup
TCP (Transmission Control Protocol) Handshake
- A three‑way handshake (SYN, SYN‑ACK, ACK) establishes a TCP connection between the client and server.
TLS (Transport Layer Security) Handshake (for HTTPS)
- The client and server negotiate encryption parameters, verify certificates, and set up a secure channel before exchanging data.
HTTP GET Request
- The browser sends an initial
GET / HTTP/1.1request over the established connection. - It has the response of the HTML, CSS, JS code to render your website in the browser.
- You can inspect this in your browser’s Developer Tools → Network tab → filter by “Doc” and select the request to view headers and response.
Initial GET Request
Parsing HTML & CSS
The browser engine (e.g., Blink in Chrome/Edge, WebKit in Safari, Gecko in Firefox) begins parsing the HTML stream:
- Tokenization: Converts raw text into tokens (start tags, text nodes, end tags).
- Tree Construction: Builds the Document Object Model (DOM) tree.
- On encountering a
<link rel="stylesheet" href="...">or an inline<style>block, CSS fetching/parsing begins in parallel to build the CSS Object Model (CSSOM). - CSS parsing does not block HTML parsing, but the first paint is delayed until critical CSS is loaded to avoid a flash of unstyled content.
HTML Parsing
JavaScript Execution
- On encountering
<script>tags withoutdeferorasync, the parser pauses HTML parsing: - Blocking
<script>: Fetches (if external), parses, and executes immediately before resuming HTML parsing. **defer**: Fetches in parallel, executes after HTML parsing completes, in document order, just beforeDOMContentLoaded.**async**: Fetches in parallel and executes as soon as it’s downloaded, pausing parsing briefly at execution time.- Inline scripts also block parsing until execution finishes.
Building the Render Tree
- The browser combines the DOM and CSSOM to create the Render Tree, containing only nodes that will actually be displayed (excluding
<head>or nodes withdisplay:none).
Layout (Reflow)
Calculates the geometry (size and position) of each render tree node.
Paint
Fills in pixels: text, colors, images, borders, shadows, etc.
Composite
Combines painted layers (especially for complex pages or GPU-accelerated transforms) into the final raster image you see on screen.
Browser Engine vs JavaScript Engine — Does it refers the same?
1. JavaScript Engine
👉 Purpose: Executes JavaScript code.
🔧 What it does:
- Parses and compiles JavaScript.
- Optimizes and runs JavaScript code.
- Manages memory and garbage collection.
- Handles event loop and asynchronous operations (in combination with browser APIs).
🛠 Examples of JavaScript Engines:
V8 — Chrome, Edge, Node.js
SpiderMonkey — Firefox
🌐 2. Browser Engine (a.k.a. Rendering Engine)
👉 Purpose: Translates web content (HTML, CSS, etc.) into what you see on the screen.
🔧 What it does:
- Parses HTML and builds the DOM.
- Parses CSS and builds the CSSOM.
- Applies styles and performs layout and rendering.
- Manages interactions between the page and user input (e.g., clicks, scrolls).
- Works with the JavaScript engine to respond to script-based changes.
🛠 Examples of Browser Engines:
Blink — Chrome, Edge
Gecko — Firefox
🔁 How They Work Together in a Browser
When you load a webpage:
- The browser engine loads HTML, builds the DOM, and renders the page.
- It sees <script> tags and hands the JavaScript code off to the JavaScript engine.
- The JavaScript engine runs your code, manipulates the DOM or CSSOM.
- Changes by JavaScript trigger updates in the browser engine, which re-renders the page as needed.
Hope you get an high level overview of the webpages load. Will talk about the Javascript Engine in the another article.
References:
https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid
메타데이터
- post_id
- 55834c9564e2
- slug
- web-applications-behind-the-scenes-55834c9564e2
- url
- https://medium.com/@lavanyaramya1947/web-applications-behind-the-scenes-55834c9564e2
- canonical_url
- https://medium.com/@lavanyaramya1947/web-applications-behind-the-scenes-55834c9564e2
- author_url
- https://medium.com/@lavanyaramya1947
- status
- ok
- fetched_at
- 2026-06-29 01:02:39
