3-瀏覽器核心-流程概況
前文中我們將「面試題」的解決方案已經全部交代了一遍，同時留下了一個進一步思考的問題：
Renderer Process 是如何將文件渲染出來的呢？
在介紹如何渲染的問題之前，我們還是需要了解一下什麼是 Renderer Process，即瀏覽器核心。
瀏覽器核心是由各大瀏覽器廠商依照 W3C 標準自行研發。因為由各大廠商自主研發，必定產生不同的種類，我們先來看看市面上主流瀏覽器核心：
Trident：俗稱 IE 核心，也被叫做 MSHTML 引擎，目前在使用的瀏覽器有 IE11 -，以及各種國產多核瀏覽器中的IE相容模組。另外微軟的 Edge 瀏覽器不再使用 MSHTML 引擎，而是使用類全新的引擎 EdgeHTML。
Gecko：俗稱 Firefox 核心，Netscape6 開始採用的核心，後來的 Mozilla FireFox（火狐瀏覽器）也採用了該核心，Gecko 的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。因為這是個開源核心，因此受到許多人的青睞，Gecko 核心的瀏覽器也很多，這也是 Gecko 核心雖然年輕但市場佔有率能夠迅速提高的重要原因。
Presto：Opera 前核心，為啥說是前核心呢？因為 Opera12.17 以後便擁抱了 Google Chrome 的 Blink 核心，此核心就沒了寄託。
Webkit：Safari 核心，也是 Chrome 核心原型，主要是 Safari 瀏覽器在使用的核心，也是特性上表現較好的瀏覽器核心。也被大量使用在移動端瀏覽器上。
Blink： 由 Google 和 Opera Software 開發，在Chrome（28及往後版本）、Opera（15及往後版本）和Yandex瀏覽器中使用。Blink 其實是 Webkit 的一個分支，新增了一些優化的新特性，例如跨程式的 iframe，將 DOM 移入 JavaScript 中來提高 JavaScript 對 DOM 的訪問速度等，目前較多的移動端應用內嵌的瀏覽器核心也漸漸開始採用 Blink。
在瀏覽器架構-原理篇的部分，我們已經給出來渲染引擎相關的定義。
負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在螢幕上。
從定義中得出，其主要核心作用是將請求內容顯示在瀏覽器的視窗中。而我們知道請求內容的種類較多，但是渲染引擎預設展示是 HTML 文件、XML 文件和圖片，再有外掛支援的情況下方可支援其他的資源，如 pdf等類。
主流程
起先將請求的內容轉化為 8Kb 的 chunks，之後開始解析 HTML 文件構建 DOM 樹 ->解析樣式結合DOM 樹構建 render tree -> 佈局（layout） -> 繪製（painting）。
render tree：每一個節點都是一個帶有視覺化樣式和尺寸資訊的矩形，節點按照正確的順序去排列展示的。
layout：該部分目的就是計算出每一個節點的在螢幕上正確的位置。
painting：遍歷 render tree，在使用者介面後端（UI Backend layer）的幫助下繪製每一個節點。
整個流程是一個逐漸的過程，為了更好的使用者體驗，需要儘快的展示內容，所以在瀏覽器不會等所有的HTML解析完，才開始構建和佈局 render tree，這是同步線性進行的流程。這就說明內容會在解析和展示的同時，有其餘內容還在網路處理中。
因瀏覽器核心不同，所以在整個流程會有寫不同，我們分別看看 Webkit 和 Gecko流程：
Webkit 主要流程:
Gecko 主要流程:
以上便是渲染引擎的主流程介紹，但回到主流程的第一步，「解析 HTML 為 DOM 樹」，解析是一個動詞，那這個動作背後的邏輯是什麼呢？