細說瀏覽器輸入URL後發生了什麼

整體概覽

大致上，能夠分爲六步，固然每一步均可以詳細展開來講，這裏先放一張總覽圖:
html

DNS域名解析

在網絡世界，你確定記得住網站的名稱，可是很難記住網站的 IP 地址，於是也須要一個地址簿，就是 DNS 服務器。DNS 服務器是高可用、高併發和分佈式的，它是樹狀結構，如圖：
前端

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

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

遞歸過程：
segmentfault

在客戶端輸入 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
• http://www.noobyard.com/article/p-uruwnjwn-ba.html

備註

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」,認真學前端，作個有專業的技術人...