作者簡介：

李中凱

八年多工作經驗 前端負責人，

擅長JavaScript/Vue。

掘金文章專欄：KaysonLi 的個人主頁 - 專欄 - 掘金

---

Web 瀏覽器無疑是用戶訪問互聯網最常見的入口。瀏覽器憑借其免安裝和跨平臺等優勢，逐漸取代了很多傳統的富客戶端。

Web 瀏覽器通過向 URL 發送網絡請求來訪問 Web 服務器資源，并以交互性的方式展示這些內容。基本操作包括獲取、處理、顯示和存儲。常見的瀏覽器包括 Internet Explorer、Firefox、谷歌 Chrome、Safari 和 Opera 等。

瀏覽器架構圖

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

用戶界面

瀏覽器引擎

渲染引擎

數據存儲層

UI BackEnd

JavaScript 解析器 (腳本引擎)

網絡層

用戶界面

這是用戶與瀏覽器發生交互的區域。瀏覽器的外觀沒有特定的標準，HTML5 規范沒有規定 UI 元素該長什么樣，但是列了一些常見元素：地址欄、個人信息欄、滾動條、狀態欄和工具欄等。

瀏覽器引擎

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

渲染引擎

渲染引擎負責在屏幕上顯示網頁內容。渲染引擎的主要工作是解析 HTML。渲染引擎默認可展示 HTML、XML和圖片，還可以通過插件或擴展程序支持其他數據類型。

渲染引擎工作過程

現代瀏覽器使用不同的渲染引擎：
Gecko：Firefox
Webkit：Safari
Blink：Chrome, Opera (version 15 以上).

web 內容渲染過程大致如下：

HTML 數據轉成 DOM

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

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

這些節點在 DOM(文檔對象模型)樹數據結構中互相鏈接，建立父子關系、相鄰兄弟關系。

dom-tree

CSS 數據轉成 CSSOM

CSS 數據原始字節被轉換成字符、token、節點，最終變成 CSSOM（CSS 對象模型）。CSS 的層級特性決定了元素會應用什么樣式。元素的樣式數據可以來自父元素（通過繼承），也可以直接在元素上設置。瀏覽器需要遞歸遍歷 CSS 樹結構來確定特定元素的樣式。

cssom-tree

DOM 與 CSSOM 組成渲染樹

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

render-tree

布局

接下來進行內容布局。內容的實際尺寸和位置需要經過計算才能渲染到頁面上（瀏覽器視口）。這個過程也叫重排（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 后臺

用于繪制基礎控件，比如復選框和窗口等。底層使用操作系統的用戶界面方法，暴露通用的接口，跟平臺無關。

數據存儲層

這是持久化層，輔助瀏覽器保存一些數據（比如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 支持情況、是否開源、所有權等等，

---

作者簡介：

李中凱

八年多工作經驗 前端負責人，

擅長JavaScript/Vue。

掘金文章專欄：KaysonLi 的個人主頁 - 專欄 - 掘金

本文已經獲得李中凱老師授權轉發，其他人若有興趣轉載，請直接聯系作者授權。

更多的學習資料，請看這里：

http://www.jnshu.com/login/1/36856070?source=zhihu-article-lizhongkai

總結

以上是生活随笔為你收集整理的火狐浏览器 xml 解析错误:文档元素后存有无效内容_五分钟了解浏览器工作原理...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。