企业官网建设流程全解析

Electron 架构（2025 年最新）

Electron 的架构继承自Chromium的多进程模型，与现代浏览器（如 Chrome）非常相似。这种设计通过进程隔离提升了应用的稳定性和安全性：即使某个网页内容崩溃或恶意，也不会影响整个应用。

核心是：一个主进程（Main Process）+多个渲染进程（Renderer Processes），加上辅助机制如预加载脚本和工具进程。

1. 主进程（Main Process）

• 数量：整个应用只有一个主进程，是应用的入口点。
• 运行环境：Node.js 环境，可以直接使用require()和所有 Node.js API。
• 主要职责：
  • 管理应用生命周期（通过app模块，如启动、退出）。
  • 创建和管理窗口（通过BrowserWindow模块）。
  • 每个BrowserWindow会对应创建一个渲染进程。
  • 处理原生桌面功能（如菜单、托盘、对话框、通知）。
  • 与渲染进程通信（通过webContents对象）。
• 类比：类似于 Chrome 的“浏览器进程”（Browser Process），但额外集成 Node.js。

2. 渲染进程（Renderer Process）

• 数量：每个窗口（BrowserWindow）或网页嵌入（如BrowserView）一个渲染进程。
• 运行环境：标准的 Web 环境（HTML、CSS、JavaScript），类似于浏览器标签页。
• 限制：
  • 默认禁用 Node.js 集成（新版安全默认设置），不能直接使用require()或 Node API。
  • 如果需要 NPM 包，必须用打包工具（如 webpack、Vite）处理。
• 职责：渲染 UI 和处理网页逻辑。
• 类比：类似于 Chrome 的每个标签页进程。

3. 预加载脚本（Preload Scripts）

• 作用：在渲染进程的网页内容加载前执行的脚本。
• 环境：有 Node.js 和 Electron API 访问权，但与网页内容隔离（通过contextIsolation默认启用）。
• 安全机制：
  • 不能直接修改window全局对象，以防泄露特权 API。
  • 推荐使用contextBridge.exposeInMainWorld()安全暴露 API 到渲染进程（如自定义对象或 IPC）。
• 常见用途：桥接主进程和渲染进程，实现 IPC 通信（ipcRenderer）。

4. 工具进程（Utility Process）

• 引入目的：处理不信任服务、CPU 密集任务或易崩溃组件。
• 环境：完整的 Node.js 进程，由主进程通过UtilityProcessAPI 启动。
• 优势：可直接与渲染进程通信（使用MessagePort），比传统的child_process.fork更结构化。
• 用途：隔离风险操作，避免影响主进程。

5. 进程间通信（IPC）

• 主进程 ↔ 渲染进程：
  • 主进程通过webContents发送消息或执行 JS。
  • 渲染进程通过预加载脚本暴露的ipcRenderer发送消息到主进程（ipcMain接收）。
• 安全通信：必须经预加载脚本桥接，不能直接访问。
• 工具进程 ↔ 渲染进程：使用MessagePort直接通道。

6. 与普通浏览器的区别

• 浏览器：多个标签页进程 + 一个浏览器进程（无 Node.js）。
• Electron：主进程集成 Node.js，可访问系统 API；渲染进程默认隔离 Node.js。
• 安全性提升（近期变化）：
  • contextIsolation默认启用：预加载与网页上下文隔离。
  • 渲染进程禁用 Node.js：防止恶意网页直接访问系统。
  • 强调使用contextBridge暴露 API。

架构简图（文字描述）

主进程 (Node.js + Electron API) ├── 创建/管理 BrowserWindow ├── 处理原生 GUI (菜单、托盘等) ├── IPC (ipcMain) └── 启动 Utility Process 每个 BrowserWindow └── 渲染进程 (Web 页面) ├── Preload 脚本 (桥接 Node/Electron API) └── Web 内容 (纯 Web JS，隔离) Utility Process (可选，Node.js) └── 与渲染进程直接通信 (MessagePort)

这种多进程架构让 Electron 应用既能利用 Web 技术快速开发 UI，又能通过主进程访问桌面原生功能，同时保持较高安全性。如果你想深入某个部分（如 IPC 示例或 preload 最佳实践），可以告诉我！