Web 瀏覽器無疑是使用者訪問網際網路最常見的入口。瀏覽器憑藉其免安裝和跨平臺等優勢，逐漸取代了很多傳統的富客戶端。 Web 瀏覽器通過向 URL 傳送網路請求來訪問 Web 伺服器資源，並以互動性的方式展示這些內容。基本操作包括獲取、處理、顯示和儲存。常見的瀏覽器包括 Internet Explorer、Firefox、谷歌 Chrome、Safari 和 Opera 等。 ### 架構圖  瀏覽器主要由以下幾個部分組成： 1. 使用者介面 2. 瀏覽器引擎 3. 渲染引擎 4. 資料儲存層 5. UI BackEnd 6. JavaScript 解析器 (指令碼引擎) 7. 網路層 #### 使用者介面 這是使用者與瀏覽器發生互動的區域。瀏覽器的外觀沒有特定的標準，HTML5 規範沒有規定 UI 元素該長什麼樣，但是列了一些常見元素：位址列、個人資訊欄、滾動條、狀態列和工具欄等。 #### 瀏覽器引擎 它提供了 UI 與底層渲染引擎之間的介面，根據使用者互動進行查詢和操控渲染引擎，提供初始化載入 URL 的方法，並負責重新載入、返回和前進等操作。 #### 渲染引擎 渲染引擎負責在螢幕上顯示網頁內容。渲染引擎的主要工作是解析 HTML。渲染引擎預設可展示 HTML、XML和圖片，還可以通過外掛或擴充套件程式支援其他資料型別。  現代瀏覽器使用不同的渲染引擎。 **Gecko**： Firefox **Webkit**：Safari **Blink**：Chrome, Opera (version 15 onwards). web 內容是通過一系列的過程顯示出來的： ##### HTML 資料轉成 DOM 來自網路層的請求內容在渲染引擎中接收(通常是 8 kb 的塊)，然後將原始位元組轉換為 HTML 檔案中的字元(基於字元編碼)。接著詞法分析器進行詞法分析，將輸入分解為各種標記（token）。在標記化過程中，檔案中的每個開始和結束標籤都被記錄下來。它知道如何去掉不相關的字元，比如空格和換行符。 接著，解析器進行語法分析，通過分析文件結構，應用語言語法規則構造解析樹。解析過程是迭代進行的。它向詞法分析器請求新的 token，如果匹配語法規則，token 就被新增到解析樹中。然後再請求另一個 token。如果沒有匹配的規則，解析器將在內部儲存 token，並不斷請求新 token，直到找到匹配所有內部儲存 token 的規則。如果沒有找到規則，解析器將丟擲異常，說明文件無效，包含語法錯誤。 這些節點在 DOM(文件物件模型)樹資料結構中互相連結，建立父子關係、相鄰兄弟關係。  ##### CSS 資料轉成 CSSOM CSS 資料原始位元組被轉換成字元、token、節點，最終變成 CSSOM（CSS 物件模型）。CSS 的層級特性決定了元素會應用什麼樣式。元素的樣式資料可以來自父元素（通過繼承），也可以直接在元素上設定。瀏覽器需要遞迴遍歷 CSS 樹結構來確定特定元素的樣式。  ##### DOM 與 CSSOM 組成渲染樹 DOM 樹包含了 HTML 元素之間的關係資訊，CSSOM 樹則包含了這些元素的樣式資訊。從根節點開始，瀏覽器會遍歷每一個可見節點。有些節點是隱藏的（通過 CSS 控制），不會出現在渲染結果中。對於每個可見節點，瀏覽器找到 CSSOM 中定義的相關規則進行匹配，最終這些節點會帶著內容和樣式出現在渲染樹中。  ##### 佈局 接下來進行內容佈局。內容的實際尺寸和位置需要經過計算才能渲染到頁面上（瀏覽器視口）。這個過程也叫重排（reflow）。HTML 採用基於流的佈局模型，也就是說大部分情況下，幾何位置是一次性計算出來的（內容大小或位置發生變化，需要重新計算）。這個過程是從文件根元素開始，遞迴完成的。 ##### 繪製 通過遍歷每個渲染器，並呼叫`paint`方法在螢幕上顯示內容。 繪製過程可以是全域性的（繪製整個樹），也可以是增量的（渲染樹在螢幕上驗證某個矩形區域），作業系統在這些特定節點上生成繪製事件，整個樹不受影響。繪製是一個漸進的過程，其中一部分在被解析和渲染過後，而該過程將繼續處理其餘部分。 #### JavaScript 解析器 (JS 引擎) JavaScript 是一種指令碼語言，可動態更新 Web 內容、控制多媒體和動畫等，這些是通過瀏覽器的 JS 引擎完成的。DOM 和 CSSOM 提供了 JS 介面，都可以通過 JS 修改。 由於瀏覽器不確定某些 JS 會做什麼，因此它會在遇到 `script` 標籤後會立即暫停構建 DOM 樹。  JS 解析器在接收到伺服器傳送來的程式碼後，會立即進行解析。程式碼被轉換成機器能理解的物件表示形式。儲存了所有解析資訊的物件叫做抽象語法樹（AST），這些物件又被解析器轉換成位元組碼。這種編譯方式叫做Just In Time (JITs) ，也就是 JavaScript 從伺服器下載後在客戶端實時編譯。解析器和編譯器是組合使用的，解析器立即處理原始碼，編譯器則生成機器碼，客戶端作業系統可直接執行。 ##### 不同瀏覽器的 JS 引擎 **Chrome**: V8 引擎 (Node JS was built on top of this) **Mozilla**: Spider Monkey (以前叫 ‘Squirrel Fish’) **Microsoft Edge**: Chakra **Safari**: Nitro #### UI Back End 用於繪製基礎控制元件，比如複選框和視窗等。底層使用作業系統的使用者介面方法，暴露通用的介面，跟平臺無關。 #### 資料儲存層 這是持久化層，輔助瀏覽器儲存一些資料（比如cookies，session storage，indexed DB，Web SQL，書籤，使用者偏好設定等）。HTML5 規範提出了瀏覽器端的完整資料庫功能。 #### 網路層 這一層處理瀏覽器的各種網路通訊。瀏覽器使用各種通訊協議獲取網路資源，比如 HTTP、HTTPs、FTP 等。 瀏覽器用 DNS 解析 URL。這些解析記錄快取在瀏覽器、作業系統、路由器或者 ISP 中。如果請求的 URL 不在快取中，ISP 的 DNS 伺服器首先發起 DNS 查詢，找到伺服器的 IP 地址。找到正確的 IP 地址後，瀏覽器使用特定的協議與伺服器建立連線。瀏覽器向伺服器傳送 SYN 資料包，詢問伺服器是否打開了 TCP 連線。伺服器用 SYN/ACK 資料包響應作為前面 SYN 的應答。 瀏覽器接收到應答後，再向伺服器傳送 ACK 資料包。通過這樣的三次握手就建立了 TCP 連線。一旦建立了連線，就可以傳輸資料了。傳輸資料過程中必須遵守 HTTP 協議的相關要求，包括請求和響應的規則等。 #### 瀏覽器比較 如今市面上有各種不同的瀏覽器，儘管核心功能都是相同的，但是它們之間的區別也是多方面的。包括平臺（Linux，Windows，Mac，BSD 以及其他 Unix 系統）、協議、使用者介面、HTML5 支援情況、是否開源、所有權等等，具體可參考[維基百科](https://en.wikipedia.org/wiki/Comparison_of_web_browsers). 以上是對瀏覽器工作原理的大致描述，當然實際上瀏覽器底層還是比較複雜的，遠不是幾張圖和一篇文章能說清楚的。有興趣的可以去看看瀏覽器的原始碼，進行深入瞭解。 #### 參考資料 [https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) [https://grosskurth.ca/papers/browser-archevol-20060619.pdf](https://grosskurth.ca/papers/browser-archevol-20060619.pdf) [https://developers.google.com/web/fundamentals/performance/critical-rendering-path/](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) [https://dev.w3.org/html5/spec-LC/](https://dev.w3.org/html5/spec-LC/) 看到這個頗有氣質的 logo，不來關注下嗎？ ![](https://s1.ax1x.com/2020/04/08/GR7