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

一、瞭解瀏覽器

瀏覽器核心概念

瀏覽器核心分為兩部分：渲染引擎（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

V8（在這裡詳細瞭解）
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的動畫效能
）
JavaScriptCore 引擎
一開始它是基於KJS開發的，是基於抽象語法樹的直譯器，效能較差。2008年蘋果重寫了編譯器和位元組碼直譯器，叫SquirrelFish

（refer：JavaScriptCore深度解析）
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

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

相關文章