這是一個面試高頻的問題
在輸入 URL 后，首先需要找到這個 URL 域名的服務器 IP,為了尋找這個 IP，瀏覽器首先會尋找緩存，查看緩存中是否有記錄，緩存的查找記錄為：瀏覽器緩存 ->系統緩存 -> 路由器緩存，緩存中沒有則查找系統的 hosts 文件中是否有記錄，如果沒有則查詢 DNS 服務器，得到服務器的 IP 地址后，瀏覽器根據這個 IP 以及相應的端口號，構造一個 HTTP 請求，這個請求報文會包括這次請求的信息，主要是請求方法、請求說明和請求附帶的數據，並將這個 HTTP 請求封裝在一個 TCP 包中，這個 TCP 包會依次經過傳輸層、網絡層、數據鏈路層、物理層到達服務器，服務器解析這個請求來作出響應，返回相應的 HTML 給瀏覽器，因為 HTML 是一個樹形結構，瀏覽器根據這個 HTML 來構建 DOM 樹，在 DOM 樹的構建過程中如果遇到 JS 腳本和外部 JS 鏈接，則會停止構建 DOM 樹來執行和下載相應的代碼，這會造成阻塞，這就是為什么推薦 JS 代碼應該放在 HTML 代碼的后面，之后根據外部樣式，內部樣式，內聯樣式構建一個 CSS 對象模型樹 CSSOM 樹，構建完成后和 DOM 樹合並為渲染樹，這里主要做的是排除非視覺節點，比如 script，meta 標簽和排除 display 為 none 的節點，之后進行布局，布局主要是確定各個元素的位置和尺寸，之后是渲染頁面，因為 HTML 文件中會含有圖片，視頻，音頻等資源，在解析 DOM 的過程中，遇到這些都會進行並行下載，瀏覽器對每個域的並行下載數量有一定的限制，一般是 4-6 個，當然在這些所有的請求中我們還需要關注的就是緩存，緩存一般通過 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的區別在於 Cache-Control 使用相對時間，Expires 使用的是基於服務器端的絕對時間，因為存在時差問題，一般采用 Cache-Control，在請求這些有設置了緩存的數據時，會先查看是否過期，如果沒有過期則直接使用本地緩存，過期則請求並在服務器校驗文件是否修改，如果上一次響應設置了 ETag 值會在這次請求的時候作為 If-None-Match 的值交給服務器校驗，如果一致，繼續校驗 Last-Modified，沒有設置 ETag 則直接驗證 Last-Modified，再決定是否返回 304.
簡化一下就是：
- 檢查緩存
- DNS解析
- TCP連接
- 發送HTTP請求
- 服務器處理請求並返回HTTP報文
- 瀏覽器解析渲染頁面
- 連接結束