簡述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

摘要： 一、瞭解瀏覽器 瀏覽器核心概念 瀏覽器核心分為兩部分：渲染引擎（render engin）、js引擎(js engin) 渲染引擎：負責對網頁語法的解釋（HTML、javaScript、引入css等），並渲染（顯示）網頁 js引擎：javaScript的解釋、編譯...

一、瞭解瀏覽器

1. 瀏覽器核心概念

瀏覽器核心分為兩部分：渲染引擎（render engin）、js引擎(js engin)

渲染引擎：負責對網頁語法的解釋（HTML、javaScript、引入css等），並渲染（顯示）網頁

js引擎：javaScript的解釋、編譯、執行

主流核心：Trident(IE)、Gecko(FireFox)、Webkit(Safari)、Presto(opera前核心、已廢棄)、blink(Chrome)

2. webkit瀏覽器渲染引擎的進度史

3. webkit瀏覽器核心部分內容介紹

HTML直譯器：解釋HTML文字的直譯器，主要作用是將HTML文字解釋成DOM樹，DOM是一種文件表示方法。

CSS直譯器：級聯樣式表的直譯器，它的作用是為DOM中的各個元素物件計算出樣式資訊，從而為計算最後網頁的佈局提供基礎設施。

佈局：在DOM建立之後，webkit需要將其中的元素物件同樣式資訊結合起來，計算它們的大小位置等佈局資訊，形成一個能夠表示這所有信息的內部比偶表示模型。

JavaScript引擎：使用JavaScript程式碼可以修改網頁的內容，也能修改CSS的資訊，JavaScript引擎能解釋JavaScript程式碼並通過DOM介面和CSSOM檢視模式來修改網頁內容和樣式資訊，從而改變渲染結果。

繪圖：使用圖形庫將佈局計算後的各個網頁的節點繪製成影象結果。

二、Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

1. ofollow,noindex">V8
2. Webkit
   (refer: Webkit技術內幕)
   

   蘋果公司基於KDE（Linux桌面系統）的KHTML開源，包括Webcore和JavaScriptCore兩個引擎。蘋果比較了Gecko和KHTML之後，選擇後者的原因，是KHTML擁有清晰的原始碼結構和極快的渲染速度。2008年，谷歌公司釋出的chrome瀏覽器，採用的chromium核心是基於Webkit而來

   應用：safari, mail, app store等應用

   webkit佈局：

   當webkit建立RenderObject物件之後，每個物件是不知道自己的位置、大小等資訊的，webkit根據盒模型來計算他們的位置、大小等資訊的過程稱為佈局計算/排版。

   佈局計算分類：第一類是對整個RenderObject樹進行的計算；第二類是對RenderObject樹中某個子樹的計算，常見於文字元素或者overflow：auto塊的計算。

   佈局計算：佈局計算是一個遞迴的過程，這是因為一個節點的大小通常需要先計算它的子節點的位置、大小等資訊。

   補充：

   為什麼說transform實現動畫較直接設定幾何屬性效能較好？

   1.webkit渲染過程：style -> Layout(reflow發生在這) -> Paint（repaint發生在這） -> Composite，transform是位於’Composite（渲染層合併）‘，而width、left、margin等則是位於‘Layout（佈局）’層，這必定導致reflow。

   2.現代瀏覽器針對transform等開啟GPU加速。

   style -> Layout(reflow發生在這) -> Paint（repaint發生在這） -> Composite（transform發生在這個時候）

   （refer:

   CSS Animation效能優化

   從重繪重排角度講解transform的動畫效能

   ）

3. JavaScriptCore 引擎

   一開始它是基於KJS開發的，是基於抽象語法樹的直譯器，效能較差。2008年蘋果重寫了編譯器和位元組碼直譯器，叫SquirrelFish

   

   （refer：J avaScriptCore深度解析 ）

4. Chromium/Blink

   Chromium基於webkit，卻把Webkit的程式碼梳理得可讀性更高，多程序框架

   Chromium載入網頁的過程，需要Browser程序和Render程序協作完成。載入網頁的過程由Browser程序發起，向伺服器請求網頁內容的過程也是由Browser程序完成。Render程序負責對下載回來的網頁內容進行解析，解析之後得到一個DOM Tree。有了這個DOM Tree之後，Render程序就可以對網頁進行渲染了

   （refer: Chromium網頁載入介紹）

   Blink：Chromium專案中研發的渲染引擎，基於並脫離Webkit

   更強大的渲染和佈局：

   1. 追求多執行緒佈局
   2. 樣式的重新計算
   3. 不為隱藏的iframe建立渲染器
   4. 為外掛設定為display：none時，修復外掛解除安裝等舊錯誤
   5. 非同步解除安裝iframe，速度更快

   （refer：blink的開發者FAQ）

5. CEF（Chromium Embeded Framework）

一個將瀏覽器功能（頁面渲染、js執行）嵌入到其他應用程式的框架，支援windows, Linux, Mac平臺

CEF的歷史：

• CEF有兩種版本的Chromium Embedded Framework：CEF 1和CEF 3
• 在Chromium Content API出現後，CEF 2的開發被放棄。
• CEF 1是基於Chromium WebKit API的單程序實現。它不再積極發展或支援。
• CEF 3是基於Chromium Content API的多程序實現，其效能類似於Google Chrome。

應用：

1）做一個瀏覽器

2) 跨平臺的桌面底層方案electron.js

3) 客戶端（如：桌面端app應用）

好處：開發web和native混合的應用非常方便

三、總結

V8引擎是谷歌公司自主研發的js引擎

Webkit基於KHTML，包含JavaScriptCore

Chromium基於Webkit，衍生出Blink

CEF是包含Chromium瀏覽器的應用框架

一切鼻祖：KHTML