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

總所周知，在瀏覽器搜尋欄輸入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樹

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