Comprehensive Overview of Browser Rendering Process and HTTP Request Flow
This article provides a detailed, front‑end‑focused walkthrough of the complete browser request‑response lifecycle—from URL parsing and DNS lookup through TCP connection, HTTP handling, HTML/CSS parsing, JavaScript execution, to final page rendering—highlighting key concepts, common pitfalls, and optimization tips.
This article presents a thorough, front‑end‑oriented explanation of how browsers handle a simple HTTP request, covering every stage from URL parsing to final page rendering.
1. URL Parsing
The browser first determines whether the input is a valid URL or a search keyword, then performs auto‑completion and character encoding.
2. DNS Query
Browser cache, OS cache, router cache, and ISP DNS cache are checked in order. If no cached entry exists, the request is sent to the local DNS server, which may query root name servers, following either recursive or iterative resolution.
3. TCP Connection
After obtaining the server IP, the browser establishes a TCP connection using the three‑way handshake. The TCP/IP stack encapsulates data across four layers (application, transport, network, link).
4. Processing the Request (HTTPD)
Typical HTTP servers (Apache, Nginx, IIS) listen for connections, spawn worker processes, and parse the HTTP request (method, headers, body). They may perform virtual‑host checks, method validation, and user authentication before generating a response.
5. Server Response
The server can return a normal response, a 301/302 redirect, or invoke URL rewriting rules. Static files are served directly; dynamic routes are handled by the appropriate language runtime (e.g., PHP MVC).
6. Browser Receives Response
After receiving the response, the browser checks the status code, decompresses if necessary, and stores the resource in cache. It then parses the MIME type to decide further processing.
6.1 HTML Parsing
HTML is parsed line‑by‑line through four steps: decoding, pre‑parsing (resource pre‑load), tokenization, and tree construction. Tokens are turned into DOM nodes as they appear.
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>6.2 CSS Parsing
CSS files are tokenized according to the CSS syntax spec, producing a rule set. Selectors are matched right‑to‑left, and specificity determines which rules apply.
6.3 Rendering Tree Construction
The DOM tree is merged with the CSS rule tree to form the rendering tree, which excludes nodes with display:none.
6.4 Layout & Paint
Each node’s geometry (position, size) is calculated, then the paint() method draws the visual representation on the screen.
6.5 Reflow & Repaint
Changes that affect layout trigger a reflow (expensive), while visual changes only cause a repaint. Using visibility:hidden instead of display:none can avoid reflow.
6.6 JavaScript Compilation & Execution
JS undergoes lexical analysis, parsing into an AST, and code generation. Execution contexts (global, function, eval) are created, forming a call stack. The engine runs on a single thread, assisted by event, timer, and async‑request threads.
console.log('1'); // macro task – sync
setTimeout(function() {
console.log('2'); // macro task – async
});
new Promise(function(resolve) {
console.log('3'); // macro task – sync
resolve();
}).then(function() {
console.log('4'); // micro task
});
console.log('5'); // macro task – syncThe output order is 1, 3, 5, 4, 2, illustrating the event loop behavior.
Overall, the article consolidates dozens of resources into a single, front‑end‑centric guide to browser internals, useful for interview preparation and performance optimization.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Top Architect
Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.