Electron 架构解剖：Chromium + Node.js 如何协同工作

在这里插入图片描述

• 个人首页： VON
• 鸿蒙系列专栏： 鸿蒙开发小型案例总结
• 综合案例 ：鸿蒙综合案例开发
• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0
• 鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
• 本文章所属专栏：Electron for HarmonyOS

前言

在 Electron 开发中，理解其底层架构是写出高性能、安全、可维护应用的关键。Electron 的核心思想非常清晰：用 Web 技术构建桌面应用。它通过将 Chromium（负责渲染 UI） 与 Node.js（负责系统能力） 深度集成，实现了这一目标。但这两者原本是相互隔离的运行环境——Chromium 出于安全考虑禁用了对本地系统的直接访问，而 Node.js 则专注于服务端/脚本任务。那么，Electron 是如何让它们“握手言和”的？本文将深入剖析其架构机制。

一、主进程 vs 渲染进程：多进程模型详解

Electron 采用 多进程架构，这是其稳定性和安全性的基石。

1. 主进程（Main Process）

• 唯一存在：每个 Electron 应用有且仅有一个主进程。
• 职责：
  • 创建和管理应用窗口（BrowserWindow）
  • 控制应用生命周期（启动、退出、托盘、菜单等）
  • 调用操作系统原生 API（文件系统、网络、硬件等）
  • 启动和管理所有渲染进程
• 运行环境：纯 Node.js 环境，拥有完整的 require() 和系统权限。
• 入口文件：通常为 main.js 或 main.ts。

// main.js
// main.js
const { app, BrowserWindow, ipcMain, webContents } = require('electron');
const path = require('path');

// 处理来自渲染进程的 IPC 请求
ipcMain.handle('read-file', async (event, filePath) => {
  const fs = require('fs').promises;
  try {
    const data = await fs.readFile(filePath, 'utf8');
    return data;
  } catch (err) {
    throw new Error(`无法读取文件: ${err.message}`);
  }
});

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

// 创建主窗口
function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 关键：注入预加载脚本
      contextIsolation: true, // 必须开启以保障安全
      nodeIntegration: false, // 禁用直接 Node 访问
    },
  });

  win.loadFile('index.html');
}

// 应用启动
app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 所有窗口关闭时退出（macOS 除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. 渲染进程（Renderer Process）

• 多个存在：每个 BrowserWindow（或 <webview> 标签）对应一个独立的渲染进程。
• 职责：
  • 渲染网页内容（HTML/CSS/JS）
  • 处理用户交互（点击、输入等）
  • 执行前端逻辑
• 运行环境：Chromium 的 V8 引擎 + 受限的 Node.js（默认关闭，需显式开启）
• 本质：就是一个“被增强”的浏览器标签页。

🔒 关键设计：默认情况下，渲染进程 无法直接访问 Node.js API（如 fs, path, child_process），这是为了防止网页代码直接操作用户系统，提升安全性。

二、WebView 在 Electron 中的角色

<webview> 是 Electron 提供的一个特殊 HTML 标签，用于在应用内嵌入另一个独立的网页上下文。

特点：

• 每个 <webview> 运行在自己的渲染进程中，与宿主页面隔离。
• 可加载外部 URL（如 https://example.com），常用于嵌入第三方服务（如聊天窗口、支付页面）。
• 支持独立的安全策略、预加载脚本（preload）、权限控制。

<webview src="https://www.github.com" 
         nodeintegration="false"
         preload="./guest-preload.js">
</webview>

使用场景：

• 内嵌文档查看器（PDF、Office Online）
• 第三方登录/支付回调页
• 插件系统或沙箱化内容展示

⚠️ 注意：出于安全考虑，不要在 <webview> 中启用 nodeIntegration，除非你完全信任加载的内容。

三、Electron 的 Web 能力边界在哪里？

虽然 Electron 基于 Chromium，但它并非“万能浏览器”。其 Web 能力存在明确边界：

✅ 支持的能力

⚠️ 受限或不支持的能力

🔒 安全边界：Node.js 与 Web 的隔离

• 默认情况下，渲染进程 不能使用 require()。
• 若需在前端调用 Node.js 功能，必须通过 IPC（进程间通信） 或 预加载脚本（Preload） 安全暴露有限接口。

推荐做法：使用 Preload 脚本桥接

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

contextBridge.exposeInMainWorld('myAPI', {
  readFile: (path) => ipcRenderer.invoke('read-file', path),
  getVersion: () => ipcRenderer.invoke('get-app-version')
});

<!-- renderer -->
<script>
  myAPI.getVersion().then(v => console.log('App version:', v));
</script>

// main.js
ipcMain.handle('get-app-version', () => app.getVersion());

✅ 这种方式既保留了 Web 的开发体验，又确保了系统调用的安全可控。

四、总结：Electron 的协作哲学

Electron 的强大之处在于：它没有强行融合 Web 与 Native，而是通过清晰的进程边界和通信机制，让两者各司其职、安全协作。

📌 开发者忠告：

• 不要滥用 nodeIntegration: true
• 尽量将敏感操作放在主进程
• 使用 contextIsolation: true（默认已启用）
• 理解“每个窗口都是独立进程”，避免内存泄漏

如果你正在开发 Electron 应用，务必牢记：便利的背后是责任。正确理解架构，才能写出既强大又安全的桌面软件。