五分鐘了解瀏覽器的工作原理
Web 瀏覽器無疑是用戶訪問互聯網最常見的入口。瀏覽器憑藉其免安裝和跨平台等優勢，逐漸取代了很多傳統的富客戶端。
Web 瀏覽器通過向 URL 發送網路請求來訪問 Web 伺服器資源，並以交互性的方式展示這些內容。基本操作包括獲取、處理、顯示和存儲。常見的瀏覽器包括 Internet Explorer、Firefox、Google Chrome、Safari 和 Opera 等。
架構圖
瀏覽器主要由以下幾個部分組成：
- 用戶介面
- 瀏覽器引擎
- 渲染引擎
- 數據存儲層
- UI BackEnd
- JavaScript 解析器 (腳本引擎)
- 網路層
用戶介面
這是用戶與瀏覽器發生交互的區域。瀏覽器的外觀沒有特定的標準，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 支援情況、是否開源、所有權等等，具體可參考維基百科.
以上是對瀏覽器工作原理的大致描述，當然實際上瀏覽器底層還是比較複雜的，遠不是幾張圖和一篇文章能說清楚的。有興趣的可以去看看瀏覽器的源碼，進行深入了解。
參考資料
//www.html5rocks.com/en/tutorials/internals/howbrowserswork/
//grosskurth.ca/papers/browser-archevol-20060619.pdf
//developers.google.com/web/fundamentals/performance/critical-rendering-path/
//dev.w3.org/html5/spec-LC/
看到這個頗有氣質的 logo，不來關注下嗎？
