簡述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
- ofollow,noindex">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:
）
-
一開始它是基於KJS開發的，是基於抽象語法樹的直譯器，效能較差。2008年蘋果重寫了編譯器和位元組碼直譯器，叫SquirrelFish
（refer：J avaScriptCore深度解析 ）
-
Chromium/Blink
Chromium基於webkit，卻把Webkit的程式碼梳理得可讀性更高，多程序框架
Chromium載入網頁的過程，需要Browser程序和Render程序協作完成。載入網頁的過程由Browser程序發起，向伺服器請求網頁內容的過程也是由Browser程序完成。Render程序負責對下載回來的網頁內容進行解析，解析之後得到一個DOM Tree。有了這個DOM Tree之後，Render程序就可以對網頁進行渲染了
（refer: Chromium網頁載入介紹）
Blink：Chromium專案中研發的渲染引擎，基於並脫離Webkit
更強大的渲染和佈局：
- 追求多執行緒佈局
- 樣式的重新計算
- 不為隱藏的iframe建立渲染器
- 為外掛設定為display：none時，修復外掛解除安裝等舊錯誤
- 非同步解除安裝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