「在瀏覽器輸入網址後發生什麼事？」是一題範圍很大的面試題。
回答不用把每個封包背完，但要能從網路連線一路說到畫面被畫出來。
整體流程
輸入 URL
→ 查 cache / Service Worker
→ DNS 查 IP
→ 建立 TCP 與 TLS 連線
→ 發送 HTTP request
→ Server / CDN 回 response
→ 解析 HTML、CSS、JavaScript
→ 建立 DOM、CSSOM、Render Tree
→ Layout
→ Paint / Composite1. 解析 URL
瀏覽器先拆出：
- protocol：
https - host：
example.com - path：
/products/123 - query string
- fragment
也會先檢查 memory cache、disk cache、Service Worker 是否已經能提供內容。
2. DNS 查詢
瀏覽器需要把 domain 轉成 IP。
查詢可能依序使用：
- browser DNS cache
- OS cache
- router / DNS resolver
- authoritative DNS server
CDN 也可能透過 DNS 把使用者導到較近的節點。
3. 建立連線
HTTP/1.1 和 HTTP/2 通常建立 TCP 連線；HTTPS 還需要 TLS handshake，確認憑證並協商加密。
HTTP/3 則建立在 QUIC / UDP 上，連線模型不同，但面試先把 TCP、TLS、HTTP 的責任說清楚通常就足夠。
4. 發送 HTTP Request
request 包含：
- method
- path
- headers
- cookies
- body
Server 或 CDN 回傳 status、headers 和 body。
重要 response headers 包括：
Content-TypeCache-ControlContent-EncodingSet-CookieContent-Security-Policy
5. 解析 HTML 與建立 DOM
瀏覽器一邊接收 HTML，一邊 parse 成 DOM。
遇到 CSS 會建立 CSSOM；遇到一般同步 script，HTML parser 可能暫停，等 script 下載與執行。
因此 script 的載入策略很重要：
<script defer src="app.js"></script>
<script async src="analytics.js"></script>defer：下載不阻塞 parse，等 HTML parse 完按順序執行async：下載完成就執行，不保證順序
6. Render Tree、Layout、Paint
DOM 和 CSSOM 會組成 Render Tree。
接著：
- Layout：計算元素尺寸與位置
- Paint：畫文字、顏色、邊框、陰影
- Composite：把不同 layer 合成畫面
修改某些 CSS 可能觸發 layout 和 paint；transform、opacity 在適當條件下較可能只需要 composite。
CSS 會阻塞什麼？JavaScript 又會阻塞什麼？
CSS 通常不阻止 HTML 繼續 parse，但會影響 Render Tree 建立，因此被視為 render-blocking resource。
同步 JavaScript 可能阻塞 HTML parsing，而且 script 可能需要讀取 style，所以 CSS 尚未準備好時也可能延後 script 執行。
常見追問
強制重新整理和一般重新整理差在哪？
一般 reload 可能使用 cache；hard reload 會略過大部分 browser cache，重新向 server 請求資源。
Reflow 和 Repaint 差在哪？
Reflow / layout 需要重新計算幾何位置，通常成本較高；repaint 只需要重畫外觀。實際瀏覽器會做批次與最佳化，不能只靠單一規則判斷成本。
preload、prefetch 差在哪？
preload 用於目前頁面很快會需要的重要資源；prefetch 偏向未來可能導覽到的資源，優先度較低。
面試回答模板
瀏覽器輸入 URL 後，會先解析網址與檢查 cache，透過 DNS 找到 IP，再建立 TCP/TLS 連線並發送 HTTP request。收到 HTML 後會建立 DOM，CSS 建立 CSSOM，兩者組成 Render Tree，接著做 layout、paint 和 composite。過程中同步 JavaScript 可能阻塞 HTML parsing，CSS 會影響 render，所以實務上要注意 cache、資源載入順序、defer/async 和 critical rendering path。