当前位置：首页 > news >正文

Electron 原理浅析

news 2025/11/12 5:20:27

1. 架构组成

Electron 主要由三部分组成：

主进程：负责管理应用的生命周期，创建和控制窗口，处理与操作系统的交互。主进程运行在 Node.js 环境中，允许直接使用 Node.js 的 API。
渲染进程：每个窗口有自己的渲染进程，用于显示用户界面。基于 Chromium，支持标准 Web API，运行环境隔离，无法直接与主进程的 Node.js API 交互。
IPC：主进程与渲染进程通过 IPC 通信，允许发送消息和数据，提升应用结构清晰度与安全性。

2. 渲染流程

Chromium 引擎：负责渲染 HTML、CSS 和 JavaScript 为用户界面，每次加载新网页或界面时创建新渲染进程。
Web API：渲染进程中支持 DOM 操作、XHR 请求等 Web API，可通过 Electron API 访问系统功能。

3. 事件驱动

Electron 基于事件驱动模型，使用 Node.js 事件机制处理异步操作，开发者可注册监听器响应事件。

4. 安全性

Electron 提供以下安全机制：

上下文隔离：防止网页直接访问 Node.js API。
内容安全策略：控制资源加载方式，降低 XSS 攻击风险。
权限控制：应用可设置权限，保护敏感数据和系统功能。

5. 打包与分发

使用 Electron Forge 等工具打包应用，生成跨平台安装文件。
打包内容：HTML、CSS、JavaScript 和静态资源。
确保目标平台支持 Chromium 和 Node.js 运行时环境。

6. 原生模块拓展

原生模块拓展基于 Node 环境，而 Node 对于宿主系统级的拓展可以通过 C++ 实现，最靠谱的方案是：node-gyp 和 node-pre-gyp，构建 C++ 模块从而支持更多原生能力。

https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules
https://github.com/nodejs/node-gyp

7. 增量更新实现

为了更新能够最小化下载内容，我们需要考虑增量更新机制。

https://github.com/electron-userland/electron-builder/blob/b06c5effd35051c6b953696aec90b68a67456bed/packages/electron-updater/src/AppUpdater.ts#L738

要深入了解 Electron 的增量更新过程，特别是与 electron-builder 和 electron-updater 相关的内容生成和下载机制，我们可以从以下几个方面进行详细分析：

7.1. 更新的基本流程

在 Electron 应用中，更新的基本流程如下：

版本检查：应用启动时，autoUpdater 会检查远程版本。
增量包生成：如果发现有新版本，将生成增量更新包。
下载更新：将差异包下载到本地。
安装更新：下载完成后，用户会被提示重启应用以应用更新。

7.2. 增量更新包的生成

增量更新包的生成主要是通过 electron-builder 中的 build 功能实现的。具体来说，增量更新的包生成通常使用以下步骤：

比较版本：在新版本构建时，electron-builder 会比较旧版本和新版本的文件差异。
生成差异文件：使用工具生成只包含变化部分的差异文件。

在 GitHub 的 electron-builder 源码中，相关的差异文件生成逻辑是在 publish 和 update 事件触发时实现的。在构建新版本时，electron-builder 会自动计算出需要下载的文件和差异。

以下是 electron-updater 中生成增量更新的相关逻辑示例：

private async generateDiffs(oldVersion: string, newVersion: string): Promise<void> {const diffFiles = await this.createDiffFiles(oldVersion, newVersion);// 将生成的差异文件进行处理，例如上传到服务器
}

这个方法会调用 createDiffFiles，并传入旧版本和新版本的文件列表，从而生成需要的差异包。

7.3. 下载增量更新

在用户接受更新后，autoUpdater 会负责下载新版本或差异包。具体过程如下：

下载管理：通过 HTTP 请求下载文件。electron-updater 使用 electron-builder 提供的功能来管理下载。
进度监控：在下载过程中，可以通过事件监听来获取下载进度。

以下是下载和安装增量更新的关键逻辑：

autoUpdater.on('update-downloaded', async (info) => {// 下载完成后，提示用户重启const response = await dialog.showMessageBox({type: 'info',title: 'Update Available',message: 'A new version has been downloaded. Restart now?'});if (response.response === 0) {autoUpdater.quitAndInstall(); // 安装更新并重启}
});