當前位置:網站首頁>當我們輸入URL直到頁面加載完成發生了什麼呢

當我們輸入URL直到頁面加載完成發生了什麼呢

2022-01-27 02:10:44 xiaoLiang o

當我們輸入URL之後,瀏覽器都背著我們幹了啥呢?一直想寫這個文章,前前後後拖了好久,今天我們就來談談這個“深奧”的問題~~
這個過程大體上主要是這些步驟:

 - DNS解析
 - TCP連接
 - 發送HTTP請求
 - 服務器處理請求並返回HTTP報文
 - 瀏覽器解析、渲染頁面
 - 連接結束
1.DNS解析(即瀏覽器查找域名的IP地址)

輸入的域名並不是最後資源所在的真實比特置,而域名只是與IP地址的一個映射。域名解析就是將域名還原為IP地址的過程。(由於IP地址比較多,所以得一步一步進行查找)
瀏覽器將輸入的域名解析為對應的IP地址的過程是:

  • 查找瀏覽器緩存
    瀏覽器一般會緩存DNS記錄一段時間,不同的瀏覽器的事件可能不一樣。瀏覽器去查找這些緩存,若有緩存,則直接返回IP,否則下一步。
  • 查找系統緩存
    瀏覽器緩存中找不到IP之後,瀏覽器會進行系統調用,查找本機的hosts文件,若有,則返回IP,否則下一步。
  • 查找路由器緩存
    前面查詢無果,則需借助網絡,路由器一般都有自己的DNS緩存,將前面的請求發送給服務器,查找ISP服務商緩存DNS的服務器,若查找到,則返回IP地址,否則下一步。
    • 遞歸查詢
      上述步驟找不到,則ISP的DNS服務器會進行遞歸查詢,而遞歸查詢就是如果主機所詢問的本地域名服務器不知道被查詢域名的IP地址,那麼本地域名服務器就以DNS客戶的身份,向其他根域名服務器繼續發出查詢請求報文,而並非讓該主機自己進行下一步查詢。(本地域名服務器地址是通過DHPC協議獲取地址)
    • 迭代查詢
      本地服務器采用迭代查詢,先向一個根域名服務器查詢。所謂迭代查詢就是當根域名服務器收到本地域名服務器發出的查詢請求報文後,告訴本地域名服務器下一步應該查詢哪一個域名服務器,然後本地域名服務器自己進行後續的查詢。(而不是替代本地域名服務器進行後續查詢)
2.瀏覽器與目標服務器建立TCP連接

主機服務器通過DNS解析得到了目標服務器的IP地址後,與服務器建立TCP連接。
TCO三次握手連接:

  • 瀏覽器所在客戶端向服務器發初連接請求報文。(SYN標志為1)
  • 服務器接收報文後,同意建立連接,向客戶端發送確認報文。(SYN,ACK為1)
  • 客戶端接收到確認報文之後,再次向服務器發出報文,確認已接收到確認報文。此處客戶端與服務器之間的TCP連接建立完成,開始通信。
3.瀏覽器通過HTTP協議發送請求

HTTP請求包括請求報頭和請求主體兩個部分,請求報頭包括請求的方法(GET、POST)、目標URL、遵循的協議(http/https/ftp等)、返回的信息是否需要緩存以及客戶端是否發送cookie等。
<1>請求報頭分為請求方法、請求地址和協議版本。
請求方法:HTTP定義的請求方法有8種:GET、POST、PUT、DELETE、Patch、Head、options、trace.
最常用的兩種:GET、POST。
請求地址:組成:<協議>://<主機>:<端口>/<路徑>,有時會帶參數,GET請求。
**請求頭部:**常見的請求頭如下:HOST、User-Agent、Connection、Acceot-Charest、Allow等。

4.服務器處理請求並返回Http報文

服務器接收到請求後,根據路徑參數0,經過後端的一些處理之後,把處理後的結果返回給瀏覽器。然後進入到Web服務器上的 WebServer,隨後進入到部署好的後端應用,找到對應的請求處理,最後處理結束後返回報頭,將數據返回給瀏覽器。

5.瀏覽器解析渲染界面

瀏覽器拿到完整的HTML頁面代碼或其他數據結果後,瀏覽器開始下載HTML文檔同時設置緩存並關閉TCP連接。
四次揮手:

  • 瀏覽器所在主機向服務器發出釋放報文,然後停止發送數據。

  • 服務器接收到釋放報文後發出確認報文,然後將服務器上未傳遞玩的數據發完。

  • 服務器數據傳輸完畢後,向客戶機發送連接釋放報文。

  • 客戶機接收到報文後,發出確認,然後等待一段時間後,釋放TCP連接。
    瀏覽器渲染頁面過程

  • 解析HTML,構建DOM樹

  • 解析CSS,生成CSSOM樹

  • 合並DOM樹和CSSOM樹,生成render渲染樹

  • 根據render樹進行布局,並計算每個元素的幾何屬性。

  • 繪制render樹,將每個元素的幾何屬性繪制到屏幕上。

此時,連接結束。

版權聲明
本文為[xiaoLiang o]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201270210438973.html

隨機推薦