Electron 是一个流行的跨平台桌面应用开发框架，它结合了 Chromium 和 Node.js，使开发者能够使用 Web 技术（HTML、CSS、JavaScript）构建原生应用。许多知名应用（如 VS Code、Slack、Discord）都基于 Electron 开发。
Electron 的核心架构采用 多进程模型，主要分为 主进程（Main Process） 和 渲染进程（Renderer Process）。理解这两个进程的职责、通信方式及安全机制，是开发高性能、稳定 Electron 应用的关键。
1. Electron 的多进程架构
Electron 的架构借鉴了 Chromium 的多进程设计，每个窗口（Web 页面）运行在独立的进程中，而主进程负责管理整个应用的生命周期。
1.1 主进程（Main Process）
主进程是 Electron 应用的“大脑”，它是整个应用的入口点（通常对应 main.js 文件），负责：
管理应用生命周期（启动、退出、休眠等）。
创建和控制浏览器窗口（
BrowserWindow）。访问底层操作系统 API（如文件系统、网络、系统托盘等）。
处理进程间通信（IPC），协调多个渲染进程。
由于主进程可以直接调用 Node.js API，它拥有完整的系统权限，因此需要谨慎编码，避免安全漏洞。
主进程示例
const { app, BrowserWindow, ipcMain } = require('electron');
app.on('ready', () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 安全考虑，默认禁用 Node.js API
contextIsolation: true, // 启用上下文隔离
preload: path.join(__dirname, 'preload.js') // 预加载脚本
}
});
win.loadFile('index.html');
// 监听渲染进程消息
ipcMain.on('save-file', (event, data) => {
fs.writeFileSync('data.txt', data);
event.reply('file-saved', '文件保存成功！');
});
});1.2 渲染进程（Renderer Process）
每个 Electron 窗口（BrowserWindow）运行在独立的渲染进程中，它本质上是 Chromium 的一个渲染实例，负责：
渲染用户界面（HTML/CSS/JavaScript）。
执行前端逻辑（如 React、Vue、Angular 等框架）。
通过 IPC 与主进程通信，间接访问系统资源（如文件读写）。
默认情况下，渲染进程无法直接访问 Node.js API（出于安全考虑），但可以通过 预加载脚本（Preload Script） 和 IPC 通信 实现功能扩展。
渲染进程示例
// renderer.js
const { ipcRenderer } = require('electron');
document.getElementById('save-btn').addEventListener('click', () => {
const data = document.getElementById('content').value;
ipcRenderer.send('save-file', data); // 发送保存请求
});
ipcRenderer.on('file-saved', (event, message) => {
alert(message); // 接收主进程回复
});2. 进程间通信（IPC）
由于主进程和渲染进程是隔离的，它们必须通过 IPC（Inter-Process Communication） 进行数据交换。Electron 提供了 ipcMain 和 ipcRenderer 模块来实现双向通信。
2.1 通信模式
| 方向 | 方法 | 示例 |
|---|---|---|
| 渲染进程 → 主进程 | ipcRenderer.send + ipcMain.on |
渲染进程发送请求，主进程处理 |
| 主进程 → 渲染进程 | win.webContents.send + ipcRenderer.on |
主进程主动推送数据到渲染进程 |
| 双向通信 | invoke/handle（Electron 7+） |
更简洁的 Promise 风格通信 |
示例：双向 IPC 通信
// 主进程
ipcMain.handle('read-file', async (event, path) => {
return await fs.promises.readFile(path, 'utf-8');
});
// 渲染进程
const content = await ipcRenderer.invoke('read-file', 'data.txt');2.2 为什么需要 IPC？
安全性：防止渲染进程直接操作 Node.js API，减少恶意代码攻击风险。
稳定性：某个渲染进程崩溃不会影响主进程或其他窗口。
灵活性：主进程可以集中管理资源，避免竞态条件。
3. 安全最佳实践
由于 Electron 允许 Node.js 和 Web 代码混合运行，安全性至关重要。以下是关键建议：
3.1 禁用 nodeIntegration
默认情况下，渲染进程不应直接访问 Node.js API，以防止 XSS 攻击导致系统权限滥用：
new BrowserWindow({
webPreferences: {
nodeIntegration: false, // 禁用 Node.js API
contextIsolation: true, // 启用上下文隔离
}
});3.2 使用预加载脚本（Preload Script）
通过 contextBridge 暴露有限的 API 给渲染进程：
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
saveFile: (data) => ipcRenderer.invoke('save-file', data)
});
// 渲染进程调用
window.api.saveFile('Hello, Electron!');3.3 限制加载远程内容
避免直接加载不受信任的 URL，或使用 sandbox 模式隔离高风险页面：
new BrowserWindow({
webPreferences: {
sandbox: true // 启用沙盒模式
}
});4. 性能优化
减少主进程负载：避免在主进程执行耗时操作（如大文件解析），改用 Worker 线程。
复用 BrowserWindow：避免频繁创建/销毁窗口，改用
hide/show提升性能。启用硬件加速：
app.commandLine.appendSwitch('--enable-gpu-rasterization')。
5. 总结
| 特性 | 主进程 | 渲染进程 |
|---|---|---|
| 数量 | 唯一 | 多个（每个窗口一个） |
| 权限 | 完全访问 Node.js | 默认受限，需 IPC 通信 |
| 职责 | 应用管理、系统交互 | UI 渲染、前端逻辑 |
| 通信方式 | ipcMain |
ipcRenderer |
Electron 的多进程架构使其兼具灵活性和安全性，但也要求开发者合理设计进程间通信。遵循安全最佳实践，可以构建高性能、稳定的跨平台桌面应用。
希望本文能帮助你深入理解 Electron 的架构设计！