瀏覽器內核、JS 引擎、頁面呈現原理及其優化

瀏覽器內核又叫渲染引擎，主要負責 HTML、CSS 的解析，頁面佈局、渲染與複合層合成。瀏覽器內核的不一樣帶來的主要問題是對 CSS 的支持度與屬性表現差別。

webkit

Wekbit是一個開源的Web瀏覽器引擎，也就是瀏覽器的內核。Apple的Safari, Google的Chrome, Nokia S60平臺的默認瀏覽器，Apple手機的默認瀏覽器，Android手機的默認瀏覽器均採用的Webkit做爲器瀏覽器內核

Blink

Blink是在Wekbit的基礎上的改進，是如今對新特性支持度最好的內核

Gecko

Firefox

Trident

微軟的IE，IE4+ 的內核，一直持續到 IE11，EdgeHTML 是微軟拋棄 IE 後開發的全新內核

webkit組成

• webkit 包含了許多不一樣平臺對webkit封裝的實現，即抽象出了與瀏覽器所能直接對應的一些概念的實現。如，WebView, WebPage, WebFrame等
• WebCore 實現了對文檔的模型化，包括了CSS，DOM，Render等的實現
• JavaScript Core 對JavaScript支持的實現

瀏覽器內核與 JS 引擎一覽

JavaScript 引擎

JavaScript 負責 JavaScript 代碼的解釋與執行，主流的 JavaScript 引擎有：V八、SpiderMonkey、JavaScriptCore、Chakra。

頁面呈現原理

一個頁面的呈現，粗略的說會通過如下這些步驟：

1. DOM 樹的構建（Parse HTML）
2. 構建 CSSOM 樹（Recaculate Style） 爲何是 Re-caculate Style 呢？這是由於瀏覽器自己有 User Agent StyleSheet，因此最終的樣式是咱們的樣式代碼樣式與用戶代理默認樣式覆蓋/從新計算獲得的。
3. 合併 DOM 樹與 CSSOM 樹爲 Render 樹
4. 佈局（Layout）
5. 繪製（Paint）
6. 複合圖層化（Composite）圖層化是本身理解後形象的意譯其中佈局（Layout）環節主要負責各元素尺寸、位置的計算，繪製（Paint）環節則是繪製頁面像素信息，合成（Composite）環節是多個複合層的合成，最終合成的頁面被用戶看到。

• 當遇到 JavaScript 腳本或者外部 JavaScript 代碼時，瀏覽器便中止 DOM 的構建（阻塞 1）

那是否停下 DOM 的構建的同時，立馬就執行 JavaScript 代碼或者下載外部腳本執行，其實仍是要視狀況而定，見2

• 當遇到 <script> 標籤須要執行腳本代碼時，瀏覽器會檢查是否這個 <script> 標籤以上的 CSS 文件是否已經加載並用於構建了 CSSOM，若是 <script> 上部還有 CSS 樣式沒加載，則瀏覽器會等待 <script> 上方樣式的加載完成纔會執行該 <script> 內的腳本（阻塞 2）
• DOM 樹與 CSSOM 樹的成功構建是後面步驟的根基（同步阻塞）
• 同時外部腳本、外部樣式表的下載也是耗費時間較多的點

CSS解析器

JavaScript 負責 JavaScript 代碼的解釋與執行，主流的 JavaScript 引擎有：V八、SpiderMonkey、JavaScriptCore、Chakra。

頁面呈現原理

CSS規範定義了css的詞法及語法文法。

這個結構在下面的定義中正式的定義了：

ruleset
    : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
    ;

這說明，一個規則集合具備一個或是可選個數的多個選擇器，這些選擇器以逗號和空格（S表示空格）進行分隔。每一個規則集合包含大括號及大括號中的一條或多條以分號隔開的聲明。聲明和選擇器在後面進行定義。

Webkit CSS解析器（Webkit CSS parser）

Webkit使用Flex和Bison解析生成器從CSS語法文件中自動生成解析器。回憶一下解析器的介紹，Bison建立一個自底向上的解析器，Firefox使用自頂向下解析器。它們都是將每一個css文件解析爲樣式表對象，每一個對象包含css規則，css規則對象包含選擇器和聲明對象，以及其餘一些符合css語法的對象。