Web 浏览器相关的一些概念

这篇文章没有多少深刻内容，它主要涉及两个问题：

WebKit, Safari, Blink, Chromium, Chrome 之间是什么关系？
WebKit, Chromium, Android WebView, UIWebView/WKWebView 之间是什么关系？

不讨论从浏览器输入 URL 到页面展现期间发生了什么，不讨论浏览器是如何运行的，不讨论浏览器的架构。

浏览器

更准确的说是 Web 浏览器，即 Web Browser，用于访问万维网（World Wide Web）的计算机软件，支持 HTTP 协议，支持 HTML/CSS/JavaScript 等 Web 技术。

浏览器引擎、排版引擎、渲染引擎、JavaScript 引擎

浏览器引擎（Browser Engine）
浏览器内核（Browser Kernel）
排版引擎（Layout Engine）
渲染引擎（Rendering Engine）
JavaScript 引擎（JavaScript Engine）

这几个名词经常会混用，通常只是广义和狭义的区别，浏览器内核/浏览器引擎/排版引擎/渲染引擎之间可以互换，广义上的渲染引擎包含JS引擎，狭义上渲染引擎和JS引擎是两个不同的引擎。

一般提到浏览器内核时，主要指浏览器引擎，提到浏览器引擎时，主要指排版引擎/渲染引擎。

例如，在 Chromium 的文档中将 WebKit 描述为 Rendering Engine；WebKit 的文档中自述为 Web Browser Engine/Web Content Engine，它包含 WebCore 和 JavaScriptCore 等组件；描述 WebCore 时，称其是 WebKit 的 Layout Engine/Rendering Engine；描述 JavaScriptCore 时，称其是 WebKit 的 JavaScript Engine。

浏览器和浏览器引擎

浏览器引擎负责解析、渲染 HTML, CSS, JavaScript 和 DOM，但不包括菜单、工具栏等 UI 组件，也不包含系统服务、网络通信、打印、文件下载、PDF等功能。

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

基于 WebKit 的应用: Safari, Mail, App Store
基于 Gecko 的应用: Firefox, Thunderbird, SeaMonkey
基于 Chromium 的应用: Chrome, Opera, Microsoft Edge (Chromium), Electron

可以简单认为：

Chromium = Blink + V8 + 其他组件、库、服务
Safari = WebKit + 其他组件、库、服务
Chrome = Chromium + Google 服务集成
Microsoft Edge (Chromium) = Chromium + Microsoft 服务集成
Yandex Browser = Chromium + Yandex 服务集成
360 安全浏览器 = Trident + Chromium + 360 服务集成

常见浏览器版本

Chrome Stable/Beta/Dev/Canary
Microsoft Edge Stable/Beta/Dev/Canary
Safari Stable/Safari Technology Preview/WebKit Nightly
Firefox Stable/Beta/Developer Edition/Nightly

国内的浏览器大多数基于 Chromium，双核浏览器基于 Trident 和 Chromium。UC 浏览器和腾讯的 X5 内核也都基于 Chromium。

chromium 的含义为24号元素“铬（gè）”，chrome 的含义为“铬合金”，正好对应 Google Chrome 和 Chromium 间的关系。
Chromium 项目包括 Chromium 和 Chromium OS，对应 Google Chrome 和 Google Chrome OS。

渲染引擎和JS引擎

常见浏览器的渲染引擎和JS引擎：

Browser	Rendering Engine	JavaScript Engine
Internet Explorer (IE)	Trident (MSHTML)	JScript/Chakra
Microsoft Edge	EdgeHTML	Chakra
Firefox	Gecko	SpiderMonkey
Safari	WebKit	JavaScriptCore
Chrome	Blink	V8
Opera	Presto	Carakan

常见浏览器内置引擎的演进过程：

Raptor -> NGLayout -> Gecko
Mocha -> SpiderMonkey
Trident -> EdgeHTML
JScript -> Chakra (JScript9) -> Chakra
KHTML -> WebKit WebCore
KJS -> WebKit JavaScriptCore -> SquirrelFish -> SquirrelFish Extreme (SFE)
Linear A -> Linear B -> Futhark -> Carakan

关于浏览器引擎名称和版本的一些边角料：

IE 系列中，Internet Explorer 8 是第一个在 User Agent 字符串中包含 Trident 排版引擎的版本。
IE 最后一版为 IE11，Microsoft Edge 中的 EdgeHTML 延续了它的版本号 12-18。
WebKit 的 WebCore 和 JavaScriptCore 分别 fork 自 KDE 的 KHTML 和 KJS。
SquirrelFish 和 SquirrelFish Extreme 也被称为 Nitro 和 Nitro Extreme，它们都只是代号，项目始终叫 JavaScriptCore。
SpiderMonkey 存在一些历史上的优化版本，代号为 TraceMonkey, JägerMonkey, IonMonkey。
Goanna fork 自 Gecko，Goanna 是 Pale Moon, Basilisk 浏览器的排版引擎。
2010年4月，Apple 启动 WebKit2 项目，为 WebKit 实现了一个新的 API 层，后来原 WebKit 被重命名为 WebKitLegacy，WebKit2 被重命名为 WebKit。
2012年，Mozilla 启动 Servo 项目，希望开发一个高性能的、并行的浏览器引擎，用于替代 Gecko。
2013年4月，Google 创建 Blink，它 fork 自 WebKit WebCore，实现了沙箱和多进程模型。
2013年7月，Opera 发布基于 Chromium 开发的 Opera 15。
2018年12月，Microsoft 宣布新版 Microsoft Edge 将基于 Chromium 开发。

渲染引擎

负责解析 HTML, CSS, JavaScript，渲染页面。

部分浏览器和它们使用的渲染引擎：

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 引擎

负责解释、执行 JavaScript 代码。

常见的JS引擎：

SpiderMonkey: Mozilla 的 JavaScript 引擎，使用 C/C++ 编写
Rhino: Mozilla 的开源 JavaScript 引擎，使用 Java 编写
Nashorn: Oracle Java Development Kit (JDK) 8 开始内置的 JavaScript 引擎，使用 Java 编写
JavaScriptCore: WebKit 内置的 JavaScript 引擎
ChakraCore: Microsoft 的开源 JavaScript 引擎
V8: Google 的开源 JavaScript 引擎，使用 C++ 编写
JerryScript: Samsung 开源的 JavaScript 引擎，被 IoT.js 使用
Hermes: Facebook 的开源 JavaScript 引擎，为 React Native 优化
QuickJS: 由 FFmpeg 作者 Fabrice Bellard 开发

WebView

WebView 允许开发者在自己的应用中渲染显示网页内容。

移动端 WebView 主要分 Android 和 iOS 两个阵营：

Android
- Android WebKit WebView: 基于 WebKit
- Chromium WebView: 基于 Chromium
iOS
- UIWebView: 基于 WebKitLegacy (WebKit1)
- WKWebView: 基于 WebKit (WebKit2)

简单说明：

从2013年发布的 Android 4.4 Kitkat 开始，增加 Chromium WebView，用来取代 Android WebKit WebView。（开始支持远程调试）
从2014年发布的 Android 5.0 Lollipop 开始，Chromium WebView 支持以 Android System WebView App 的形式在应用商店中下载，独立升级。这就是为什么在 Can I use 上 Android Browser 一栏 Android 4.4.4 和 5.0 是个分水岭的原因，理论上，从 Android 5.0 Lollipop 开始，Chromium WebView 会一直更新升级。
Android 可以在 App 中集成其他 WebView 组件，如 TBS X5 内核的 WebView，或者集成其他 JavaScript 引擎，如为 React Native 专门优化的 Hermes。iOS 上只能使用系统内置的 WebView。
从2014年发布的 iOS 8 和 OS X 10.10 开始，增加 WKWebView，用来取代 iOS 上的 UIWebView 和 macOS 上的 WebView 组件。

渲染引擎的构成

现代浏览器的渲染引擎构成大同小异，以 Gecko 为例：

以下内容摘自 Gecko FAQ

Gecko includes the following components:

Document parser (handles HTML and XML)
Layout engine with content model
Style system (handles CSS, etc.)
JavaScript runtime (SpiderMonkey)
Image library
Networking library (Necko)
Platform-specific graphics rendering and widget sets for Win32, X, and Mac
User preferences library
Mozilla Plug-in API (NPAPI) to support the Navigator plug-in interface
Open Java Interface (OJI), with Sun Java 1.2 JVM
RDF back end
Font library
Security library (NSS)

在 Blink 项目的页面 https://www.chromium.org/developers 可以看到整个 Blink 项目的工作被划分成几个小组：

DOM Team
Binding Team
Layout Team
Memory Team
Paint Team
Style Team
Animation Team
Input Team

它们对应着渲染引擎的不同工作阶段。

浏览器相关项目链接

Browser
- Chromium
  - Homepage
  - Source
Layout Engine
- Servo
  - Homepage
  - Source
- Blink
  - Homepage
- WebKit
  - Homepage
  - Source
- Gecko
  - Source
- KHTML
  - Source
JavaScript Engine
- V8
  - Homepage
  - Source
- Chakra
  - ChakraCore Source
- SpiderMonkey
  - Homepage
- JavaScriptCore
  - Homepage
- Duktape
  - Homepage
  - Source
- JerryScript
  - Homepage
  - Source
- Espruino
  - Homepage
  - Source
- QuickJS
  - Homepage
- Hermes
  - Homepage
  - Source