深入淺出瀏覽器渲染原理

這塊的文章網上也是比較多的，但大多數都是講解dom樹的渲染，對於頁面從請求到展示的詳細流程講解還是比較少的，而且有些說的也不容易理解，下面我將以**結合的形式給大夥講講。

作用

dns 的作用就是通過網域名稱查詢到具體的 ip。

背景

因為 ip 存在數字和英文的組合（ipv6），很不利於人類記憶，所以就出現了網域名稱。你可以把網域名稱看成是某個 ip 的別名，dns 就是去查詢這個別名的真正名稱是什麼。

過程

在 tcp 握手之前就已經進行了 dns 查詢，這個查詢是作業系統自己做的。當你在瀏覽器中想訪問 www.test.com 時，會進行一下操作：

作業系統會首先在本地快取中查詢 ip

沒有的話會去系統配置的 dns 伺服器中查詢

如果這時候還沒得話，會直接去 dns 根伺服器查詢，這一步查詢會找出負責 com 這個一級網域名稱的伺服器

然後去該伺服器查詢 baidu 這個二級網域名稱

接下來**網域名稱的查詢其實是我們配置的，你可以給 www 這個網域名稱配置乙個 ip，然後還可以給別的**網域名稱配置乙個 ip

以上介紹的是 dns 迭代查詢，還有種是遞迴查詢，區別就是前者是由客戶端去做請求，後者是由系統配置的 dns 伺服器做請求，得到結果後將資料返回給客戶端。

在進行完dns解析之後，接下來就是 tcp 握手，應用層會下發資料給傳輸層，這裡 tcp 協議會指明兩端的埠號，然後下發給網路層。網路層中的 ip 協議會確定 ip 位址，並且指示了資料傳輸中如何跳轉路由器。然後包會再被封裝到資料鏈路層的資料幀結構中，最後就是物理層面的傳輸了。

tcp建立連線的三次握手

首先假設主動發起請求的一端稱為客戶端，被動連線的一端稱為服務端。不管是客戶端還是服務端，tcp 連線建立完後都能傳送和接收資料，所以 tcp 是乙個全雙工的協議。

起初，兩端都為 closed 狀態。在通訊開始前，雙方都會建立 tcb。伺服器建立完 tcb 後便進入 listen 狀態，此時開始等待客戶端傳送資料。

第一次握手

客戶端向服務端傳送連線請求報文段。該報文段中包含自身的資料通訊初始序號。請求傳送後，客戶端便進入 syn-sent 狀態。

第二次握手

服務端收到連線請求報文段後，如果同意連線，則會傳送乙個應答，該應答中也會包含自身的資料通訊初始序號，傳送完成後便進入 syn-received 狀態。

第三次握手

當客戶端收到連線同意的應答後，還要向服務端傳送乙個確認報文。客戶端發完這個報文段後便進入 established 狀態，服務端收到這個應答後也進入 established 狀態，此時連線建立成功。

第三次握手中可以包含資料，通過快速開啟（tfo）技術就可以實現這一功能。其實只要涉及到握手的協議，都可以使用類似 tfo 的方式，客戶端和服務端儲存相同的 cookie，下次握手時發出 cookie 達到減少 rtt 的目的。

tls 協議位於傳輸層之上，應用層之下，主要是對http請求進行加密。首次進行 tls 協議傳輸需要兩個 rtt ，接下來可以通過 session resumption 減少到乙個 rtt。

tls 握手過程如下圖：

客戶端傳送乙個隨機值以及需要的協議和加密方式。

服務端收到客戶端的隨機值，自己也產生乙個隨機值，並根據客戶端需求的協議和加密方式來使用對應的方式，並且傳送自己的證書（如果需要驗證客戶端證書需要說明）

客戶端收到服務端的證書並驗證是否有效，驗證通過會再生成乙個隨機值，通過服務端證書的公鑰去加密這個隨機值並傳送給服務端，如果服務端需要驗證客戶端證書的話會附帶證書

服務端收到加密過的隨機值並使用私鑰解密獲得第三個隨機值，這時候兩端都擁有了三個隨機值，可以通過這三個隨機值按照之前約定的加密方式生成金鑰，接下來的通訊就可以通過該金鑰來加密解密

通過以上步驟可知，在 tls 握手階段，兩端使用非對稱加密的方式來通訊，但是因為非對稱加密損耗的效能比對稱加密大，所以在正式傳輸資料時，兩端使用對稱加密的方式通訊。

資料在進入服務端之前，可能還會先經過負責負載均衡的伺服器，它的作用就是將請求合理的分發到多台伺服器上，這時假設服務端會響應乙個 html 檔案。

首先瀏覽器會判斷狀態碼是什麼，如果是 200 那就繼續解析，如果 400 或 500 的話就會報錯，如果 300 的話會進行重定向，這裡會有個重定向計數器，避免過多次的重定向，超過次數也會報錯。

瀏覽器解析

瀏覽器開始解析檔案，如果是 gzip 格式的話會先解壓一下，然後通過檔案的編碼格式去解碼檔案。

cssom 樹和 dom 樹構建完成後會開始生成 render 樹，這一步就是確定頁面元素的布局、樣式等等諸多方面的東西

在生成 render 樹的過程中，瀏覽器就開始呼叫 gpu 繪製，合成圖層，將內容顯示在螢幕上了。

總的來說，今天這篇文章主要是帶著大家從 dns 查詢開始到渲染出畫面完整的了解一遍過程，裡面涉及到dns、http、tls、負載均衡和瀏覽器渲染等等內容，算不上非常詳細，但如果面試的時候能說出來這些，相信面試官也會對你刮目相看的。