Electron 架构总览

把 Electron 的 main、renderer、preload、IPC、BrowserWindow 和安全边界放在一张图里理解,是建立整体心智模型的关系笔记。

#tech / dev / desktop #resource / electron #type / synthesis #status / growing

[!info] related notes

Electron 架构总览

范围

这篇不展开单个 API,而是把 Electron 里最关键的几个角色放在同一张图里理解:

  • 主进程
  • 渲染进程
  • preload
  • BrowserWindow
  • IPC
  • 安全边界

为什么要放在一起理解

Electron 最容易让人困惑的地方不是概念太多,而是这些概念互相嵌套:

  • BrowserWindow 由 main 创建
  • 窗口里跑的是 renderer
  • preload 在页面前注入
  • 高权限能力通过 preload + IPC 过桥
  • contextIsolationsandboxnodeIntegration 共同决定边界

如果这些点不放在一起看,你会只记 API,不知道为什么这样设计。

核心关系

主进程持有最高权限

主进程负责:

  • 生命周期
  • 窗口创建
  • 系统级能力
  • 高权限操作协调

BrowserWindow 是边界落点

主进程通过 BrowserWindow 决定:

  • 加载哪个页面
  • 注入哪个 preload
  • webPreferences 如何配置

也就是说,很多安全和运行时边界,最终都落在窗口配置上。

renderer 负责 UI,但不应直接拿高权限

渲染进程更像 Chromium 页面,负责:

  • 视图
  • 交互
  • 前端状态

它不应该天然拥有所有 Node / Electron 能力。

preload 是受控桥梁

preload 夹在页面和高权限能力之间:

  • 向页面暴露有限接口
  • 把受控请求转给 main

它是 Electron 里最重要的桥接层。

IPC 是协作机制

由于 main 和 renderer 隔离,真正让它们协作起来的是 IPC。

安全边界是整套体系,不是单个开关

现代 Electron 安全的关键不是某一个配置,而是整套边界一起收紧:

  • nodeIntegration
  • contextIsolation
  • sandbox
  • preload 暴露面
  • IPC sender 校验

一个最常见的工作流

  1. main 启动应用
  2. main 创建 BrowserWindow
  3. BrowserWindow 注入 preload 并加载页面
  4. renderer 展示 UI
  5. renderer 调用 preload 暴露出来的接口
  6. preload 通过 IPC 请求 main 做高权限操作
  7. main 返回结果,renderer 更新 UI

对比与易混淆点

  • BrowserWindow 不是单独一层业务逻辑,而是边界配置点
  • preload 不是“方便写一点初始化逻辑”,而是安全桥
  • IPC 不是可选附件,而是 Electron 多进程协作的核心
创建于 2026/4/13 更新于 2026/5/27