Learning · Tip

Journey of a URL

Step-by-step technical breakdown of web requests and browser page rendering

This educational reference outlines the technical lifecycle that occurs when entering a URL into a web browser. It details DNS lookup hierarchies, the TCP three-way handshake, HTTP request and response cycles, and browser rendering pipeline stages. It is useful as a study guide for software engineering and web development technical interviews.

How it works

The Journey of a URL involves 4 primary stages:

  1. DNS Lookup (Resolving domain name to IP):
  2. Cache check order: Browser Cache -> Operating System Cache -> Router Cache -> ISP Cache.
  3. If cache miss: Query Root Domain Name Server -> 2nd Level Domain Name Server -> 3rd Level Domain Name Server to resolve IP address.
  4. Initiate TCP Connection (Three-Way Handshake):
  5. Step 1: Client sends SYN packet to Server.
  6. Step 2: Server responds with SYN-ACK packet to Client.
  7. Step 3: Client sends ACK packet back to Server.
  8. HTTP Request & Server Response:
  9. Client sends HTTP Request (e.g., GET /mypage.com).
  10. Server returns Server Response with status code:
  11. 1xx: Information Message
  12. 2xx: Success
  13. 3xx: Redirects
  14. 4xx: Client Errors
  15. 5xx: Server Errors
  16. Browser Rendering Pipeline:
  17. Receives HTML + CSS + JS files.
  18. HTML Document -> Tokenizer -> DOM Tree.
  19. CSS Stylesheet -> Tokenizer -> CSSOM Tree.
  20. JavaScript is evaluated and can manipulate DOM/CSSOM trees.
  21. DOM Tree + CSSOM Tree -> Render Tree -> Layout calculation -> Painting -> Web Page Successfully Loaded.

What it's for

  • Prepare for web development and software engineering technical interview questions
  • Understand the end-to-end lifecycle of browser network requests and DOM rendering
  • Debug web performance bottlenecks across network and rendering phases

Key points

  • DNS lookup caching sequence checking browser, OS, router, and ISP caches
  • Hierarchical DNS query resolution through root, 2nd level, and 3rd level servers
  • TCP three-way handshake connection sequence (SYN, SYN-ACK, ACK)
  • HTTP client-server request and response cycle with standard status code ranges
  • Parsing HTML and CSS into DOM and CSSOM trees
  • Render tree construction combining DOM and CSSOM for layout and paint execution

Pricing

Free

Details

Type
Tip
Category
Learning
Topic
Web Fundamentals
Open source
No
Platforms
other
For
Web developers, software engineering students, and interview candidates
Tags
networking, webdev, dns, browsers, interview prep, frontend

Why it was saved

  • @codewithbrij, 6 September 2023: Provides a clear, concise visual reference for web networking and browser rendering concepts frequently asked in software engineering and web development interviews.

Related

  • Epic Growth Community

    Professional community and video case study library for product growth and marketing

Updated