Electron 核心架构

Electron 应用由主进程（Main Process）和渲染进程（Renderer Process）组成，两者通过 Chromium 和 Node.js 的融合实现跨平台桌面应用开发。主进程负责管理应用生命周期和原生系统交互，渲染进程则专注于界面渲染。

主进程与渲染进程的区别

主进程运行在 Node.js 环境中，通过创建 BrowserWindow 实例来生成网页。每个 BrowserWindow 实例运行独立的渲染进程，渲染进程默认禁用 Node.js 但可通过配置启用。

主进程特点：

• 唯一性：整个应用仅存在一个主进程
• 系统级权限：可调用 GUI、文件系统等原生 API
• 生命周期管理：控制应用启动/退出、窗口创建/销毁

渲染进程特点：

• 多实例：每个窗口或 webview 对应独立进程
• 受限环境：默认运行于沙箱化的浏览器环境
• 界面职责：使用 HTML/CSS/JavaScript 构建用户界面

进程间通信机制

Electron 提供三种 IPC 方式：

1. 基础 IPC 模块

// 主进程
const { ipcMain } = require('electron')
ipcMain.on('message', (event, arg) => {
  event.reply('reply', 'pong')
})

// 渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.send('message', 'ping')
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg) // 输出 pong
})

2. 远程调用（remote 模块）

// 渲染进程调用主进程模块
const { BrowserWindow } = require('electron').remote
let win = new BrowserWindow()

3. 共享对象（webContents）

// 主进程向指定窗口发送数据
mainWindow.webContents.send('data-update', payload)

安全通信实践

启用上下文隔离时需通过预加载脚本暴露安全 API：

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  receive: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args))
  }
})

性能优化策略

• 进程复用：对同源窗口启用 webPreferences 的 nodeIntegrationInSubFrames
• 数据传输：大型数据使用 SharedArrayBuffer 或流式传输
• 进程管理：非活跃窗口使用 webContents.unload() 释放资源

调试工具

主进程调试：

electron --inspect=9229 main.js

渲染进程调试：

• 通过 Chrome DevTools 访问
• 调用 webContents.openDevTools() 方法