JavaScript Runtime 全景解析：一张图搞懂 V8、Blink、WebKit、Chromium、Chrome、Node.js 和 Electron
同样是 JavaScript，为什么它可以运行在浏览器网页中，也可以运行在服务器终端，还可以开发桌面应用？
为什么 Chrome、Node.js、Electron 都可以运行 JavaScript，但它们的能力完全不同？
V8、Blink、WebKit、Chromium 这些名字到底是什么关系？
很多开发者在学习前端、Node.js 或 Electron 时，都会遇到这些概念。
例如：
-
V8 是不是浏览器内核？
-
Chromium 是不是 Chrome？
-
WebKit 和 V8 是竞争关系吗？
-
Node.js 为什么没有 DOM？
-
Electron 为什么可以开发桌面软件？
这些问题的根源在于：
我们经常把不同层次的概念混在了一起。
本文通过一张 JavaScript Runtime 全景图，把这些概念拆开。
1. 先建立整体认知模型
JavaScript 世界可以分成四个层次：
┌───────────────────────────┐
│ Web 技术层 │
│ HTML / CSS / JavaScript │
└────────────┬──────────────┘
│
▼
┌───────────────────────────┐
│ 引擎层 │
│ │
│ 渲染引擎：Blink / WebKit │
│ JS引擎：V8 / JavaScriptCore │
└────────────┬──────────────┘
│
▼
┌───────────────────────────┐
│ 平台层 │
│ Chromium / WebKit │
└────────────┬──────────────┘
│
▼
┌───────────────────────────┐
│ 产品 / Runtime层 │
│ Chrome / Safari / Node / │
│ Electron │
└───────────────────────────┘
最重要的三个结论：
第一：
HTML、CSS、JavaScript 是开发者写的内容。
第二：
Blink、WebKit 负责页面显示；V8、JavaScriptCore 负责执行 JavaScript。
第三：
Chrome、Node.js、Electron 是运行环境，不是 JavaScript 引擎。
2. 打开一个网页时，到底发生了什么？
假设我们有一个简单网页：
<h1>Hello World</h1>
<button>
Click
</button>
<script>
console.log("hello")
</script>
浏览器内部大概这样工作：
网页代码
HTML CSS JavaScript
│ │ │
│ │ │
▼ ▼ ▼
Blink Blink V8
│ │
▼ ▼
页面绘制 JS执行
以 Chrome 为例：
| 内容 | 负责组件 |
|---|---|
| HTML | Blink |
| CSS | Blink |
| JavaScript | V8 |
一个重要误区：
很多人认为：
V8 是 Chrome 的核心，负责整个网页。
这是错误的。
实际上：
V8 只负责 JavaScript：
例如：
const result = a + b;
console.log(result);
V8 负责：
-
解析 JavaScript
-
编译优化
-
执行代码
但是：
document.querySelector("#button")
里面的：
document
DOM
window
并不是 JavaScript 自带的。
它们来自浏览器。
也就是说：
JavaScript语言
+
浏览器提供的API
=
网页开发能力
3. Chromium、Blink、V8 和 Chrome 的关系
这是最容易混淆的一组概念。
很多人看到：
Chrome
Chromium
Blink
V8
以为它们是并列关系。
实际上：
Chrome
│
▼
Chromium
┌────────┴────────┐
▼ ▼
Blink V8
页面渲染 JavaScript执行
Chromium 是什么？
Chromium 是 Google 开源的浏览器项目。
它包含：
-
Blink 渲染引擎
-
V8 JavaScript 引擎
-
网络模块
-
多进程架构
-
沙箱安全机制
-
DevTools
它是一个完整浏览器基础平台。
Chrome 是什么？
Chrome 是 Google 基于 Chromium 做出来的浏览器产品。
可以理解为：
Chrome
=
Chromium
+
Google服务
+
自动更新
+
同步功能
+
其它商业组件
所以：
Chrome ⊃ Chromium ⊃ Blink + V8
4. Blink 和 WebKit：浏览器世界的两条路线
现代浏览器主要有两大路线。
Chromium 路线
代表：
-
Chrome
-
Edge
-
Opera
-
Electron
结构：
Chromium
├── Blink
│
│ HTML/CSS
│ ↓
│ 页面显示
│
└── V8
↓
JavaScript执行
WebKit 路线
代表：
-
Safari
结构：
WebKit
├── Rendering Engine
│
└── JavaScriptCore(JSC)
↓
JavaScript执行
两者比较：
| Chromium | WebKit | |
|---|---|---|
| 浏览器 | Chrome | Safari |
| 渲染引擎 | Blink | WebKit |
| JS引擎 | V8 | JavaScriptCore |
注意：
WebKit 和 V8 不是竞争关系
很多人会误认为：
WebKit vs V8
实际上不是。
正确比较：
Blink vs WebKit
（负责画页面）
V8 vs JavaScriptCore
（负责执行JS）
它们属于不同层。
5. Node.js：JavaScript 离开浏览器
浏览器里的 JavaScript：
window
document
DOM
alert
这些能力来自浏览器。
如果 JavaScript 想运行在服务器怎么办？
Node.js 给出了答案。
Node.js：
把 V8 放到了操作系统环境中。
结构：
Node.js
V8
+
操作系统 API
fs
http
path
process
+
libuv
例如：
读取文件：
fs.readFile()
启动服务器：
http.createServer()
这些浏览器 JavaScript 都不能直接做。
所以：
| 浏览器 | Node.js | |
|---|---|---|
| JS引擎 | V8/JSC | V8 |
| DOM | 有 | 无 |
| 文件系统 | 限制 | 支持 |
| HTTP服务 | 不适合 | 常用 |
6. Electron：浏览器 + Node.js
如果我们想：
-
使用 HTML/CSS 做 UI
-
使用 JavaScript 写逻辑
-
又访问本地文件
怎么办？
Electron 出现了。
Electron 的核心：
Electron
Chromium
+
Node.js
架构：
Electron
┌───────────────┐
│ Chromium │
│ │
│ Blink + V8 │
└───────────────┘
┌───────────────┐
│ Node.js │
│ │
│ 文件系统 │
│ 系统能力 │
└───────────────┘
所以：
VS Code 为什么可以用 JavaScript 写？
因为：
VS Code
=
Electron
=
Chromium
+
Node.js
7. 三种运行环境对比
| Chrome | Node.js | Electron | |
|---|---|---|---|
| V8 | ✓ | ✓ | ✓ |
| Blink | ✓ | ✗ | ✓ |
| DOM | ✓ | ✗ | ✓ |
| 文件系统 | ✗ | ✓ | ✓ |
| 桌面能力 | ✗ | 部分 | ✓ |
一句话：
Chrome
= 看网页
Node.js
= 跑JavaScript程序
Electron
= 用网页技术开发桌面软件
8. 一张图串起来
HTML
+
CSS
+
JavaScript
│
▼
┌─────────────────────┐
│ 浏览器 │
│ │
│ Chromium │
│ │
│ Blink + V8 │
└─────────────────────┘
┌─────────────────────┐
│ Node.js │
│ │
│ V8 │
│ + 系统API │
└─────────────────────┘
┌─────────────────────┐
│ Electron │
│ │
│ Chromium + Node.js │
└─────────────────────┘
9. 日常开发如何对应？
| 开发场景 | 背后运行环境 |
|---|---|
| React 页面 | 浏览器 |
| Vue 页面 | 浏览器 |
| npm | Node.js |
| Vite | Node.js |
| Express | Node.js |
| VS Code | Electron |
| 桌面客户端 | Electron |
10. 最终记忆模型
以后看到这些名字：
Blink / WebKit
想到：
页面怎么画
V8 / JavaScriptCore
想到：
JavaScript 怎么执行
Chromium
想到：
浏览器基础平台
Chrome
想到：
一个完整浏览器产品
Node.js
想到：
没有网页的 JavaScript Runtime
Electron
想到：
Chromium + Node.js 的桌面运行环境
总结
JavaScript 本身没有变化。
变化的是它运行的环境。
浏览器：
JavaScript
+
DOM
+
页面渲染
Node.js：
JavaScript
+
操作系统能力
Electron：
JavaScript
+
页面能力
+
系统能力
理解这套分层之后：
-
V8 和 WebKit 的关系
-
Chromium 和 Chrome 的关系
-
Node.js 为什么没有 DOM
-
Electron 为什么能开发桌面软件
都会变得非常清晰。
下一次看到一个新技术名词，不要问“它是不是浏览器内核”，先问：
它属于语言层？引擎层？平台层？还是运行环境层？
这就是理解现代 JavaScript 生态的关键。
配套可视化：
runtime-landscape.html
可以直接用浏览器打开查看 JavaScript Runtime 全景图。你上传的 HTML 文件已经包含了这套关系图的可视化实现。
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)