同样是 JavaScript为什么它可以运行在浏览器网页中也可以运行在服务器终端还可以开发桌面应用为什么 Chrome、Node.js、Electron 都可以运行 JavaScript但它们的能力完全不同V8、Blink、WebKit、Chromium 这些名字到底是什么关系很多开发者在学习前端、Node.js 或 Electron 时都会遇到这些概念。例如V8 是不是浏览器内核Chromium 是不是 ChromeWebKit 和 V8 是竞争关系吗Node.js 为什么没有 DOMElectron 为什么可以开发桌面软件这些问题的根源在于我们经常把不同层次的概念混在了一起。本文通过一张 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. 打开一个网页时到底发生了什么假设我们有一个简单网页h1Hello World/h1 button Click /button script console.log(hello) /script浏览器内部大概这样工作网页代码 HTML CSS JavaScript │ │ │ │ │ │ ▼ ▼ ▼ Blink Blink V8 │ │ ▼ ▼ 页面绘制 JS执行以 Chrome 为例内容负责组件HTMLBlinkCSSBlinkJavaScriptV8一个重要误区很多人认为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 V84. Blink 和 WebKit浏览器世界的两条路线现代浏览器主要有两大路线。Chromium 路线代表ChromeEdgeOperaElectron结构Chromium ├── Blink │ │ HTML/CSS │ ↓ │ 页面显示 │ └── V8 ↓ JavaScript执行WebKit 路线代表Safari结构WebKit ├── Rendering Engine │ └── JavaScriptCore(JSC) ↓ JavaScript执行两者比较ChromiumWebKit浏览器ChromeSafari渲染引擎BlinkWebKitJS引擎V8JavaScriptCore注意WebKit 和 V8 不是竞争关系很多人会误认为WebKit vs V8实际上不是。正确比较Blink vs WebKit 负责画页面 V8 vs JavaScriptCore 负责执行JS它们属于不同层。5. Node.jsJavaScript 离开浏览器浏览器里的 JavaScriptwindow document DOM alert这些能力来自浏览器。如果 JavaScript 想运行在服务器怎么办Node.js 给出了答案。Node.js把 V8 放到了操作系统环境中。结构Node.js V8 操作系统 API fs http path process libuv例如读取文件fs.readFile()启动服务器http.createServer()这些浏览器 JavaScript 都不能直接做。所以浏览器Node.jsJS引擎V8/JSCV8DOM有无文件系统限制支持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.js7. 三种运行环境对比ChromeNode.jsElectronV8✓✓✓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 页面浏览器npmNode.jsViteNode.jsExpressNode.jsVS CodeElectron桌面客户端Electron10. 最终记忆模型以后看到这些名字Blink / WebKit想到页面怎么画V8 / JavaScriptCore想到JavaScript 怎么执行Chromium想到浏览器基础平台Chrome想到一个完整浏览器产品Node.js想到没有网页的 JavaScript RuntimeElectron想到Chromium Node.js 的桌面运行环境总结JavaScript 本身没有变化。变化的是它运行的环境。浏览器 JavaScript DOM 页面渲染 Node.js JavaScript 操作系统能力 Electron JavaScript 页面能力 系统能力理解这套分层之后V8 和 WebKit 的关系Chromium 和 Chrome 的关系Node.js 为什么没有 DOMElectron 为什么能开发桌面软件都会变得非常清晰。下一次看到一个新技术名词不要问“它是不是浏览器内核”先问它属于语言层引擎层平台层还是运行环境层这就是理解现代 JavaScript 生态的关键。配套可视化runtime-landscape.html可以直接用浏览器打开查看 JavaScript Runtime 全景图。你上传的 HTML 文件已经包含了这套关系图的可视化实现。