從輸入URL到網頁呈現的過程
阿新 • • 發佈：2018-11-25
1、域名解析
當我們在瀏覽器中輸入一個URL，例如”www.google.com”時，這個地址並不是谷歌網站真正意義上的地址。網際網路上每一臺計算機的唯一標識是它的IP地址，因此我們輸入的網址首先需要先解析為IP地址，這一過程叫做DNS解析。
DNS解析是一個遞迴查詢的過程。例如，我們需要解析”www.google.com”時，會經歷以下步驟：
- 在本地域名伺服器中查詢IP地址，未找到域名；
- 本地域名伺服器迴向根域名伺服器傳送請求，未找到域名；
- 本地域名伺服器向.com頂級域名伺服器傳送請求，未找到域名；
- 本地域名伺服器向.google.com域名伺服器傳送請求，找到該域名，將對應的IP返回給本地域名伺服器。
2、TCP連線
HTTP協議是使用TCP協議作為其傳輸層協議的，在拿到伺服器的IP地址後，瀏覽器客戶端會與伺服器建立TCP連線。該過程包括三次握手：
- 第一次握手：建立連線時，客戶端向服務端傳送請求報文
- 第二次握手：伺服器收到請求報文後，如同意連線，則向客戶端傳送確認報文
- 第三次握手，客戶端收到伺服器的確認後，再次向伺服器給出確認報文，完成連線。
三次握手主要是為了防止已經失效的請求報文欄位傳送給伺服器，浪費資源。
3、瀏覽器傳送HTTP請求
瀏覽器構建http請求報文，並通過TCP協議傳送到伺服器的指定埠。http請求報文一共包括三個部分：
- 請求行：指定http請求的方法、url、http協議版本等
- 請求頭：描述瀏覽器的相關資訊，語言、編碼等。如下
- 請求正文：當傳送POST, PUT等請求時，通常需要向伺服器傳遞資料。這些資料就儲存在請求正文中。
4、伺服器處理HTTP請求
伺服器處理http請求，並返回響應報文。響應報文包括三個部分：
- 狀態碼：http服務常用的狀態碼及其含義如下
| 狀態碼 | 含義 | 常見示例 |
|---|---|---|
| 1** | 伺服器已經接受到請求，客戶端可繼續傳送請求 | |
| 2** | 請求成功 | 200：請求已成功，請求所希望的響應頭或資料體將隨此響應返回。 |
| 3** | 重定向 | 303：對應當前請求的響應可以在另一個 URI 上被找到，而且客戶端應當採用 GET 的方式訪問那個資源。 |
| 4** | 客戶端錯誤 | 404：請求的網頁不存在 |
| 5** | 伺服器錯誤 | 503： 伺服器超時 |
- 響應頭：包含了響應的相關資訊，如日期等
- 響應正文：伺服器返回給瀏覽器的文字資訊，通常的html、js、css、圖片等就包含在這一部分裡面。
5、瀏覽器頁面渲染
瀏覽器接受到http伺服器傳送過來的響應報文，並開始解析html文件，渲染頁面。具體的渲染過程包括：構建DOM樹、構建渲染樹、定位頁面元素、繪製頁面元素等。具體可參看：瀏覽器時如何渲染頁面的
6、斷開TCP連線
客戶端與伺服器四次揮手，斷開tcp連線。
- 第一次揮手：客戶端想分手，傳送訊息給伺服器
- 第二次揮手：伺服器通知客戶端已經接受到分手請求，但還沒做好分手準備
- 第三次回收：伺服器已經做好分手準備，通知客戶端
- 第四次揮手：客戶端傳送訊息給伺服器，確定分手，伺服器關閉連線