從輸入URL到頁面加載完成發生了什麼?

1. 瀏覽器的地址欄輸入URL並按下回車。
2. 瀏覽器查找當前URL是否存在緩存,並比較緩存是否過期。
3. DNS解析URL對應的IP。
4. 根據IP建立TCP連接(三次握手)。
5. HTTP發起請求。
6. 服務器處理請求,瀏覽器接收HTTP響應。
7. 渲染頁面,構建DOM樹。
8. 關閉TCP連接(四次揮手)。

一、URL

  我們常見的RUL是這樣的:http://www.baidu.com,這個域名由三部分組成:協議名、域名、端口號,這裏端口是默認所以隱藏。除此之外URL還會包含一些路徑、查詢和其他片段。我們最常見的的協議是HTTP協議,除此之外還有加密的HTTPS協議、FTP協議、FILe協議等等。URL的中間部分爲域名或者是IP,之後就是端口號了。通常端口號不常見是因爲大部分的都是使用默認端口,如HTTP默認端口80,HTTPS默認端口443

二、緩存

  說完URL我們說說瀏覽器緩存,HTTP緩存有多種規則,根據是否需要重新向服務器發起請求來分類,我將其分爲強制緩存,對比緩存。

【強制緩存判斷HTTP首部字段:cache-control,Expires】:

  • Expires是一個絕對時間,即服務器時間。瀏覽器檢查當前時間,如果還沒到失效時間就直接使用緩存文件。但是該方法存在一個問題:服務器時間與客戶端時間可能不一致。因此該字段已經很少使用。
  • cache-control中的max-age保存一個相對時間。例如Cache-Control: max-age = 484200,表示瀏覽器收到文件後,緩存在484200s內均有效。 如果同時存在cache-control和Expires,瀏覽器總是優先使用cache-control。

【對比緩存通過HTTP的last-modified,Etag字段進行判斷】:

  • last-modified是第一次請求資源時,服務器返回的字段,表示最後一次更新的時間。下一次瀏覽器請求資源時就發送if-modified-since字段。服務器用本地Last-modified時間與if-modified-since時間比較,如果不一致則認爲緩存已過期並返回新資源給瀏覽器;如果時間一致則發送304狀態碼,讓瀏覽器繼續使用緩存。
  • Etag:資源的實體標識(哈希字符串),當資源內容更新時,Etag會改變。服務器會判斷Etag是否發生變化,如果變化則返回新資源,否則返回304。

在這裏插入圖片描述

三、DNS域名解析

  我們知道在地址欄輸入的域名並不是最後資源所在的真實位置,域名只是與IP地址的一個映射。網絡服務器的IP地址那麼多,我們不可能去記一串串的數字,因此域名就產生了,域名解析的過程實際是將域名還原爲IP地址的過程

1. 首先瀏覽器先檢查本地hosts文件是否有這個網址映射關係,如果有就調用這個IP地址映射,完成域名解析。

2. 如果沒找到則會查找本地DNS解析器緩存,如果查找到則返回。

3. 如果還是沒有找到則會查找本地DNS服務器,如果查找到則返回。

4. 最後迭代查詢,按根域服務器 ->頂級域,.cn->第二層域,hb.cn ->子域,www.hb.cn的順序找到IP地址。或者遞歸查詢,按上一級DNS服務器->上上級->…逐級向上查詢找到IP地址。
在這裏插入圖片描述
在這裏插入圖片描述

四、TCP連接

  在通過第一步的DNS域名解析後,獲取到了服務器的IP地址,在獲取到IP地址後,便會開始建立一次連接,這是由TCP協議完成的,主要通過三次握手進行連接。

在這裏插入圖片描述

五、瀏覽器向服務器發送HTTP請求

  完整的HTTP請求包含請求起始行、請求頭部、請求主體三部分。
在這裏插入圖片描述

六、瀏覽器接收響應

  服務器在收到瀏覽器發送的HTTP請求之後,會將收到的HTTP報文封裝成HTTP的Request對象,並通過不同的Web服務器進行處理,處理完的結果以HTTP的Response對象返回,主要包括狀態碼,響應頭,響應報文三個部分。狀態碼主要包括以下部分:

1xx:指示信息–表示請求已接收,繼續處理。

2xx:成功–表示請求已被成功接收、理解、接受。

3xx:重定向–要完成請求必須進行更進一步的操作。

4xx:客戶端錯誤–請求有語法錯誤或請求無法實現。

5xx:服務器端錯誤–服務器未能實現合法的請求。

  響應頭主要由Cache-Control、 Connection、Date、Pragma等組成。

  響應體爲服務器返回給瀏覽器的信息,主要由HTML,css,js,圖片文件組成。

七、頁面渲染

  如果說響應的內容是HTML文檔的話,就需要瀏覽器進行解析渲染呈現給用戶。整個過程涉及兩個方面:解析和渲染。在渲染頁面之前,需要構建DOM樹和CSSOM樹。
在這裏插入圖片描述
在這裏插入圖片描述

八、關閉TCP連接或繼續保持連接

  通過四次揮手關閉連接(FIN ACK, ACK, FIN ACK, ACK)。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章