What Happens When Your Browser Loads a Web Page? From DNS to Rendering Explained

Chrome searches its own DNS cache.

Search the operating system's DNS cache (if the browser cache is missing or expired). View Chrome's DNS cache at chrome://net-internals/#dns :

Read the local HOST file.

The browser makes a DNS system call.

The ISP server returns the result and caches it in the OS kernel.

The OS kernel returns the result to the browser.

The browser finally obtains the IP address for www.jianshu.com.

The broadband ISP server checks its own cache.

The ISP server initiates an iterative DNS resolution request.

After obtaining the domain's IP address, the browser initiates the HTTP three‑way handshake.

Once the TCP/IP connection is established, the browser sends an HTTP request (e.g., a GET request using HTTP/1.0).

The server receives the request, processes it via backend logic, and returns the resulting data—typically the full HTML page for the site.

The browser receives the complete HTML page; when parsing and rendering, each referenced JS, CSS, and image resource triggers its own HTTP request, following the same seven steps.

The browser uses the retrieved resources to render the page, ultimately presenting a complete page to the user.

Some Concepts

1. What is a callback?

A callback is the foundation of asynchronous programming, encapsulating subsequent logic as a parameter to the initial function and nesting it layer by layer.

2. What is synchronous / asynchronous?

Synchronous communication means the sender waits for a response before sending the next packet. Asynchronous communication means the sender can send the next packet without waiting for a response.

3. What is I/O?

Disk write (in) and disk read (out).

4. What is single‑thread / multi‑thread?

Single‑thread: only one program executes at a time. Multi‑thread: multiple programs can execute concurrently.

5. What is blocking / non‑blocking?

Blocking: the previous program must finish before proceeding. Non‑blocking: the previous program can be suspended while other tasks continue, resuming later when needed.

6. What is an event?

A trigger action, such as clicking a button.

7. What is event‑driven?

An action that triggers an operation, for example, clicking a button opens a dialog.

8. What is an event‑driven callback?

Registering a callback for an event; the callback runs only when the event occurs. When related to asynchronous I/O, it becomes an async I/O callback driven by events, as seen in Node.js.

9. What is the event loop?

The event loop manages large numbers of asynchronous operations. Completed I/O or timer tasks push their callbacks into a queue, which the loop continuously checks and executes, ensuring the program remains responsive without blocking.

Event Loop: a callback queue where asynchronous functions are enqueued and the loop repeatedly processes the queue.