在地址欄裏輸入一個 URL後,按下 Enter 到這個頁面呈現出來，中間會發生什麼？

這是一個面試高頻的問題

在輸入 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.

簡化一下就是：

1. 檢查緩存
2. DNS解析
3. TCP鏈接
4. 發送HTTP請求
5. 服務器處理請求並返回HTTP報文
6. 瀏覽器解析渲染頁面
7. 鏈接結束