」天龍八步「細說瀏覽器輸入URL後發生了什麼

05-18

來自專欄小薛雜談

本文摘要：1.DNS域名解析；2.建立TCP連接；3.發送HTTP請求；4.伺服器處理請求；5.返迴響應結果；6.關閉TCP連接；7.瀏覽器解析HTML；8.瀏覽器布局渲染；總結

當我們在瀏覽器輸入網址並回車後，一切從這裡開始。

一、DNS域名解析

我們在瀏覽器輸入網址，其實就是要向伺服器請求我們想要的頁面內容，所有瀏覽器首先要確認的是域名所對應的伺服器在哪裡。將域名解析成對應的伺服器IP地址這項工作，是由DNS伺服器來完成的。

客戶端收到你輸入的域名地址後，它首先去找本地的hosts文件，檢查在該文件中是否有相應的域名、IP對應關係，如果有，則向其IP地址發送請求，如果沒有，再去找DNS伺服器。一般用戶很少去編輯修改hosts文件。

DNS伺服器層次結構

瀏覽器客戶端向本地DNS伺服器發送一個含有域名http://www.cnblogs.com的DNS查詢報文。本地DNS伺服器把查詢報文轉發到根DNS伺服器，根DNS伺服器注意到其com後綴，於是向本地DNS伺服器返回comDNS伺服器的IP地址。本地DNS伺服器再次向comDNS伺服器發送查詢請求，comDNS伺服器注意到其http://www.cnblogs.com後綴並用負責該域名的權威DNS伺服器的IP地址作為回應。最後，本地DNS伺服器將含有http://www.cnblogs.com的IP地址的響應報文發送給客戶端。

從客戶端到本地伺服器屬於遞歸查詢，而DNS伺服器之間的交互屬於迭代查詢。
正常情況下，本地DNS伺服器的緩存中已有comDNS伺服器的地址，因此請求根域名伺服器這一步不是必需的。

二、建立TCP鏈接

費了一頓周折終於拿到伺服器IP了，下一步自然就是鏈接到該伺服器。對於客戶端與伺服器的TCP鏈接，必然要說的就是『三次握手』。

三次握手

客戶端發送一個帶有SYN標誌的數據包給服務端，服務端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息，最後客戶端再回傳一個帶ACK標誌的數據包，代表握手結束，連接成功。

上圖也可以這麼理解：

客戶端：「你好，在家不，有你快遞。」

服務端：「在的，送來就行。」

客戶端：「好嘞。」

三、發送HTTP請求

與伺服器建立了連接後，就可以向伺服器發起請求了。這裡我們先看下請求報文的結構（如下圖）：

請求報文

在瀏覽器中查看報文首部（以google瀏覽器為例）：

請求行包括請求方法、URI、HTTP版本。首部欄位傳遞重要信息，包括請求首部欄位、通用首部欄位和實體首部欄位。我們可以從報文中看到發出的請求的具體信息。具體每個首部欄位的作用，這裡不做過多闡述。

四、伺服器處理請求

伺服器端收到請求後的由web伺服器（準確說應該是http伺服器）處理請求，諸如Apache、Ngnix、IIS等。web伺服器解析用戶請求，知道了需要調度哪些資源文件，再通過相應的這些資源文件處理用戶請求和參數，並調用資料庫信息，最後將結果通過web伺服器返回給瀏覽器客戶端。

伺服器處理請求

五、返迴響應結果

在HTTP里，有請求就會有響應，哪怕是錯誤信息。這裡我們同樣看下響應報文的組成結構：

響應報文

在響應結果中都會有個一個HTTP狀態碼，比如我們熟知的200、301、404、500等。通過這個狀態碼我們可以知道伺服器端的處理是否正常，並能了解具體的錯誤。

狀態碼由3位數字和原因短語組成。根據首位數字，狀態碼可以分為五類：

狀態碼類別

六、關閉TCP連接

為了避免伺服器與客戶端雙方的資源佔用和損耗，當雙方沒有請求或響應傳遞時，任意一方都可以發起關閉請求。與創建TCP連接的3次握手類似，關閉TCP連接，需要4次握手。

4次握手

上圖可以這麼理解：

客戶端：「兄弟，我這邊沒數據要傳了，咱關閉連接吧。」

服務端：「收到，我看看我這邊有木有數據了。」

服務端：「兄弟，我這邊也沒數據要傳你了，咱可以關閉連接了。」

客戶端：「好嘞。」

七、瀏覽器解析HTML

準確地說，瀏覽器需要載入解析的不僅僅是HTML，還包括CSS、JS。以及還要載入圖片、視頻等其他媒體資源。

瀏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，然後通過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不同，渲染樹中並沒有head、display為none等不必顯示的節點。

要注意的是，瀏覽器的解析過程並非是串連進行的，比如在解析CSS的同時，可以繼續載入解析HTML，但在解析執行JS腳本時，會停止解析後續HTML，這就會出現阻塞問題，關於JS阻塞相關問題，這裡不過多闡述,後面會單獨開篇講解。

八、瀏覽器布局渲染

根據渲染樹布局，計算CSS樣式，即每個節點在頁面中的大小和位置等幾何信息。HTML默認是流式布局的，CSS和js會打破這種布局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。

replaint：屏幕的一部分重畫，不影響整體布局，比如某個CSS的背景色變了，但元素的幾何尺寸和位置不變。
reflow：意味著元件的幾何尺寸變了，我們需要重新驗證並計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow，或是Layout。

所以我們應該盡量減少reflow和replaint，我想這也是為什麼現在很少有用table布局的原因之一。

最後瀏覽器繪製各個節點，將頁面展示給用戶。

總結

本文系統地講述從瀏覽器從輸入域名到最終頁面展示的整體流程。篇幅所限，本文的每一步講述其實並不全面，所以後面我會單獨就域名解析、HTTP請求/響應、瀏覽器的解析、渲染等內容單獨開篇講解，感興趣的朋友也可以關注我的個人博客。

更多技術分享，歡迎關注『網站建設運維百科』

http://weixin.qq.com/r/qi14YF7EPgNBrRoD93i4 (二維碼自動識別)

參考：
http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/
http://taligarsiel.com/Projects/howbrowserswork1.htm
https://www.zhihu.com/question/34873227
圖片製作工具：Axure、PS、 Ulead GIF Animator、 ProcessOn