瀏覽器從輸入網址到顯示都發生了些什麼？

風靈使發表於2018-06-03
瀏覽器

瀏覽器從輸入網址到顯示都發生了些什麼？

1、輸入網址

這裡寫圖片描述

輸入網址有啥好說的……

2、瀏覽器查詢域名的IP地址

這個過程呢其實就是應用層DNS解析的過程，上圖：

這裡寫圖片描述

DNS的查詢有以下過程：

  1. 瀏覽器快取：瀏覽器會在一定時間內快取DNS記錄（2min-30min不等）
  2. 系統快取：作業系統也會快取一定的DNS記錄。瀏覽器快取找不到的時候會查詢系統裡的快取記錄。
  3. 路由器快取：請求經過路由器時候，也會讀取路由器的快取。
  4. ISP DNS 快取：檢查ISP快取DNS的伺服器，查詢快取記錄。
  5. 遞迴搜尋:DNS伺服器從根域名開始進行遞迴搜尋。一般DNS伺服器的快取中會有.com域名伺服器中的域名，所以到頂級伺服器的匹配過程不是那麼必要了。
    這裡寫圖片描述

DNS查詢時有一系列的優化方法：

  1. 迴圈DNS—–返回多個IP地址
  2. 負載均衡器—–是以一個特定IP地址進行偵聽並將網路請求轉發到叢集伺服器上的硬體裝置。
  3. 地理DNS—–根據使用者所處的地理位置,對映同一個域名到不同的IP地址，提高擴充套件性。
  4. 使用Anycast—–一個IP地址對映多個物理主機的路由技術。大多數DNS伺服器使用Anycast來獲得高效低延遲的DNS查詢。

3、向web伺服器傳送HTTP請求

應用層客戶端會傳送一個HTTP請求，內容如下：

    GET/sample.jspHTTP/1.1

    Accept:image/gif.image/jpeg,*/*
    Accept-Language:zh-cn
    Connection:Keep-Alive
    Host:localhost
    User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
    Accept-Encoding:gzip,deflate

    username=jinqiao&password=1234

這裡的請求頭包含三個部分：

  • 請求的URI協議/版本
    其中”GET”代表請求方法，HTTP1.1目前支援7種請求方法：

    • GET 請求獲取由Request-URI所標識的資源。
    • POST 在Request-URI所標識的資源後附加新的資料。
    • HEAD 請求獲取由Request-URI所標識的資源的響應訊息報頭。
    • OPTIONS 請求查詢伺服器的效能，或查詢與資源相關的選項和需求。
    • PUT 請求伺服器儲存一個資源，並用Request-URI作為其標識。
    • DELETE 請求伺服器刪除由Request-URI所標識的資源。
    • TRACE 請求伺服器回送收到的請求資訊，主要用語測試或診斷。

    “/sample.jsp”表示URI。URI完整地指定了要訪問的網路資源，通常只要給出相對於伺服器的根目錄的相對目錄即可，因此總是以“/”開頭

    “HTTP/1.1”表示協議和協議的版本

  • 請求頭(Request Header)

    請求頭包含許多有關的客戶端環境和請求正文的有用資訊。如返回的資訊是否需要快取，以及客戶端是否傳送cookie等。

    這裡寫圖片描述

  • 請求正文

    請求頭和請求正文之間是一個空行，這個行非常重要，它表示請求頭已經結束，接下來的是請求正文。請求正文中可以包含客戶提交的查詢字串資訊：username=jinqiao&password=1234

4、傳輸層通過TCp協議傳輸報文

這個過程則是TCP連線的三次握手過程：

這裡寫圖片描述

5、網路層IP協議查詢MAC地址

IP協議的作用是把TCP分割好的各種資料包傳送給接收方。

而要保證確實能傳到接收方還需要接收方的MAC地址，也就是實體地址。IP地址和MAC地址是一一對應的關係，一個網路裝置的IP地址可以更換，但是MAC地址一般是固定不變的。

ARP協議可以將IP地址解析成對應的MAC地址。

當通訊的雙方不在同一個區域網時，需要多次中轉才能到達最終的目標，在中轉的過程中需要通過下一個中轉站的MAC地址來搜尋下一個中轉目標。

6、資料鏈路層傳輸

客戶端找到對方IP對應的MAC地址後，就把資料傳送到資料鏈路層傳輸。這時，客戶端傳送請求的過程的階段才結束。

7、服務端接收資料

接收端的伺服器在鏈路層接收到資料包，再層層向上直到應用層。這過程中包括在運輸層通過TCP協議講分段的資料包重新組成原來的HTTP請求報文。

8、服務端處理請求

伺服器接收到獲取請求，然後處理並返回一個響應。

伺服器通過Web伺服器軟體（如Apache，nodeJs等）處理請求得到其中的資源路徑，查詢字串，然後根據路徑進行路由匹配，再呼叫各種資料服務，根據模板檔案組裝成一個實際的HTML字串檔案。

9、服務端返回一個HTTP響應請求

返回的請求頭：

這裡寫圖片描述

內容編碼頭告訴瀏覽器整個響應體用gzip演算法進行壓縮。解壓blob塊後，你可以看到如下期的HTML：

這裡寫圖片描述

通常，響應頭會設定Content-Type,charset,快取設定，cookie等資訊。

10、瀏覽器開始渲染拿到的HTML檔案

HTML檔案還沒完整的接受到的時候，就開始顯示這個頁面了，一般最先開始顯示的就是HTML中的純DOM結構。

11、瀏覽器傳送並獲取嵌入到HTML文件裡邊的物件

這些物件其實就是瀏覽器解析到的CSS檔案，JS檔案，圖片和其它一些資源。這些資源的獲取都要重新經歷HTML檔案獲取的過程。

但這僅限於第一次完全沒有快取的情況下載入頁面。如果靜態資原始檔已經由瀏覽器快取，則不需要和服務端進行通訊了，而是直接讀取快取檔案。

服務端響應中一般包含了靜態檔案的儲存期限。而且，每個響應都有可能包含一個ETag頭（被請求變數的實體值），如果瀏覽器觀察到檔案的版本 ETag資訊已經存在，就馬上停止這個檔案的傳輸。

靜態檔案一般是快取到CDN伺服器上的，它們的內容往往代表著站點的頻寬大小。通常站點會使用第三方的CDN。所以，當你每次請求一個靜態檔案的時候，你可能會發現每一次的IP地址都出現了變化。

12、瀏覽器的非同步請求(AJAX)

頁面顯示完成後客戶端仍與伺服器端保持著聯絡。

瀏覽器執行JavaScript，可能會進行一些非同步的操作，這個模式就是AJAX，也就是JavaScript向伺服器傳送一系列的非同步請求，從而更新頁面上的區域性區域，從而達到動態網站的效果。

至此，所有的準備工作都已做好，你就可以開始和網頁進行互動了！

總結一下

當在瀏覽器位址列輸入網址到顯示頁面，這整個過程大致分為兩個部分：

  • 網路通訊（建立連線，傳送接收請求資料）
  • 頁面渲染（瀏覽器解析渲染）

相關文章