BRUCE_FE Frontend Interview Notes - From URL Input to Page Display Process

Complete Process Overview from URL Input to Page Display

When you enter a URL in the browser address bar and press Enter, it goes through the following main stages:

1. 1. URL Parsing
2. 2. DNS Resolution (Domain Name → IP Address)
3. 3. Establish TCP Connection
4. 4. Send HTTP Request
5. 5. Server Processes Request and Returns HTTP Response
6. 6. Browser Parses HTML and Requests Other Resources
7. 7. Browser Renders Page
8. 8. Close Connection

  ┌──────────────────────────────────────────────────┐
  │                                                  │
  │  1️⃣ URL Parsing                                  │
  │  https://example.com/page                       │
  │                                                 │
  │  2️⃣ DNS Resolution                              │
  │  example.com ──> IP (93.184.216.34)            │
  │                                                 │
  │  3️⃣ TCP Connection                              │
  │  Client ⇄ Server (Three-way Handshake)         │
  │                                                 │
  │  4️⃣ HTTP Request                                │
  │  GET /page HTTP/1.1 ──>                        │
  │                                                 │
  │  5️⃣ Server Response                             │
  │  <── 200 OK + HTML Content                     │
  │                                                 │
  │  6️⃣ Request Other Resources                     │
  │  Fetch CSS/JS/Images                           │
  │                                                 │
  │  7️⃣ Render Page                                 │
  │  DOM ──> CSSOM ──> Render ──> Layout ──> Paint  │
  │                                                 │
  │  8️⃣ Close Connection                            │
  │                                                 │
  └──────────────────────────────────────────────────┘

Next, we will explain in detail what happens at each stage.

Stage 1: URL Parsing

The browser first parses the various parts of the URL:

https://www.example.com:443/path/to/page?query=string#fragment
|-----||--------------||---||------------||-----------||----|
 Protocol   Host(Domain) Port     Path        Query String Fragment

• 1. Protocol: http, https, ftp, etc.
• 2. Host: Domain name or IP address
• 3. Port: Communication port for specific services (e.g., HTTP default 80, HTTPS default 443)
• 4. Path: Path to resources on the server
• 5. Query string: Parameters passed to the server
• 6. Fragment: Anchor within the page, used only by browser and not sent to server

Stage 2: DNS Resolution Process

DNS converts website addresses (like www.example.com) into IP addresses (like 192.168.1.1) that computers can understand.

DNS query order:

1. 1. Browser Cache: First check if the browser remembers this website
2. 2. Computer Cache: Then check if the computer remembers
3. 3. Router Cache: Then ask the home router
4. 4. Internet Service Provider: Finally ask the ISP
5. 5. DNS Server Query: If none have it, query DNS servers on the network layer by layer

DNS resolution takes time, which is why websites use CDNs to speed up this process.

Stage 3: Establishing Connection

After finding the IP address, the browser needs to establish a connection with the server:

TCP Three-Way Handshake:

1. 1. First Handshake: Browser says "Hi, I want to connect"
2. 2. Second Handshake: Server responds "OK, I received it, we can connect"
3. 3. Third Handshake: Browser says "Great, let's start communicating"

HTTPS Security Handshake:

If it's an HTTPS website, a security handshake will also be performed after the TCP connection:

1. 1. Greeting: Browser says "I can use these encryption methods"
2. 2. Confirm Method: Server selects one encryption method to respond
3. 3. Identity Verification: Server presents "ID card" (digital certificate)
4. 4. Key Exchange: Both parties negotiate a "key"
5. 5. Start Encryption: All subsequent communication is encrypted with this key

This is like before you talk to the bank, you first confirm that the other party is really the bank, then use a code that only you know to communicate, preventing others from eavesdropping. This is also why HTTPS takes a bit more time than HTTP, but is more secure.

Stage 4: Sending HTTP Request

After the TCP connection is established, the browser constructs an HTTP request and sends it to the server:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
Accept: text/html,application/xhtml+xml,...
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Cookie: user_session=abc123; visit_count=5

HTTP request contains:

• 1. Request Line: Contains HTTP method (GET, POST, etc.), request path, and HTTP version
• 2. Request Headers: Contains various metadata like User-Agent, Accept, etc.
• 3. Request Body: GET usually has no request body, POST contains form data, etc.
• 4. Connection: keep-alive: Tells the server to keep the TCP connection open, allowing multiple HTTP requests to share the same connection. HTTP/1.1 enables this by default, no configuration needed. This reduces the overhead of establishing new connections and speeds up page loading.

Stage 5: Server Processes Request and Returns Response

After the server receives the request:

1. 1. Server parses HTTP request
2. 2. Execute necessary processing (query database, handle business logic, etc.)
3. 3. Assemble HTTP response and return

HTTP/1.1 200 OK
Date: Mon, 23 May 2023 22:38:34 GMT
Server: Apache/2.4.52 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 138
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
<head>
  <title>Example Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <!-- Page content -->
</body>
</html>

HTTP response contains:

• 1. Status Line: HTTP version, status code, and status message
• 2. Response Headers: Contains various metadata
• 3. Response Body: Contains actual HTML content or other resources

Stage 6: Browser Parses HTML and Requests Other Resources (CRP Path)

After the browser receives the HTML:

1. 1. Parse HTML, build DOM tree
2. 2. When encountering external resources (CSS, JavaScript, images, etc.), initiate new HTTP requests
3. 3. Parse CSS, build CSSOM tree
4. 4. Execute JavaScript code, which may modify DOM and CSSOM

During this process, the browser may initiate multiple requests in parallel, but is limited by HTTP protocol version and browser restrictions:

• 1. HTTP/1.1: Each domain has 6-8 parallel connection limits
• 2. HTTP/2: Single connection can handle multiple requests, greatly improving performance

Stage 7: Browser Renders Page (CRP Path)

After all necessary resources are loaded, the browser performs the rendering process:

1. 1. Style Calculation: Combine DOM and CSSOM to determine the final style of each node
2. 2. Layout (Layout/Reflow): Calculate the position and size of each element on the screen
3. 3. Paint: Fill pixels, draw text, colors, images, etc.
4. 4. Compositing: Combine different layers together

This process is very complex, and modern browsers perform various optimizations:

• 1. Incremental Rendering: Start rendering without waiting for all resources to load
• 2. Layered Rendering: Divide the page into multiple layers for independent processing
• 3. Hardware Acceleration: Use GPU to accelerate certain rendering operations

Stage 8: Close Connection

After the page is fully loaded, if "Connection: close" is specified in the HTTP header, the TCP connection will close through a four-way handshake process:

If using HTTP/1.1's Keep-Alive mechanism or HTTP/2, the connection may remain open for reuse, improving performance.

🔥 Common Interview Questions

  +-------------+    +-------------+    +-------------+    +-------------+
  | Network Stage| -> |Response Stage| -> |Parsing Stage| -> |Render Stage |
  +-------------+    +-------------+    +-------------+    +-------------+
  | 1. URL Parse |    | 1. Process   |    | 1. Build DOM|    | 1. Style    |
  | 2. DNS Query |    | 2. Return    |    | 2. Build    |    | 2. Layout   |
  | 3. TCP Connect|   | 3. Receive   |    | 3. Execute JS|   | 3. Paint    |
  | 4. HTTP Request|  |              |    |              |   | 4. Composite|
  +-------------+    +-------------+    +-------------+    +-------------+

  Process Flow:
  Input URL ➜ URL Parse ➜ DNS Query ➜ TCP Connect ➜ (HTTPS adds SSL/TLS) ➜ HTTP Request ➜
  Server Process ➜ Return Response ➜ Parse HTML/CSS/JS ➜ Render Page ➜ Page Interaction

  Client                                      Server
    |                                            |
    |  -------- Client Hello --------------->   |  1. Send supported cipher suites and random number
    |                                            |
    |  <------- Server Hello ----------------   |  2. Respond with selected suite, random number and certificate
    |                                            |
    |  -------- Verify+Pre-master Key ----->   |  3. Verify certificate and send encrypted pre-master key
    |                                            |
    |  <------- Confirm Encrypted Comm -----   |  4. Both parties generate session key and confirm
    |                                            |
    |  === Start Encrypted HTTP Comm ========> |
    |  <=================================>      |