細說瀏覽器輸入URL后發生了什么

總體概覽

大體上，可以分為六步，當然每一步都可以詳細展開來說，這里先放一張總覽圖:

DNS域名決議

在網路世界，你肯定記得住網站的名稱，但是很難記住網站的 IP 地址，因而也需要一個地址簿，就是 DNS 服務器，DNS 服務器是高可用、高并發和分布式的，它是樹狀結構，如圖：

• 根 DNS 服務器 ：回傳頂級域 DNS 服務器的 IP 地址
• 頂級域 DNS 服務器：回傳權威 DNS 服務器的 IP 地址
• 權威 DNS 服務器 ：回傳相應主機的 IP 地址

DNS的域名查找，在客戶端和瀏覽器，本地DNS之間的查詢方式是遞回查詢；在本地DNS服務器與根域及其子域之間的查詢方式是迭代查詢；

遞回程序：

在客戶端輸入 URL 后，會有一個遞回查找的程序，從瀏覽器快取中查找->本地的hosts檔案查找->找本地DNS決議器快取查找->本地DNS服務器查找，這個程序中任何一步找到了都會結束查找流程，

如果本地DNS服務器無法查詢到，則根據本地DNS服務器設定的轉發器進行查詢，若未用轉發模式，則迭代查找程序如下圖：

結合起來的程序，可以用一個圖表示：

在查找程序中，有以下優化點：

• DNS存在著多級快取，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器快取，系統快取，路由器快取，IPS服務器快取，根域名服務器快取，頂級域名服務器快取，主域名服務器快取，
• 在域名和 IP 的映射程序中，給了應用基于域名做負載均衡的機會，可以是簡單的負載均衡，也可以根據地址和運營商做全域的負載均衡，

建立TCP連接

首先，判斷是不是https的，如果是，則HTTPS其實是HTTP + SSL / TLS 兩部分組成，也就是在HTTP上又加了一層處理加密資訊的模塊，服務端和客戶端的資訊傳輸都會通過TLS進行加密，所以傳輸的資料都是加密后的資料，

進行三次握手，建立TCP連接，

1. 第一次握手：建立連接，客戶端發送連接請求報文段，將SYN位置為1，Sequence Number為x；然后，客戶端進入SYN_SEND狀態，等待服務器的確認；

2. 第二次握手：服務器收到SYN報文段，服務器收到客戶端的SYN報文段，需要對這個SYN報文段進行確認，設定Acknowledgment Number為x+1(Sequence Number+1)；同時，自己還要發送SYN請求資訊，將SYN位置為1，Sequence Number為y；服務器端將上述所有資訊放到一個報文段（即SYN+ACK報文段）中，一并發送給客戶端，此時服務器進入SYN_RECV狀態；

3. 第三次握手：客戶端收到服務器的SYN+ACK報文段，然后將Acknowledgment Number設定為y+1，向服務器發送ACK報文段，這個報文段發送完畢以后，客戶端和服務器端都進入ESTABLISHED狀態，完成TCP三次握手，

SSL握手程序

1. 第一階段 建立安全能力 包括協議版本 會話Id 密碼構件 壓縮方法和初始亂數
2. 第二階段 服務器發送證書 密鑰交換資料和證書請求，最后發送請求-相應階段的結束信號
3. 第三階段 如果有證書請求客戶端發送此證書 之后客戶端發送密鑰交換資料 也可以發送證書驗證訊息
4. 第四階段 變更密碼構件和結束握手協議

完成了之后，客戶端和服務器端就可以開始傳送資料，更多 HTTPS 的資料可以看這里：

• https://zhuanlan.zhihu.com/p/26682342
• https://segmentfault.com/a/1190000012196642

備注

ACK：此標志表示應答域有效，就是說前面所說的TCP應答號將會包含在TCP資料包中；有兩個取值：0和1，為1的時候表示應答域有效，反之為0，TCP協議規定，只有ACK=1時有效，也規定連接建立后所有發送的報文的ACK必須為1，

SYN(SYNchronization)：在連接建立時用來同步序號，當SYN=1而ACK=0時，表明這是一個連接請求報文，對方若同意建立連接，則應在回應報文中使SYN=1和ACK=1. 因此, SYN置1就表示這是一個連接請求或連接接受報文，

FIN(finis）即完，終結的意思， 用來釋放一個連接，當 FIN = 1 時，表明此報文段的發送方的資料已經發送完畢，并要求釋放連接，

發送HTTP請求，服務器處理請求，回傳回應結果

TCP連接建立后，瀏覽器就可以利用HTTP／HTTPS協議向服務器發送請求了，服務器接受到請求，就決議請求頭，如果頭部有快取相關資訊如if-none-match與if-modified-since，則驗證快取是否有效，若有效則回傳狀態碼為304，若無效則重新回傳資源，狀態碼為200.

這里有發生的一個程序是HTTP快取，是一個常考的考點，大致程序如圖：

其程序，比較多內容，可以參考我的這篇文章《瀏覽器相關原理(面試題)詳細總結一》，這里我就不詳細說了～

關閉TCP連接

1. 第一次分手：主機1（可以使客戶端，也可以是服務器端），設定Sequence Number和Acknowledgment Number，向主機2發送一個FIN報文段；此時，主機1進入FIN_WAIT_1狀態；這表示主機1沒有資料要發送給主機2了；

2. 第二次分手：主機2收到了主機1發送的FIN報文段，向主機1回一個ACK報文段，Acknowledgment Number為Sequence Number加1；主機1進入FIN_WAIT_2狀態；主機2告訴主機1，我"同意"你的關閉請求；

3. 第三次分手：主機2向主機1發送FIN報文段，請求關閉連接，同時主機2進入LAST_ACK狀態；

4. 第四次分手：主機1收到主機2發送的FIN報文段，向主機2發送ACK報文段，然后主機1進入TIME_WAIT狀態；主機2收到主機1的ACK報文段以后，就關閉連接；此時，主機1等待2MSL后依然沒有收到回復，則證明Server端已正常關閉，那好，主機1也可以關閉連接了，

瀏覽器渲染

按照渲染的時間順序，流水線可分為如下幾個子階段：構建 DOM 樹、樣式計算、布局階段、分層、柵格化和顯示，如圖：

1. 渲染行程將 HTML 內容轉換為能夠讀懂DOM 樹結構，
2. 渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的styleSheets，計算出 DOM 節點的樣式，
3. 創建布局樹，并計算元素的布局資訊，
4. 對布局樹進行分層，并生成分層樹，
5. 為每個圖層生成繪制串列，并將其提交到合成執行緒，合成執行緒將圖層分圖塊，并柵格化將圖塊轉換成位圖，
6. 合成執行緒發送繪制圖塊命令給瀏覽器行程，瀏覽器行程根據指令生成頁面，并顯示到顯示幕上，

構建 DOM 樹

瀏覽器從網路或硬碟中獲得HTML位元組資料后會經過一個流程將位元組決議為DOM樹,先將HTML的原始位元組資料轉換為檔案指定編碼的字符,然后瀏覽器會根據HTML規范來將字串轉換成各種令牌標簽，如html、body等，最終決議成一個樹狀的物件模型，就是dom樹，

具體步驟：

1. 轉碼（Bytes -> Characters）—— 讀取接收到的 HTML 二進制資料，按指定編碼格式將位元組轉換為 HTML 字串
2. Tokens 化（Characters -> Tokens）—— 決議 HTML，將 HTML 字串轉換為結構清晰的 Tokens，每個 Token 都有特殊的含義同時有自己的一套規則
3. 構建 Nodes（Tokens -> Nodes）—— 每個 Node 都添加特定的屬性（或屬性訪問器），通過指標能夠確定 Node 的父、子、兄弟關系和所屬 treeScope（例如：iframe 的 treeScope 與外層頁面的 treeScope 不同）
4. 構建 DOM 樹（Nodes -> DOM Tree）—— 最重要的作業是建立起每個結點的父子兄弟關系

樣式計算

渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的 styleSheets，計算出 DOM 節點的樣式，

CSS 樣式來源主要有 3 種，分別是通過 link 參考的外部 CSS 檔案、style標簽內的 CSS、元素的 style 屬性內嵌的 CSS，,其樣式計算程序主要為：

可以看到上面的 CSS 文本中有很多屬性值，如 2em、blue、bold，這些型別數值不容易被渲染引擎理解，所以需要將所有值轉換為渲染引擎容易理解的、標準化的計算值，這個程序就是屬性值標準化，處理完成后再處理樣式的繼承和層疊，有些文章將這個程序稱為CSSOM的構建程序，

頁面布局

布局程序，即排除 script、meta 等功能化、非視覺節點，排除 display: none 的節點，計算元素的位置資訊，確定元素的位置，構建一棵只包含可見元素布局樹，如圖：

其中，這個程序需要注意的是回流和重繪，關于回流和重繪，詳細的可以看我另一篇文章《瀏覽器相關原理(面試題)詳細總結二》，這里就不說了～

生成分層樹

頁面中有很多復雜的效果，如一些復雜的 3D 變換、頁面滾動，或者使用 z-indexing 做 z 軸排序等，為了更加方便地實作這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹（LayerTree），如圖：

如果你熟悉 PS，相信你會很容易理解圖層的概念，正是這些圖層疊加在一起構成了最終的頁面影像，在瀏覽器中，你可以打開 Chrome 的"開發者工具"，選擇"Layers"標簽，渲染引擎給頁面分了很多圖層，這些圖層按照一定順序疊加在一起，就形成了最終的頁面，

并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的層，那么這個節點就從屬于父節點的圖層，那么需要滿足什么條件，渲染引擎才會為特定的節點創建新的層呢？詳細的可以看我另一篇文章《瀏覽器相關原理(面試題)詳細總結二》，這里就不說了～

柵格化

合成執行緒會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的，所謂柵格化，是指將圖塊轉換為位圖，如圖：

通常一個頁面可能很大，但是用戶只能看到其中的一部分，我們把用戶可以看到的這個部分叫做視口（viewport），在有些情況下，有的圖層可以很大，比如有的頁面你使用滾動條要滾動好久才能滾動到底部，但是通過視口，用戶只能看到頁面的很小一部分，所以在這種情況下，要繪制出所有圖層內容的話，就會產生太大的開銷，而且也沒有必要，

顯示

最后，合成執行緒發送繪制圖塊命令給瀏覽器行程，瀏覽器行程根據指令生成頁面，并顯示到顯示幕上，渲染程序完成，

參考資料

• 極客時間《趣談網路協議》
• 極客時間《瀏覽器作業原理與實踐》

最后

• 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
• 歡迎關注「前端Q」,認真學前端，做個有專業的技術人...

標籤：JavaScript

上一篇：基于云開發開發 Web 應用（一）：專案介紹 & 初始化

下一篇：釘釘開放與商業化團隊前端大量招人