一篇文章讀懂瀏覽器渲染機制

總所周知，在瀏覽器搜索欄輸入URL便可看到咱們想要的網站，可是這一個過程卻不是那麼的簡單。在瀏覽器渲染以前，會執行以下操做：

1. DNS 查詢
2. TCP 鏈接
3. HTTP 請求
4. 服務器響應
5. 客戶端渲染

DNS 查詢

域名解析過程

1. 首先瀏覽器搜索自身的DNS緩存，查看緩存中是否有對應且沒有過時的條目，若是符合條件則解析結束。
2. 若是在瀏覽器自身緩存中沒有找到對應的條目，那麼接下來會搜索OS的DNS緩存，若是找到且沒有過時則中止搜索解析結束。
3. 要是在OS的DNS中沒有找到，那麼會嘗試讀取hosts文件，查詢是否有該域名對應的IP地址，若是有則解析成功
4. hosts也沒有找到對應的條目的話，瀏覽器會發起一個DNS的系統調用，向本地配置的首選DNS服務器發起域名解析請求（UPD協議的53端口），運營商的DNS服務器首先查找自身的緩存，找到對應的條目切沒有過時，解析成功
5. OS查找NetBIOS name Cache（最近一段時間內和我成功通信的計算機名和IP地址），若是正好幾分鐘前和我成功通信過，那麼解析成功
6. 第五步沒有成功，則會查詢WINS服務器（NETBIOS名稱和IP地址對應的服務器）
7. 第六步沒有成功，客戶端會進行廣播查找
8. 第七步沒有成功，那麼客戶端會讀取LMHOSTS文件

DNS也是開銷，一般瀏覽器查找一個給定域名的IP地址要花費20~120毫秒，在完成域名解析以前，瀏覽器不能從服務器加載到任何東西。

TCP 鏈接

在瀏覽器拿到域名對應的IP地址以後，會發起TCP鏈接請求，這個過程就是咱們熟知的TCP三次握手和四次揮手。

三次握手

客戶端首先發送SYN=1給服務端，表示要建立鏈接，在服務端接收到後，加個ACK=1返回，告訴客戶端我收到了，因而就變成了SYN=1,ACK=1。理論上這個時候建立鏈接成功了，可是要防止客戶端沒有收到請求，因此客戶端再發一個消息給服務端肯定一下，這時只須要返回ACK=1就能夠了。

四次揮手

首先客戶端請求關閉客戶端到服務器端的鏈接，這時客戶端發送一個FIN=1，表示要關閉一個方向的鏈接，服務端接收後返回ACK=1確認。這時只關閉了一個方向，另外一個方向也須要關閉，因此服務端也向客戶端發送FIN=1,ACK=1。客戶端接收後發送ACK=1，表示接收成功。四次揮手完成。

HTTP 請求

客戶端發送一個HTTP Request包括如下格式： 請求行（request line）、請求頭（request header）、空行和請求數據

通常狀況下，服務器接受並處理客戶端發過來的請求後會返回一個HTTP響應消息，HTTP響應消息包括如下格式： 狀態行（status line）、消息報頭（reponse header）、空行和響應正文

服務器響應

服務器端WEB程序接收到http請求之後，就開始處理該請求，處理以後就返回給瀏覽器html文件

客戶端渲染

瀏覽器工做流程：解析HTML以構建DOM樹 -> 構建render樹（CSSOM） -> 佈局render樹（在此以前DOM樹與CSSOM一塊兒生成渲染樹） -> 繪製render樹

瞭解了瀏覽器渲染機制以後纔可以針對性的優化，接下來的文章會介紹前端性能優化與黑客攻防。