1. 程式人生 > >從輸入URL到網頁呈現的過程

從輸入URL到網頁呈現的過程

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連線。

  • 第一次揮手:客戶端想分手,傳送訊息給伺服器
  • 第二次揮手:伺服器通知客戶端已經接受到分手請求,但還沒做好分手準備
  • 第三次回收:伺服器已經做好分手準備,通知客戶端
  • 第四次揮手:客戶端傳送訊息給伺服器,確定分手,伺服器關閉連線