Web 浏览器相关的一些概念

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

  1. WebKit, Safari, Blink, Chromium, Chrome 之间是什么关系?
  2. 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

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

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

简单说明:

  1. 从2013年发布的 Android 4.4 Kitkat 开始,增加 Chromium WebView,用来取代 Android WebKit WebView。(开始支持远程调试)
  2. 从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 会一直更新升级。
  3. Android 可以在 App 中集成其他 WebView 组件,如 TBS X5 内核的 WebView,或者集成其他 JavaScript 引擎,如为 React Native 专门优化的 Hermes。iOS 上只能使用系统内置的 WebView。
  4. 从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

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

浏览器相关项目链接

相关链接