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

柳菁發表於2018-12-03
WebKitJavaScript

一、瞭解瀏覽器

  1. 瀏覽器核心概念

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

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

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

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

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

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

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

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


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

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

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

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

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

二、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

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

    （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混合的應用非常方便

三、總結

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

Webkit基於KHTML，包含JavaScriptCore

Chromium基於Webkit，衍生出Blink

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

一切鼻祖：KHTML


相關文章