本文首发微信公众号：前端徐徐。
大家好，我是徐徐。今天我们来浅析一下 Electron 的原理。
前言
Electron 的原理是每个开发 Electron 应用的开发者都需要了解的知识内容，因为知道整个原理全貌后你才能在设计一个应用的时候更加的合理，遇到问题才知道从哪个方面去分析。这篇文章将主要从架构层面，协作方式，底层支持，源码层面，API设计等方面来剖析 Electron 的原理。
架构层面
两个组件
Electron 的核心架构是基于 Chromium 和 Node.js 两个主要组件，各自扮演不同的角色。
Chromium
Chromium 是一个开源的浏览器项目，Google Chrome 就是基于它构建的。Electron 使用 Chromium 作为其渲染引擎，这意味着 Electron 应用可以利用现代 web 标准和技术，如 HTML5、CSS3 和 JavaScript 来构建用户界面。
Chromium 提供了以下主要功能：
- 渲染引擎：负责将 HTML、CSS 和 JavaScript 转换为用户界面。
- 多进程架构：每个页面（窗口）通常运行在独立的渲染进程中，提高了应用的稳定性和安全性。
Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，Electron 使用 Node.js 提供系统级别的 API，允许开发者在应用中使用服务器端的功能。
Node.js 主要提供以下功能：
- 文件系统访问：允许读写文件、创建目录等操作。
- 网络通信：支持 HTTP/HTTPS 请求、WebSocket 等网络协议。
- 进程管理：可以创建和管理子进程，执行系统命令等。
两种进程
Electron 应用通常包含主进程和渲染进程两种进程类型，每一种进程都有自己的属性和职责，另外还包含预加载脚本，他们相互协作构建出一个应用。
主进程（Main Process）
主进程是 Electron 应用的入口点，通常负责以下任务：
- 应用生命周期管理：包括启动、退出等。
- 创建和管理窗口：通过
BrowserWindow对象创建和管理应用中的各个窗口（渲染进程）。 - 与操作系统交互：可以使用 Node.js API 进行文件操作、打开本地文件对话框等。
- 进程间通信：主进程和渲染进程之间通过
ipcMain和ipcRenderer模块进行通信。
渲染进程（Renderer Process）
渲染进程负责 web 页面的渲染，每个 BrowserWindow 对象通常对应一个独立的渲染进程。渲染进程具有以下特点：
- 独立性：每个窗口有自己独立的渲染进程，崩溃时不会影响其他窗口。
- 安全性：由于渲染进程通常运行不具备完全访问 Node.js API 的权限，因此可以增强应用的安全性。
- UI 渲染：渲染进程使用 Chromium 提供的渲染引擎来显示 HTML、CSS 和 JavaScript 构建的用户界面。
预加载脚本（Preload Scripts）(可选)
预加载脚本在渲染进程中运行，但可以访问部分 Node.js API。它们的主要作用是：
- 安全桥梁：在渲染进程和主进程之间建立一个安全的桥梁，提供受控的 Node.js API 访问。
- 初始化任务：在 web 页面加载之前进行一些必要的初始化任务，如注入全局变量、设置事件监听等。
Chromium 和 Node.js 的协作
Electron 通过进程隔离、上下文桥接和 IPC 机制，实现了 Chromium 和 Node.js 的高效协作，确保应用的稳定性、安全性和功能性。
进程隔离
进程隔离是 Electron 实现稳定性和安全性的重要机制。Electron 通过将应用分为主进程（Node.js运行）和多个渲染进程（Chromium运行），来确保即使一个渲染进程崩溃，也不会影响到其他部分的运行。这种隔离使得应用能够同时利用 Node.js 强大的系统级 API 和 Chromium 先进的浏览器技术，同时也提高了应用的健壮性和安全性。
上下文桥接
上下文桥接通过contextBridge API，使得Node.js的功能可以安全地暴露给渲染进程。通过这种机制，可以在不直接暴露Node.js环境的情况下，将必要的功能提供给渲染进程。
IPC（进程间通信）
进程间通信（IPC）是 Electron 中主进程和渲染进程之间进行协作的重要机制。Electron 提供了ipcMain 和 ipcRenderer 模块，通过 IPC 机制，主进程和渲染进程可以相互发送消息，从而实现数据的传递和事件的触发。例如，当渲染进程需要访问文件系统时，可以通过发送消息给主进程，由主进程来执行实际的文件操作，并将结果返回给渲染进程。
底层支持
一款客户端框架，仅仅是有炫酷的界面是不行的，必须要有一些强劲的底层能力支持才能让这个桌面客户端框架完整，Electron 的底层支持主要涉及以下几个方面：
libchromiumcontent
libchromiumcontent 是 Chromium 内容模块的封装。它提供了一个独立于 Chromium 浏览器的内容渲染引擎。它具有以下功能：
- Web标准支持：libchromiumcontent 实现了现代Web标准，包括HTML5、CSS3、ES6等。
- 多进程架构：利用 Chromium 的多进程架构，渲染进程和主进程分离，提升了应用的稳定性和安全性。
- 渲染能力：负责将 HTML、CSS 和 JavaScript 渲染为可视内容。
libchromiumcontent 作为一个共享库，被集成到 Electron 中，为 Electron 应用提供浏览器功能。Electron 的主进程启动时，会启动 Chromium 的多个子进程（包括渲染进程），来处理网页的加载和渲染。
Node.js
Node.js 是一个基于 V8 引擎的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运行，并且能够进行 I/O 操作。
它具有以下功能：
- 系统级API：通过 Node.js 的模块系统，Electron 应用可以访问文件系统、网络、进程等系统级 API。
- 异步编程：Node.js 提供了异步 I/O 操作，可以高效地处理并发任务。
- 模块化：利用 Node.js 丰富的模块生态系统，开发者可以快速集成第三方库。
在 Electron 中，Node.js 被嵌入到主进程和渲染进程中。主进程负责管理应用生命周期和原生窗口，渲染进程负责网页内容的渲染和交互。通过 Node.js，开发者可以在 Electron 应用中使用 require 引入 Node.js 模块，直接调用底层系统 API
V8引擎
V8 是 Google 开发的开源 JavaScript 引擎，最初用于 Chrome 浏览器，现在也被 Node.js 和 Electron 使用。
它具有以下功能：
- JavaScript 执行：将 JavaScript 代码编译为本地机器码，从而提升执行速度。
- 内存管理：提供垃圾回收机制，自动管理内存分配和释放。
- 性能优化：通过即时编译（JIT）和内联缓存（inline caching）等技术，优化 JavaScript 执行性能。
V8 引擎在 Electron 中同时被 Chromium 和 Node.js 共享使用。渲染进程中的 JavaScript 代码（包括前端代码）和主进程中的 JavaScript 代码（包括 Node.js 代码）都通过 V8 引擎执行。
操作系统API
操作系统API 是指 Electron 应用通过 Node.js 和自定义的 native 模块与操作系统进行交互的接口。
它具有以下功能：
- 文件系统操作：访问和操作文件和目录。
- 网络通信：进行网络请求和套接字编程。
- 进程管理：创建和管理子进程。
- GUI控制：通过 native 模块，控制窗口、菜单、通知等 GUI 元素。
Electron 应用可以使用 Node.js 的原生模块（如 fs、net 等）来直接与操作系统交互。此外，Electron 还提供了一些特定于 Electron 的模块（如 electron 模块），进一步封装了与操作系统的交互逻辑。这些模块通过 Node.js 的 C++ 插件机制（Node-API）与底层系统 API 进行通信。
Electron 通过整合 Chromium 的渲染能力、Node.js 的系统 API、共享的 V8 引擎以及操作系统 API，提供了一个非常强劲的底层支持能力，几乎可以做你任何想做的事情。
源码层面
对于源码的话，这块看自己的研究深度，大部分时候，使用一个框架是不太需要知道源码的，只要知道 API 和一些配置就行，但是如果遇到一些棘手的问题，看源码绝对可以解决你的很多问题，下面是核心源码目录的大概解释。
具体源码可以在这里在线预览：
https://github1s.com/electron/electron/tree/main
Electron ├── build/ - 构建脚本和配置文件 ├── buildflags/ - 条件编译时可选的 Features ├── chromium_src/ - 包含 Chromium 的构建配置 ├── default_app/ - Electron 默认程序，在未提供应用程序时启动 ├── docs/ - Electron 文档 ├── lib/ - JavaScript/TypeScript 源码 │ ├── browser/ - 主进程相关代码 │ ├── common/ - 主进程和渲染进程共享的代码 │ ├── isolated_renderer/ - 隔离渲染器相关代码 │ ├── node/ - Node.js 集成相关代码 │ ├── renderer/ - 渲染进程相关代码 │ ├── sandboxed_renderer/ - 沙箱化渲染器相关代码 │ ├── utility/ - 实用工具函数 │ └── worker/ - Web Worker 相关代码 ├── npm/ - npm 相关配置和脚本 ├── patches/ - 补丁文件 ├── script/ - 开发和构建脚本 ├── shell/ - Electron 壳层相关 C++ 代码 │ ├── app/ - 应用程序核心代码 │ ├── browser/ - 浏览器进程相关代码 │ ├── common/ - 共享代码 │ ├── renderer/ - 渲染器进程相关代码 │ ├── services/ - 服务相关代码 │ └── utility/ - 实用工具 ├── spec/ - Electron 测试规范 ├── spec-chromium/ - Chromium 相关测试 ├── typings/ - TypeScript 类型定义文件
整体看 Electron 源码的结构是非常精巧的，不愧是大工程。这种结构设计允许 Electron 在保持灵活性的同时，有效管理其复杂的多进程架构和跨平台特性。它将高层 JavaScript API 与底层 C++ 实现分离，同时通过 common/ 目录实现了不同进程间的代码共享，这反映了 Electron 的核心设计理念。
应用入口源码简析
Electron 的源码很多，不过我们可以简单分析一下应用入口源码，就可大概理解整个 Electron 应用的启动过程了。
入口源码在：\shell\app\electron_main_delegate.cc，大概解读一下，在这个文件里面定义了 ElectronMainDelegate 类，这个类在 Electron 的启动过程中起着关键作用。下面是这个文件的主要内容和功能:
- 基本启动流程:
BasicStartupComplete()方法处理基本的启动任务,如设置命令行开关、注册路径提供者等。
- 沙箱初始化:
PreSandboxStartup()在沙箱启动之前执行一些初始化工作,如设置用户数据目录、初始化日志系统等。
- 内容客户端创建:
- 创建各种客户端对象,如
CreateContentBrowserClient(),CreateContentRendererClient()等,这些对象负责管理 Electron 的不同进程。
- 资源加载:
LoadResourceBundle()函数负责加载本地化资源。
- 进程类型处理:
RunProcess()方法根据不同的进程类型执行相应的启动逻辑。
- 特性列表和 Mojo 初始化:
ShouldCreateFeatureList()和ShouldInitializeMojo()控制特性列表和 Mojo 系统的初始化。
- 崩溃报告:
- 包含了崩溃报告相关的初始化代码,尤其是在非 MAS (Mac App Store) 构建中。
- 平台特定代码:
- 包含了针对 Windows、macOS 和 Linux 的特定代码处理。
这个文件的作用是协调 Electron 应用的启动过程,设置必要的环境,初始化各种组件,并为不同类型的进程(如主进程、渲染进程等)准备运行环境。它是连接 Chromium 内容模块和 Electron 特定功能的桥梁,确保 Electron 应用能够正确启动并运行。
API设计
一个框架的 API 设计决定了它使用的上手难易度和开发者接受的程度，好在 Electron 的 API 设计也是非常巧妙的，所以开发起来也会比较顺手，它大概遵循以下原则：
模块化
Electron 的模块化设计允许开发者只使用他们需要的功能，提高了代码的可维护性和可读性。
- 实现细节：
- 每个模块通常对应一个 C++ 类，如
app模块对应App类。 - JavaScript API 通过 V8 引擎与这些 C++ 类进行绑定。
- 模块间保持低耦合，高内聚，允许独立更新和维护。
- 优势：
- 便于理解和使用：开发者可以专注于所需的特定功能。
- 性能优化：只加载必要的模块，减少内存占用。
- 可扩展性：易于添加新模块或扩展现有模块。
事件驱动
事件驱动模型使得 Electron 应用能够高效地响应各种系统和用户事件。
- 实现细节：
- 使用 Node.js 的
EventEmitter模式。 - C++ 层面的事件通过 V8 引擎转换为 JavaScript 事件。
- 广泛应用于生命周期管理、IPC 通信等场景。
- 优势：
- 非阻塞：事件处理不会阻塞主线程。
- 松耦合：事件发送者和接收者之间无需直接依赖。
- 灵活性：允许多个监听器响应同一事件。
异步优先
异步 API 设计确保了 Electron 应用的高性能和响应性。
- 实现细节：
- 大量使用 Promise 和 async/await 语法。
- 在 C++ 层面，使用 libuv 实现异步操作。
- 对于可能耗时的操作，如文件 I/O 或网络请求，总是提供异步版本。
- 优势：
- 提高应用响应性：避免长时间阻塞主线程。
- 更好的错误处理：通过 Promise 链或 try-catch 结构处理异步错误。
- 符合现代 JavaScript 实践：与 Node.js 和前端开发模式一致。
跨平台抽象
Electron 提供统一的 API 接口，大大简化了跨平台开发。
- 实现细节：
- 在 C++ 层面为不同平台实现具体功能。
- 使用条件编译和平台特定代码来处理平台差异。
- JavaScript API 层保持一致，底层根据平台调用不同的实现。
- 优势：
- 开发效率：开发者只需学习一套 API，就能开发跨平台应用。
- 代码复用：大部分应用逻辑可以在不同平台间共享。
- 维护简化：平台特定的问题被封装在底层，简化了上层应用的维护。
通过这些设计原则，Electron 成功地将 Web 技术与原生桌面功能结合，创造了一个强大而灵活的桌面应用开发平台。这不仅简化了开发过程，也为创新的桌面应用提供了可能性。
结语
这里我们大概简单地从几个方面剖析了 Electron 的原理，通过这些剖析了解了 Electron 的整体架构和设计思想，这对我们开发 Electron 应用是非常有帮助的，特别是在一些实战场景，如果对其原理了解得更加透彻，那么设计出来的应用应该也会很棒！
