瀏覽器內核-流程概況

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 樹」，解析是一個動詞，那這個動做背後的邏輯是什麼呢？

下一篇文章

解析-理論剖析