Electron 架构详解：主进程与渲染进程的协作机制

Electron 架构详解：主进程与渲染进程的协作机制

理解 Electron 的进程架构，是开发高效稳定桌面应用的关键。本篇将详解 Electron 的核心机制：主进程（Main Process）与渲染进程（Renderer Process），以及它们如何通过 IPC 协同工作。

---

一、Electron 的进程模型概览

Electron 应用 = 主进程 + 多个渲染进程

主进程 main.js

渲染进程 index.html

渲染进程 setting.html

Node.js API控制

• 主进程是 Electron 应用的核心，控制应用生命周期、窗口创建、菜单栏、系统交互等。
• 渲染进程负责展示 UI，类似网页中的浏览器 tab。
• 每个 BrowserWindow 都运行在独立的渲染进程中。

---

二、主进程（Main Process）详解

主进程：

• 只存在一个
• 执行 main.js
• 管理应用生命周期、创建窗口
• 具备完整的 Node.js API 访问权限

示例：创建主窗口

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
});

主进程还负责处理：

• 自定义菜单栏
• 系统托盘图标
• 文件系统访问
• 自动更新等后台逻辑

---

三、渲染进程（Renderer Process）详解

渲染进程：

• 每个窗口有一个渲染进程
• 渲染 HTML/CSS/JS，负责 UI 层展示
• 类似浏览器中的 Web 页面
• 默认不具备 Node.js 权限（出于安全考虑）

可通过 preload.js 显式暴露 API：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
  sendMessage: (msg) => ipcRenderer.send('msg', msg)
});

<button onclick="window.myAPI.sendMessage('Hello Main')">发消息button>

---

四、主进程与渲染进程通信：IPC 机制

Electron 提供 IPC（Inter-Process Communication）机制，允许主进程和渲染进程之间安全通信。

1. 渲染进程向主进程发送消息

// 渲染进程
ipcRenderer.send('channel-name', data);

// 主进程
ipcMain.on('channel-name', (event, data) => {
  console.log('收到数据：', data);
});

2. 主进程向渲染进程发送消息

// 主进程
mainWindow.webContents.send('reply-channel', '你好，渲染进程');

// 渲染进程
ipcRenderer.on('reply-channel', (event, msg) => {
  console.log('主进程发来消息：', msg);
});

---

️ 五、安全通信建议（使用 preload.js）

避免直接在渲染进程使用 require('electron')，应使用 contextBridge 创建中间层暴露白名单 API。

// preload.js
contextBridge.exposeInMainWorld('secureAPI', {
  getVersion: () => ipcRenderer.invoke('get-app-version')
});

// 主进程
ipcMain.handle('get-app-version', () => {
  return app.getVersion();
});

---

六、主进程 vs 渲染进程 功能对比

功能	主进程	渲染进程
控制应用生命周期	✅	❌
访问 Node.js 全部 API	✅	默认❌
创建窗口	✅	❌
渲染页面	❌	✅
使用 DOM、CSS、HTML	❌	✅
托盘、菜单栏、通知	✅	❌

---

七、进程间资源隔离与性能策略

• Electron 中每个窗口 = 独立的 Chromium 进程，内存占用较高。

• 建议复用窗口，避免滥用窗口数量。

• 可使用 webPreferences 限制渲染进程权限：

  new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });
  

---

总结

名称	作用
主进程（Main）	应用入口，创建窗口，系统交互，生命周期控制
渲染进程（Renderer）	展示 UI，运行页面代码
IPC 通信	实现进程间交互（事件、数据）
preload.js	安全桥接渲染与主进程，提升安全性

---