輸入 URL 到頁面載入完成之間發生了什麼?

來源

這是一個非常經典的前端面試題，而且有廣度有深度，此篇整合了許多篇好文，將重點列下來，比較深入的部分會放在補充的地方，大家可以根據關鍵字或連結去研究。

輸入URL到頁面載入完成之間發生了什麼?

步驟來講有以下四個步驟 :

1. DNS 解析 - 將輸入的 URL 網址解析成 IP 位址
2. TCP 連接 - 根據 IP 位址與伺服器建立連線(三次握手)
3. HTTP Messages - 透過 TCP 傳遞的訊息格式(Requests/Responses)
4. 瀏覽器接收到資料後的解析過程

DNS 解析 - 將輸入的 URL 網址解析成 IP 位址)

URL 總共有六個要素，分別是協議、域名、路徑、查詢參數、錨點、端口。

來源

補充:

預設端口 : https(443)、http(80)、DNS(53)、FTP(20/21)

緩存機制、DNS負載均衡、dns-prefetch

TCP 連接 - 根據 IP 位址與伺服器建立連線(三次握手)

Client 與 server 在連接時需要三次握手的過程來確定已成功連接

1. client => 您好，我想認識你 => server
2. server => 好的，很高興認識你 => client
3. client => 我也很高興認識你 => server 
(第三次是為了防止 server 端一直在等待連接)

相反的在斷開連線時，不管是 client 或 server 都需要四次揮手

主動方：我已經關閉了向你那邊的主動通道了，只能被動接收了。
被動方：收到通道關閉的信息。
被動方：那我也告訴你，我這邊向你的主動通道也關閉了。
主動方：OK 收到，掰掰

補充:
傳輸層協議 TCP 與 UDP 的差別
TCP 为什么是三次握手，而不是两次或四次？

HTTP Messages - 透過 TCP 傳遞的訊息格式(Requests/Responses)

HTTP Messages 主要是由這幾個部分所組成的，雖然每個部份裡面的參數 requests 和 responses 會有不同。

start-line   
headers
CRLF
body

request message 範例(來源)

就上面這張圖來說藍色的部分就是我們的 start-line，依序對照的欄位為

方法    要求的URL    HTTP版本     換行
Method Request-URL HTTP-Version CRLF
POST   /?id=1      HTTP/1.1      

Responses message 的話會長得不太一樣

response message 範例(來源)

HTTP版本      狀態碼       結果描述
HTTP-Version status-code reason-phrase
HTTP/1.1     200         OK

其中狀態碼是很重要的訊息，他會告訴我們這次的 HTTP request 結果是什麼，發生了什麼問題

狀態碼(status-code)
1xx: 指示訊息，表示請求已接收，繼續處理
2xx: 成功，表示請求已成功接收，理解，接受
3xx: 重定向，要完成請求必須進行進一步操作
4xx: client 端有錯誤，語法錯誤或是請求無法實現
5xx: server 端有錯誤，server 端不能實現合理請求

補充:
HTTP-Version: http1.0、http1.1、http2.0 差異
get、post 差別

瀏覽器接收到資料後的解析過程

1. 解析 HTML，產生 DOM tree
2. 解析 CSS，產生 CSS rule tree
3. 合併 DOM tree 與 CSS rule tree，產生 render tree
4. Layout/reflow，計算 render tree 在螢幕上的尺寸、位置
5. Paint，繪製 render tree
6. 瀏覽器將各層訊息送給 GPU，GPU 會將各層合成(composite)，顯示在螢幕上

瀏覽器解析及顯示 HTML 的過程

HTML parser

CSS parser

Render Tree

深度好文 :

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

輸入URL到頁面載入好文一

輸入URL到頁面載入好文二