Web 瀏覽器相關(guān)的一些概念

這篇文章沒有多少深刻內(nèi)容，它主要涉及兩個(gè)問題：

WebKit, Safari, Blink, Chromium, Chrome 之間是什么關(guān)系？

WebKit, Chromium, Android WebView, UIWebView/WKWebView 之間是什么關(guān)系？

不討論從瀏覽器輸入 URL 到頁(yè)面展現(xiàn)期間發(fā)生了什么，不討論瀏覽器是如何運(yùn)行的，不討論瀏覽器的架構(gòu)。

瀏覽器

更準(zhǔn)確的說是 Web 瀏覽器，即 Web Browser，用于訪問萬維網(wǎng)（World Wide Web）的計(jì)算機(jī)軟件，支持 HTTP 協(xié)議，支持 HTML/CSS/JavaScript 等 Web 技術(shù)。

1、瀏覽器引擎（Browser Engine）

2、瀏覽器內(nèi)核（Browser Kernel）

3、排版引擎（Layout Engine）

4、渲染引擎（Rendering Engine）

5、JavaScript 引擎（JavaScript Engine）

這幾個(gè)名詞經(jīng)常會(huì)混用，通常只是廣義和狹義的區(qū)別，瀏覽器內(nèi)核/瀏覽器引擎/排版引擎/渲染引擎之間可以互換， 廣義上的渲染引擎包含JS引擎，狹義上渲染引擎和JS引擎是兩個(gè)不同的引擎。

一般提到瀏覽器內(nèi)核時(shí)，主要指瀏覽器引擎，提到瀏覽器引擎時(shí)，主要指排版引擎/渲染引擎。

例如，在 Chromium 的文檔中將 WebKit 描述為 Rendering Engine；WebKit 的文檔中自述為 Web Browser Engine/Web Content Engine，它包含 WebCore 和 JavaScriptCore 等組件；描述 WebCore 時(shí)，稱其是 WebKit 的 Layout Engine/Rendering Engine；描述 JavaScriptCore 時(shí)，稱其是 WebKit 的 JavaScript Engine。

瀏覽器和瀏覽器引擎

瀏覽器引擎負(fù)責(zé)解析、渲染 HTML, CSS, JavaScript 和 DOM，但不包括菜單、工具欄等 UI 組件，也不包含系統(tǒng)服務(wù)、網(wǎng)絡(luò)通信、打印、文件下載、PDF等功能。

例如，WebKit/Gecko 只是瀏覽器引擎（Web Browser Engine），不是瀏覽器；Chromium 是瀏覽器（Web Browser）。

1、基于 WebKit 的應(yīng)用: Safari, Mail, App Store

2、基于 Gecko 的應(yīng)用: Firefox, Thunderbird, SeaMonkey

3、基于 Chromium 的應(yīng)用: Chrome, Opera, Microsoft Edge (Chromium), Electron

可以簡(jiǎn)單認(rèn)為：

1、Chromium = Blink + V8 + 其他組件、庫(kù)、服務(wù)

2、Safari = WebKit + 其他組件、庫(kù)、服務(wù)

3、Chrome = Chromium + Google 服務(wù)集成

4、Microsoft Edge (Chromium) = Chromium + Microsoft 服務(wù)集成

5、Yandex Browser = Chromium + Yandex 服務(wù)集成

6、360 安全瀏覽器 = Trident + Chromium + 360 服務(wù)集成

常見瀏覽器版本

1、Chrome Stable/Beta/Dev/Canary

2、Microsoft Edge Stable/Beta/Dev/Canary

3、Safari Stable/Safari Technology Preview/WebKit Nightly

4、Firefox Stable/Beta/Developer Edition/Nightly

國(guó)內(nèi)的瀏覽器大多數(shù)基于 Chromium，雙核瀏覽器基于 Trident 和 Chromium。UC 瀏覽器和騰訊的 X5 內(nèi)核也都基于 Chromium。

chromium 的含義為24號(hào)元素“鉻（gè）”，chrome 的含義為“鉻合金”，正好對(duì)應(yīng) Google Chrome 和 Chromium 間的關(guān)系。

Chromium 項(xiàng)目包括 Chromium 和 Chromium OS，對(duì)應(yīng) Google Chrome 和 Google Chrome OS。

渲染引擎和JS引擎

常見瀏覽器的渲染引擎和JS引擎：

常見瀏覽器內(nèi)置引擎的演進(jìn)過程：

1、Raptor -> NGLayout -> Gecko

2、Mocha -> SpiderMonkey

3、Trident -> EdgeHTML

4、JScript -> Chakra (JScript9) -> Chakra

5、KHTML -> WebKit WebCore

6、KJS -> WebKit JavaScriptCore -> SquirrelFish -> SquirrelFish Extreme (SFE)

7、Linear?A -> Linear?B -> Futhark -> Carakan

關(guān)于瀏覽器引擎名稱和版本的一些邊角料：

IE 系列中，Internet Explorer 8 是第一個(gè)在 User Agent 字符串中包含 Trident 排版引擎的版本。

IE 最后一版為 IE11，Microsoft Edge 中的 EdgeHTML 延續(xù)了它的版本號(hào) 12-18。

WebKit 的 WebCore 和 JavaScriptCore 分別 fork 自 KDE 的 KHTML 和 KJS。

SquirrelFish 和 SquirrelFish Extreme 也被稱為 Nitro 和 Nitro Extreme，它們都只是代號(hào)，項(xiàng)目始終叫 JavaScriptCore。

SpiderMonkey 存在一些歷史上的優(yōu)化版本，代號(hào)為 TraceMonkey, J?gerMonkey, IonMonkey。

Goanna fork 自 Gecko，Goanna 是 Pale Moon, Basilisk 瀏覽器的排版引擎。

2010年4月，Apple 啟動(dòng) WebKit2 項(xiàng)目，為 WebKit 實(shí)現(xiàn)了一個(gè)新的 API 層，后來原 WebKit 被重命名為 WebKitLegacy，WebKit2 被重命名為 WebKit。

2012年，Mozilla 啟動(dòng) Servo 項(xiàng)目，希望開發(fā)一個(gè)高性能的、并行的瀏覽器引擎，用于替代 Gecko。

2013年4月，Google 創(chuàng)建 Blink，它 fork 自 WebKit WebCore，實(shí)現(xiàn)了沙箱和多進(jìn)程模型。

2013年7月，Opera 發(fā)布基于 Chromium 開發(fā)的 Opera 15。

2018年12月，Microsoft 宣布新版 Microsoft Edge 將基于 Chromium 開發(fā)。渲染引擎

負(fù)責(zé)解析 HTML, CSS, JavaScript，渲染頁(yè)面。

部分瀏覽器和它們使用的渲染引擎：

NCSA Mosaic

Netscape Navigator/Netscape: Gecko

Microsoft Internet Explorer: Trident

Lynx

Konqueror: KHTML

Opera: Presto -> Blink

Apple Safari: KHTML -> WebKit

Mozilla Firefox: Gecko

Google Chrome: WebKit -> Blink

Microsoft Edge: EdgeHTML

Microsoft Edge (Chromium): Blink

JavaScript 引擎

負(fù)責(zé)解釋、執(zhí)行 JavaScript 代碼。

常見的JS引擎：

SpiderMonkey: Mozilla 的 JavaScript 引擎，使用 C/C++ 編寫

Rhino: Mozilla 的開源 JavaScript 引擎，使用 Java 編寫

Nashorn: Oracle Java Development Kit (JDK) 8 開始內(nèi)置的 JavaScript 引擎，使用 Java 編寫

JavaScriptCore: WebKit 內(nèi)置的 JavaScript 引擎

ChakraCore: Microsoft 的開源 JavaScript 引擎

V8: Google 的開源 JavaScript 引擎，使用 C++ 編寫

JerryScript: Samsung 開源的 JavaScript 引擎，被 IoT.js 使用

Hermes: Facebook 的開源 JavaScript 引擎，為 React Native 優(yōu)化

QuickJS: 由 FFmpeg 作者 Fabrice Bellard 開發(fā)

WebView

WebView 允許開發(fā)者在自己的應(yīng)用中渲染顯示網(wǎng)頁(yè)內(nèi)容。

移動(dòng)端 WebView 主要分 Android 和 iOS 兩個(gè)陣營(yíng)：

Android

Android WebKit WebView: 基于 WebKit

Chromium WebView: 基于 Chromium

iOS

UIWebView: 基于 WebKit

WKWebView: 基于 WebKit

簡(jiǎn)單說明：

從2013年發(fā)布的 Android 4.4 Kitkat 開始，增加 Chromium WebView，用來取代 Android WebKit WebView。（開始支持遠(yuǎn)程調(diào)試）

從2014年發(fā)布的 Android 5.0 Lollipop 開始，Chromium WebView 支持以 Android System WebView App 的形式在應(yīng)用商店中下載，獨(dú)立升級(jí)。這就是為什么在 Can I use 上 Android Browser 一欄 Android 4.4.4 和 5.0 是個(gè)分水嶺的原因，理論上，從 Android 5.0 Lollipop 開始，Chromium WebView 會(huì)一直更新升級(jí)。

Android 可以在 App 中集成其他 WebView 組件，如 TBS X5 內(nèi)核的 WebView，或者集成其他 JavaScript 引擎，如為 React Native 專門優(yōu)化的 Hermes。iOS 上只能使用系統(tǒng)內(nèi)置的 WebView。

從2014年發(fā)布的 iOS 8 和 OS X 10.10 開始，增加 WKWebView，用來取代 iOS 上的 UIWebView 和 macOS 上的 WebView 組件。