Web 瀏覽器無疑是用戶訪問互聯(lián)網(wǎng)很常見的入口。瀏覽器憑借其免安裝和跨平臺等優(yōu)勢，逐漸取代了很多傳統(tǒng)的富客戶端。

[[325709]]

Web 瀏覽器通過向 URL 發(fā)送網(wǎng)絡(luò)請求來訪問 Web 服務(wù)器資源，并以交互性的方式展示這些內(nèi)容?；静僮靼ǐ@取、處理、顯示和存儲。常見的瀏覽器包括 Internet Explorer、Firefox、谷歌 Chrome、Safari 和 Opera 等。

瀏覽器架構(gòu)圖

瀏覽器主要由以下幾個部分組成：

1. 用戶界面
2. 瀏覽器引擎
3. 渲染引擎
4. 數(shù)據(jù)存儲層
5. UI BackEnd
6. JavaScript 解析器 (腳本引擎)
7. 網(wǎng)絡(luò)層

用戶界面

這是用戶與瀏覽器發(fā)生交互的區(qū)域。瀏覽器的外觀沒有特定的標(biāo)準(zhǔn)，HTML5 規(guī)范沒有規(guī)定 UI 元素該長什么樣，但是列了一些常見元素：地址欄、個人信息欄、滾動條、狀態(tài)欄和工具欄等。

瀏覽器引擎

它提供了 UI 與底層渲染引擎之間的接口，根據(jù)用戶交互進(jìn)行查詢和操控渲染引擎，提供初始化加載 URL 的方法，并負(fù)責(zé)重新加載、返回和前進(jìn)等操作。

渲染引擎

渲染引擎負(fù)責(zé)在屏幕上顯示網(wǎng)頁內(nèi)容。渲染引擎的主要工作是解析 HTML。渲染引擎默認(rèn)可展示 HTML、XML和圖片，還可以通過插件或擴(kuò)展程序支持其他數(shù)據(jù)類型。

渲染引擎工作過程

現(xiàn)代瀏覽器使用不同的渲染引擎：

Gecko：Firefox

Webkit：Safari

Blink：Chrome, Opera (version 15 以上).

可以參考這篇：各種瀏覽器引擎傻傻分不清楚?終于有人說明白了!

web 內(nèi)容渲染過程大致如下：

HTML 數(shù)據(jù)轉(zhuǎn)成 DOM

來自網(wǎng)絡(luò)層的請求內(nèi)容在渲染引擎中接收(通常是 8 kb 的塊)，然后將原始字節(jié)轉(zhuǎn)換為 HTML 文件中的字符(基于字符編碼)。接著詞法分析器進(jìn)行詞法分析，將輸入分解為各種標(biāo)記(token)。在標(biāo)記化過程中，文件中的每個開始和結(jié)束標(biāo)簽都被記錄下來。它知道如何去掉不相關(guān)的字符，比如空格和換行符。

接著，解析器進(jìn)行語法分析，通過分析文檔結(jié)構(gòu)，應(yīng)用語言語法規(guī)則構(gòu)造解析樹。解析過程是迭代進(jìn)行的。它向詞法分析器請求新的 token，如果匹配語法規(guī)則，token 就被添加到解析樹中。然后再請求另一個 token。如果沒有匹配的規(guī)則，解析器將在內(nèi)部存儲 token，并不斷請求新 token，直到找到匹配所有內(nèi)部存儲 token 的規(guī)則。如果沒有找到規(guī)則，解析器將拋出異常，說明文檔無效，包含語法錯誤。

這些節(jié)點(diǎn)在 DOM(文檔對象模型)樹數(shù)據(jù)結(jié)構(gòu)中互相鏈接，建立父子關(guān)系、相鄰兄弟關(guān)系。

dom-tree

CSS 數(shù)據(jù)轉(zhuǎn)成 CSSOM

CSS 數(shù)據(jù)原始字節(jié)被轉(zhuǎn)換成字符、token、節(jié)點(diǎn)，最終變成 CSSOM(CSS 對象模型)。CSS 的層級特性決定了元素會應(yīng)用什么樣式。元素的樣式數(shù)據(jù)可以來自父元素(通過繼承)，也可以直接在元素上設(shè)置。瀏覽器需要遞歸遍歷 CSS 樹結(jié)構(gòu)來確定特定元素的樣式。

cssom-tree

DOM 與 CSSOM 組成渲染樹

DOM 樹包含了 HTML 元素之間的關(guān)系信息，CSSOM 樹則包含了這些元素的樣式信息。從根節(jié)點(diǎn)開始，瀏覽器會遍歷每一個可見節(jié)點(diǎn)。有些節(jié)點(diǎn)是隱藏的(通過 CSS 控制)，不會出現(xiàn)在渲染結(jié)果中。對于每個可見節(jié)點(diǎn)，瀏覽器找到 CSSOM 中定義的相關(guān)規(guī)則進(jìn)行匹配，最終這些節(jié)點(diǎn)會帶著內(nèi)容和樣式出現(xiàn)在渲染樹中。

render-tree

布局

接下來進(jìn)行內(nèi)容布局。內(nèi)容的實(shí)際尺寸和位置需要經(jīng)過計算才能渲染到頁面上(瀏覽器視口)。這個過程也叫重排(reflow)。HTML 采用基于流的布局模型，也就是說大部分情況下，幾何位置是一次性計算出來的(內(nèi)容大小或位置發(fā)生變化，需要重新計算)。這個過程是從文檔根元素開始，遞歸完成的。

繪制

通過遍歷每個渲染器，并調(diào)用paint方法在屏幕上顯示內(nèi)容。繪制過程可以是全局的(繪制整個樹)，也可以是增量的(渲染樹在屏幕上驗(yàn)證某個矩形區(qū)域)，操作系統(tǒng)在這些特定節(jié)點(diǎn)上生成繪制事件，整個樹不受影響。繪制是一個漸進(jìn)的過程，其中一部分在被解析和渲染過后，而該過程將繼續(xù)處理其余部分。

JavaScript 解析器 (JS 引擎)

JavaScript 是一種腳本語言，可動態(tài)更新 Web 內(nèi)容、控制多媒體和動畫等，這些是通過瀏覽器的 JS 引擎完成的。DOM 和 CSSOM 提供了 JS 接口，都可以通過 JS 修改。由于瀏覽器不確定某些 JS 會做什么，因此它會在遇到 script 標(biāo)簽后會立即暫停構(gòu)建 DOM 樹。

JS 解析器在接收到服務(wù)器發(fā)送來的代碼后，會立即進(jìn)行解析。代碼被轉(zhuǎn)換成機(jī)器能理解的對象表示形式。保存了所有解析信息的對象叫做抽象語法樹(AST)，這些對象又被解析器轉(zhuǎn)換成字節(jié)碼。這種編譯方式叫做Just In Time (JITs) ，也就是 JavaScript 從服務(wù)器下載后在客戶端實(shí)時編譯。解析器和編譯器是組合使用的，解析器立即處理源代碼，編譯器則生成機(jī)器碼，客戶端操作系統(tǒng)可直接運(yùn)行。

不同瀏覽器的 JS 引擎

Chrome: V8 引擎 (Node JS was built on top of this)

Mozilla: Spider Monkey (以前叫 ‘Squirrel Fish’)

Microsoft Edge: Chakra

Safari: Nitro

UI 后臺

用于繪制基礎(chǔ)控件，比如復(fù)選框和窗口等。底層使用操作系統(tǒng)的用戶界面方法，暴露通用的接口，跟平臺無關(guān)。

數(shù)據(jù)存儲層

這是持久化層，輔助瀏覽器保存一些數(shù)據(jù)(比如cookies，session storage，indexed DB，Web SQL，書簽，用戶偏好設(shè)置等)。HTML5 規(guī)范提出了瀏覽器端的完整數(shù)據(jù)庫功能。

網(wǎng)絡(luò)層

這一層處理瀏覽器的各種網(wǎng)絡(luò)通信。瀏覽器使用各種通信協(xié)議獲取網(wǎng)絡(luò)資源，比如 HTTP、HTTPs、FTP 等。

瀏覽器用 DNS 解析 URL。這些解析記錄緩存在瀏覽器、操作系統(tǒng)、路由器或者 ISP 中。如果請求的 URL 不在緩存中，ISP 的 DNS 服務(wù)器首先發(fā)起 DNS 查詢，找到服務(wù)器的 IP 地址。找到正確的 IP 地址后，瀏覽器使用特定的協(xié)議與服務(wù)器建立連接。瀏覽器向服務(wù)器發(fā)送 SYN 數(shù)據(jù)包，詢問服務(wù)器是否打開了 TCP 連接。服務(wù)器用 SYN/ACK 數(shù)據(jù)包響應(yīng)作為前面 SYN 的應(yīng)答。

瀏覽器接收到應(yīng)答后，再向服務(wù)器發(fā)送 ACK 數(shù)據(jù)包。通過這樣的三次握手就建立了 TCP 連接。一旦建立了連接，就可以傳輸數(shù)據(jù)了。傳輸數(shù)據(jù)過程中必須遵守 HTTP 協(xié)議的相關(guān)要求，包括請求和響應(yīng)的規(guī)則等。

瀏覽器比較

如今市面上有各種不同的瀏覽器，盡管核心功能都是相同的，但是它們之間的區(qū)別也是多方面的。包括平臺(Linux，Windows，Mac，BSD 以及其他 Unix 系統(tǒng))、協(xié)議、用戶界面、HTML5 支持情況、是否開源、所有權(quán)等等，具體可參考維基百科https://en.wikipedia.org/wiki/Comparison_of_web_browsers.

以上是對瀏覽器工作原理的粗淺描述，當(dāng)然實(shí)際上瀏覽器底層還是比較復(fù)雜的，遠(yuǎn)不是幾張圖和一篇文章能說清楚的。有興趣的可以去看看瀏覽器的源碼，進(jìn)行深入了解。