跳到主要内容

URL to UI

URL → DNS → Server → HTML → Render → UI

The Journey​

"From URL to visible page"

The process of converting a URL into a visible web page involves multiple steps.

"The URL to UI process involves DNS lookup, HTTP request, server response, HTML parsing, resource loading, rendering, and finally displaying the page."

Step-by-Step Process​

DNS → TCP → HTTP → Parse → Render

  1. DNS Lookup: Resolve domain to IP
  2. TCP Connection: Establish connection
  3. HTTP Request: Send request
  4. Server Response: Receive HTML
  5. Parse HTML: Build DOM
  6. Load Resources: CSS, JS, images
  7. Render: Layout and paint
  8. Display: Show on screen

"The process: DNS lookup, TCP connection, HTTP request/response, HTML parsing, resource loading, rendering, and display."

DNS Lookup​

Domain name → IP address

example.com → 192.0.2.1
  • Browser checks cache
  • Queries DNS servers
  • Returns IP address

"DNS lookup resolves domain names to IP addresses, checking browser cache first, then DNS servers."

TCP Connection​

Three-way handshake

  1. Client → Server: SYN
  2. Server → Client: SYN-ACK
  3. Client → Server: ACK

Establishes reliable connection.

"TCP three-way handshake establishes a reliable connection between client and server."

HTTP Request​

GET request for HTML

GET /index.html HTTP/1.1
Host: example.com

Browser sends HTTP request for the page.

"HTTP request is sent to server requesting the HTML document and other resources."

Server Response​

HTML document returned

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

Server responds with HTML.

"Server responds with HTML document, status code, and headers."

HTML Parsing​

Parse HTML → DOM tree

  • HTML parser processes document
  • Builds DOM tree
  • Encountered resources trigger loading

"HTML parser processes the document, building the DOM tree and triggering resource loading for CSS, JS, and images."

Resource Loading​

CSS · JavaScript · Images

  • CSS: Blocks rendering until parsed
  • JavaScript: Can block parsing (unless async/defer)
  • Images: Load asynchronously

"Resources load in parallel: CSS blocks rendering, JavaScript can block parsing, images load asynchronously."

9️⃣ Rendering​

DOM + CSSOM → Render Tree → Layout → Paint

  1. Combine DOM and CSSOM → Render tree
  2. Layout: Calculate positions
  3. Paint: Fill pixels
  4. Composite: Combine layers

"Rendering combines DOM and CSSOM into render tree, calculates layout, paints pixels, and composites layers."

Critical Rendering Path​

Minimize blocking resources

Optimize:

  • Minimize render-blocking CSS
  • Defer non-critical JavaScript
  • Optimize images
  • Use async/defer for scripts

"Critical rendering path optimization minimizes blocking resources to improve initial page load time."

"URL to UI process: DNS lookup resolves domain to IP, TCP establishes connection, HTTP request/response exchanges data, HTML parser builds DOM, resources (CSS/JS/images) load, rendering combines DOM/CSSOM into render tree, calculates layout, paints pixels, and composites layers. Optimize critical rendering path by minimizing blocking resources."

🧠 Ultra-Short Cheat Sheet​

DNS lookup
TCP connection
HTTP request/response
HTML parsing → DOM
Resource loading
Rendering (layout/paint/composite)
Critical rendering path
Optimize blocking resources