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 过桥
contextIsolation、sandbox和nodeIntegration共同决定边界
如果这些点不放在一起看,你会只记 API,不知道为什么这样设计。
核心关系
主进程持有最高权限
主进程负责:
- 生命周期
- 窗口创建
- 系统级能力
- 高权限操作协调
BrowserWindow 是边界落点
主进程通过 BrowserWindow 决定:
- 加载哪个页面
- 注入哪个 preload
webPreferences如何配置
也就是说,很多安全和运行时边界,最终都落在窗口配置上。
renderer 负责 UI,但不应直接拿高权限
渲染进程更像 Chromium 页面,负责:
- 视图
- 交互
- 前端状态
它不应该天然拥有所有 Node / Electron 能力。
preload 是受控桥梁
preload 夹在页面和高权限能力之间:
- 向页面暴露有限接口
- 把受控请求转给 main
它是 Electron 里最重要的桥接层。
IPC 是协作机制
由于 main 和 renderer 隔离,真正让它们协作起来的是 IPC。
安全边界是整套体系,不是单个开关
现代 Electron 安全的关键不是某一个配置,而是整套边界一起收紧:
nodeIntegrationcontextIsolationsandbox- preload 暴露面
- IPC sender 校验
一个最常见的工作流
- main 启动应用
- main 创建 BrowserWindow
- BrowserWindow 注入 preload 并加载页面
- renderer 展示 UI
- renderer 调用 preload 暴露出来的接口
- preload 通过 IPC 请求 main 做高权限操作
- main 返回结果,renderer 更新 UI
对比与易混淆点
- BrowserWindow 不是单独一层业务逻辑,而是边界配置点
- preload 不是“方便写一点初始化逻辑”,而是安全桥
- IPC 不是可选附件,而是 Electron 多进程协作的核心