Published on

Electron 中的主进程与渲染进程

Authors
  • Name
    Twitter

Electron 应用采用了多进程架构，主要包括主进程（Main Process）和渲染进程（Renderer Process）。理解这两种进程的角色和它们之间的交互对于开发高效的 Electron 应用至关重要。

主进程 (Main Process)

定义和特点

  • 每个 Electron 应用只有一个主进程
  • 负责管理应用的生命周期、创建和管理应用窗口
  • 可以访问和控制底层操作系统功能
  • 通常在 main.js 文件中定义

主要职责

  1. 创建应用窗口
  2. 处理应用的生命周期事件
  3. 与原生操作系统 API 交互
  4. 管理其他进程

示例代码

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

渲染进程 (Renderer Process)

定义和特点

  • 每个 Electron 应用可以有多个渲染进程
  • 负责渲染和运行 web 页面
  • 每个渲染进程都是独立的，一个进程的崩溃不会影响其他进程
  • 默认情况下无法直接访问 Node.js API

主要职责

  1. 渲染用户界面
  2. 处理用户交互
  3. 执行与页面相关的业务逻辑

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Electron App</title>
</head>
<body>
    <h1>Hello from Renderer Process!</h1>
    <script>
        console.log('This is running in the renderer process');
    </script>
</body>
</html>

进程间通信 (IPC)

主进程和渲染进程之间需要通信以协调工作。Electron 提供了几种进程间通信的方法：

  1. ipcMain 和 ipcRenderer：

    • 用于在主进程和渲染进程之间发送和接收同步或异步消息
    // 在渲染进程中
const { ipcRenderer } = require('electron')
ipcRenderer.send('asynchronous-message', 'ping')

// 在主进程中
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // 输出 "ping"
  event.reply('asynchronous-reply', 'pong')
})

  2. remote 模块：

    • 允许渲染进程调用主进程对象的方法
    • 注意：出于安全考虑，在新版本的 Electron 中，remote 模块默认被禁用

  3. contextBridge：

    • 提供了一种安全的方式来暴露 API 给渲染进程
    // 在预加载脚本中
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message)
})

最佳实践

  1. 将与系统相关的操作放在主进程中处理
  2. 使用 IPC 进行进程间通信，避免直接在渲染进程中使用 Node.js API
  3. 使用 contextBridge 来安全地暴露 API 给渲染进程
  4. 合理划分主进程和渲染进程的职责，保持代码的清晰和可维护性
  5. 注意内存使用，避免在渲染进程中加载过多数据

通过深入理解主进程和渲染进程的角色以及它们之间的通信机制，你可以构建出更高效、更安全的 Electron 应用。