深入了解 Web 瀏覽器的工作原理
瀏覽器現(xiàn)在已成為日常生活的一部分，但您有沒有想過(guò)它們是如何工作的？
本文將仔細(xì)研究 Web 瀏覽器幕后的魔法。
1. Navigation
導(dǎo)航是加載網(wǎng)頁(yè)的第一步。當(dāng)用戶在地址欄中輸入 URL 或單擊鏈接時(shí)，就會(huì)發(fā)生這種情況。
1.1. DNS查詢
第一步是找到資源所在的IP地址。這是通過(guò) DNS 查找完成的。
域名系統(tǒng) (DNS) 服務(wù)器是專門用于將網(wǎng)站主機(jī)名（如 www.example.com ）與其相應(yīng)的 Internet 協(xié)議或 IP 地址進(jìn)行匹配的服務(wù)器。 DNS 服務(wù)器包含公共 IP 地址及其對(duì)應(yīng)域名的數(shù)據(jù)庫(kù)
例如，如果您訪問(wèn) www.example.com ，DNS 服務(wù)器將返回 IP 地址?93.184.216.34?，這是其對(duì)應(yīng)的 IP 地址。
1.2. 3 次 TCP 握手
下一步是與服務(wù)器建立 TCP 連接。這是通過(guò) 3 次 TCP 握手完成的。
首先，客戶端使用 SYN 數(shù)據(jù)包向服務(wù)器發(fā)送打開連接的請(qǐng)求。
服務(wù)器然后用 SYN-ACK 數(shù)據(jù)包響應(yīng)以確認(rèn)請(qǐng)求并請(qǐng)求客戶端打開連接。
最后，客戶端向服務(wù)器發(fā)送確認(rèn)請(qǐng)求的 ACK 數(shù)據(jù)包。
1.3. TLS 握手
如果網(wǎng)站使用 HTTPS（加密的 HTTP 協(xié)議），下一步就是通過(guò) TLS 握手建立 TLS 連接。
在此步驟中，瀏覽器和服務(wù)器之間會(huì)交換更多消息。
客戶端問(wèn)服務(wù)器：瀏覽器向服務(wù)器發(fā)送一條消息，其中包括它支持的 TLS 版本和密碼套件以及稱為客戶端隨機(jī)的隨機(jī)字節(jié)字符串。
服務(wù)器問(wèn)候消息和證書：服務(wù)器發(fā)回一條消息，其中包含服務(wù)器的 SSL 證書、服務(wù)器選擇的密碼套件和服務(wù)器隨機(jī)數(shù)（由服務(wù)器生成的隨機(jī)字節(jié)串）。
身份驗(yàn)證：瀏覽器通過(guò)頒發(fā)它的證書頒發(fā)機(jī)構(gòu)驗(yàn)證服務(wù)器的 SSL 證書。這樣瀏覽器就可以確定服務(wù)器是它所說(shuō)的那個(gè)人。
premaster secret：瀏覽器再發(fā)送一個(gè)稱為 premaster secret 的隨機(jī)字節(jié)串，它使用瀏覽器從服務(wù)器的 SSL 證書中獲取的公鑰加密。 premaster secret 只能由服務(wù)器用私鑰解密。
使用私鑰：服務(wù)器解密預(yù)主密鑰。
創(chuàng)建會(huì)話密鑰：瀏覽器和服務(wù)器從客戶端隨機(jī)數(shù)、服務(wù)器隨機(jī)數(shù)和預(yù)主密鑰生成會(huì)話密鑰。
客戶端完成：瀏覽器向服務(wù)器發(fā)送一條消息，說(shuō)明它已完成。
服務(wù)器完成：服務(wù)器向?yàn)g覽器發(fā)送一條消息，說(shuō)明它也已完成。
實(shí)現(xiàn)安全對(duì)稱加密：握手完成，可以使用會(huì)話密鑰繼續(xù)通信。
完成上述步驟，現(xiàn)在可以開始從服務(wù)器請(qǐng)求和接收數(shù)據(jù)了。
2. 獲取資源
TCP連接建立后，瀏覽器就可以開始從服務(wù)器獲取資源了。
2.1. HTTP 請(qǐng)求
如果我們沒有任何 Web 開發(fā)經(jīng)驗(yàn)，就會(huì)遇到 HTTP 請(qǐng)求的概念。
HTTP 請(qǐng)求用于從服務(wù)器獲取資源。它需要一個(gè) URL 和要處理的請(qǐng)求類型（GET、POST、PUT、DELETE）。瀏覽器還會(huì)向請(qǐng)求添加一些額外的標(biāo)頭以提供額外的上下文。
發(fā)送到服務(wù)器的第一個(gè)請(qǐng)求通常是獲取 HTML 文件的 GET 請(qǐng)求。
2.2. HTTP 響應(yīng)
然后，服務(wù)器針對(duì)給定的請(qǐng)求以適當(dāng)?shù)?HTTP 響應(yīng)進(jìn)行響應(yīng)。
響應(yīng)包含狀態(tài)代碼、標(biāo)頭和正文。
3. 解析HTML
現(xiàn)在是主要部分。瀏覽器收到 HTML 文件后，對(duì)其進(jìn)行解析以生成 DOM（文檔對(duì)象模型）樹。
這是由作為瀏覽器核心的瀏覽器引擎完成的（例如：Firefox 的 Gecko、Safari 的 Webkit、Chrome 的 Blink 等）。
這是一個(gè)示例 HTML 文件：
3.1. Tokenization
顯示網(wǎng)頁(yè)的第一步是標(biāo)記化 HTML 文件。標(biāo)記化是將一串字符分解為對(duì)瀏覽器有意義的塊（稱為標(biāo)記）的過(guò)程。
Tokens?是 DOM 樹的基本構(gòu)建塊。
3.2. 構(gòu)造DOM樹
Lexing 是將一系列標(biāo)記轉(zhuǎn)換為稱為 DOM 樹的樹結(jié)構(gòu)的過(guò)程。
DOM 樹是一種樹狀數(shù)據(jù)結(jié)構(gòu)，表示 HTML 文檔中的節(jié)點(diǎn)。
注意：如果頁(yè)面需要任何外部資源，將按如下方式處理
非阻塞資源是并行獲取的。例如：圖像。
延遲資源是并行獲取的，但在構(gòu)建 DOM 樹后執(zhí)行。例如：帶有?
defer?屬性和 CSS 文件的腳本。阻塞資源是按順序獲取和執(zhí)行的。例如：?
script?沒有?defer?屬性。
4. 解析CSS
DOM樹構(gòu)建完成后，瀏覽器解析CSS文件，生成CSSOM（CSS Object Model）。
這個(gè)過(guò)程類似于使用標(biāo)記化和 CSSOM 生成的 DOM 樹構(gòu)造
5. 執(zhí)行 JavaScript
如前所述，如果頁(yè)面需要阻塞?script?，它將被立即獲取并執(zhí)行，同時(shí) DOM 樹構(gòu)建暫停，否則?script?將在 DOM 樹構(gòu)建完成后獲取并執(zhí)行。
無(wú)論?script?何時(shí)執(zhí)行，它都將由 JavaScript 引擎處理，這與瀏覽器引擎一樣因?yàn)g覽器而異。
5.1.即時(shí)編譯
假設(shè)您熟悉解釋器和編譯器的概念，JavaScript 引擎使用一種稱為 JIT（即時(shí)）編譯的混合方法。
JIT 即?Just In Time，意思是不同于編譯語(yǔ)言，例如 C，編譯是提前完成的（換句話說(shuō)，在代碼的實(shí)際執(zhí)行之前），對(duì)于 JavaScript，編譯是在執(zhí)行期間完成的
6. Rendering（渲染）
終于到了渲染頁(yè)面的時(shí)候了。瀏覽器使用 DOM 樹和 CSSOM 來(lái)渲染頁(yè)面。
6.1.?Render tree construction
第一步是構(gòu)建渲染樹。呈現(xiàn)樹是 DOM 樹的子集，它只包含頁(yè)面上可見的元素。
6.2. Layout
下一步是布局渲染樹。這是通過(guò)計(jì)算渲染樹中每個(gè)元素的確切大小和位置來(lái)完成的。
每當(dāng)我們更改 DOM 中影響頁(yè)面布局的某些內(nèi)容時(shí)，甚至部分更改，都會(huì)發(fā)生此步驟。
重新計(jì)算元素位置的情況示例有：
從 DOM 中添加或刪除元素
調(diào)整瀏覽器窗口大小
更改元素的?
width?、?height?或?position
6.3. Painting
最后，瀏覽器決定哪些節(jié)點(diǎn)需要可見并計(jì)算它們?cè)谝暱谥械奈恢?，是時(shí)候在屏幕上繪制它們（渲染像素）了。這個(gè)階段也被稱為光柵化階段，瀏覽器將在布局階段計(jì)算的每個(gè)元素轉(zhuǎn)換為屏幕上的實(shí)際像素。
就像布局階段一樣，每次我們更改 DOM 中元素的外觀時(shí)都會(huì)發(fā)生此階段，即使是部分更改也是如此。
重新計(jì)算元素位置的情況示例有：
更改元素的?
outline更改元素的?
opacity?或?visibility更改元素的?
background color
6.4. Layering & Compositing?
最后一步是合成圖層。這是由瀏覽器完成的，以優(yōu)化渲染過(guò)程。
合成是一種將頁(yè)面的各個(gè)部分分成層的技術(shù)，分別繪制它們并在稱為合成器線程的單獨(dú)線程中合成為頁(yè)面。當(dāng)文檔的各個(gè)部分繪制在不同的層中并相互重疊時(shí)，合成是必要的，以確保它們以正確的順序繪制到屏幕上并正確呈現(xiàn)內(nèi)容
注意：DOM 更新，特別是布局和繪制，是非常昂貴的操作，在低端設(shè)備上可以明顯注意到。因此，盡量減少觸發(fā)次數(shù)很重要。
原文地址：https://tapajyoti-bose.medium.com/deep-dive-into-how-web-browsers-work-with-illustrations-%EF%B8%8F-b6cf69af1a08
