瀏覽器的工作原理

一、知識點

① 瀏覽器進行DNS查詢:

網站提供的域名 查詢 IP地址，根據IP找伺服器

② 瀏覽器跟伺服器建立連線: TCP握手機制

現在大部分的伺服器連線都基於https協議的，那麼會多一步TLS握手，建立加密的隧道，保證資料不被監聽和篡改。

③ 瀏覽器發起請求(http/https)獲取伺服器響應

受TCP連線的限制，最先獲取的是前14kb的資料(對網站來說就是html)，再慢慢增加傳輸速度。

④ 瀏覽器渲染網頁: (五步) 關鍵渲染路徑

(一) 解析html, 構建DOM樹

DOM樹是html文件在瀏覽器中的物件表示，可用javascript來操作。

解析是順序執行的，並且只有一個主執行緒解析。

預設碰到script標籤是要暫停主執行緒，等執行完裡面程式碼再繼續解析html的。

但對於圖片 或 css檔案 或設定了async / defer的js檔案，則不會影響主執行緒，而是會非同步地載入。

另外，瀏覽器有個預掃描執行緒，會非同步下載字型，css和js，這個過程是非同步的，不會影響主執行緒。

(二) 構建CSSOM樹

CSSOM (CSS Object Model)是CSS在瀏覽器中的物件表示。

(三) 形成渲染樹

瀏覽器從根節點開始，把CSSOM中的樣式合併到DOM中的每個節點上，形成渲染樹 (Render Tree)。

(四) 佈局

瀏覽器會根據樣式計算每個可見節點(寬高和位置等)，對所有節點進行佈局和規劃。

對於圖片這類節點，如果沒有指定寬高，瀏覽器會忽略它的大小，等圖片載入完成之後，瀏覽器會重新計算受影響的節點的大小和位置，這個過程叫回流 (Reflow)。

(五) 繪製: 在第一次佈局後就執行

如果發生了迴流，瀏覽器還會發生重繪。

在繪製期間，也可能會發生組合。(渲染期間產生新圖層，如出現下面圖列舉中其一的情況)

最後，載入並執行非同步的js。

二、總結

DNS查詢 - URL 域名 IP 伺服器

建立連線 - TCP握手 TLS握手

發起請求獲取伺服器響應 - 14kb

渲染網頁: 關鍵渲染路徑（3顆樹 佈局 繪製）