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

1、瞭解瀏覽器

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視圖模式來修改網頁內容和樣式信息，從而改變渲染結果。

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

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

1. 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：JavaScriptCore深度解析）

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混合的應用很是方便

3、總結

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

Webkit基於KHTML，包含JavaScriptCore

Chromium基於Webkit，衍生出Blink

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

一切鼻祖：KHTML