[!info] related notes

• 所属 MOC: Electron MOC
• 架构总览: Electron 架构总览
• 核心原子笔记: Electron 进程模型, Electron 主进程, Electron 渲染进程, Electron preload 脚本, Electron contextBridge, Electron IPC 模式
• 安全边界: Electron contextIsolation, Electron 进程沙箱, Electron 安全检查清单
• 构建发布: Electron 项目结构, JavaScript 构建与 Electron 打包, Electron Forge, Electron 代码签名与公证, Electron 自动更新, Electron 原生编译, Electron 开发常见问题详解

Electron

一句话定义

Electron 是把 Chromium 的渲染能力和 Node.js 的系统能力组合进同一个桌面运行时，让你用 Web 技术构建跨平台桌面应用。

范围

这篇不是单一 API 说明，而是总览关系笔记。

重点回答：

• Electron 到底是什么框架
• 为什么它不是“带 Node 的网页”
• main、renderer、preload、IPC、安全边界之间怎么串起来
• 学 Electron 时应该先建立哪张脑图

先建立整体地图

理解 Electron，先抓住这 6 句话：

1. Electron = Chromium + Node.js + 桌面 API 封装
2. 它继承了 Chromium 的多进程模型，不是单进程脚本壳
3. 主进程掌握高权限，渲染进程负责 UI，preload 是受控桥梁
4. 真正的工程关键不是“直接用 Node”，而是“隔离 + IPC + 最小权限”
5. BrowserWindow 是把进程模型、安全边界和窗口行为串起来的关键对象
6. 生产落地不只看页面开发，还要看构建、打包、签名、更新和性能

为什么要把这些概念放在一起理解

Electron 最容易让人误判的地方是：

• UI 看起来像网页
• 系统能力又像 Node 应用
• 但它实际运行时是浏览器式多进程结构

如果不先建立进程边界，你很容易把：

• 本该在 main 做的高权限逻辑塞进 renderer
• 本该通过 preload 暴露的能力直接透给页面
• 本该按 IPC 设计的通信写成到处乱调的隐式耦合

核心架构

主进程

主进程负责：

• 应用生命周期
• 创建窗口
• 管理系统级能力
• 响应来自 renderer 的高权限请求

进一步展开见 Electron 主进程。

渲染进程

渲染进程本质是 Chromium 页面，主要负责 UI 和交互。

现代 Electron 的默认思路不是让 renderer 直接持有 Node 权限，而是把高权限能力收回到 main / preload。

进一步展开见 Electron 渲染进程。

preload

preload 是工程分水岭。

它既能访问更高权限能力，又应该只向页面暴露非常有限的白名单接口。

进一步展开见 Electron preload 脚本。

contextBridge

如果 preload 是桥，contextBridge 就是把白名单接口真正安全地放到页面这一侧的标准工具。

进一步展开见 Electron contextBridge。

IPC

由于 UI 和系统能力不在同一个进程，Electron 的核心机制之一就是 IPC。

真正成熟的 Electron 项目，IPC 不只是“能通信”，而是要有：

• 稳定 channel
• 明确输入输出
• 最小权限
• sender 校验

进一步展开见 Electron IPC 模式。

BrowserWindow 与 WebContents

在 Electron 里，窗口和页面内容不是一回事：

• BrowserWindow 更像窗口容器与边界配置点
• WebContents 更像页面内容实例和主进程操作页面的载体

进一步展开见 Electron BrowserWindow、Electron WebContents。

现代 Electron 的安全基线

现代 Electron 的核心不是“给网页加 Node”，而是先把边界收紧：

• nodeIntegration 默认应关闭
• contextIsolation 应开启
• sandbox 应理解并尽量保持开启
• preload 不应暴露原始 ipcRenderer
• BrowserWindow 的 webPreferences 应按最小权限配置

这一层继续看：

• Electron contextIsolation
• Electron 进程沙箱
• Electron 安全检查清单

构建与发布为什么也是 Electron 的一部分

Electron 不是“写完页面就结束”的框架。

它天然会把你带到这些问题：

• main / preload / renderer 怎么分别构建
• 打包后运行时去哪找文件和模块
• 原生模块 ABI 怎么处理
• 安装包、签名、更新和发布怎么落地

进一步展开见：

• Electron 项目结构
• JavaScript 构建与 Electron 打包
• Electron Forge
• Electron 代码签名与公证
• Electron 自动更新
• Electron 原生编译
• Electron 开发常见问题详解

性能与误区

Electron 不是天然慢，但很吃工程习惯。

最常见的误区有：

• 把 Electron 当成“能直接调 Node 的网页”
• 把 preload 当万能透传层
• 把所有业务和系统逻辑都塞进主进程
• 只开 contextIsolation 就以为安全问题结束了

推荐学习顺序

1. Electron 进程模型
2. Electron 主进程
3. Electron 渲染进程
4. Electron preload 脚本
5. Electron IPC 模式
6. Electron contextBridge
7. Electron contextIsolation
8. Electron 进程沙箱
9. Electron BrowserWindow
10. Electron WebContents
11. Electron 安全检查清单
12. Electron 项目结构
13. JavaScript 构建与 Electron 打包
14. Electron Forge

一句话记忆

真正好的 Electron 项目，关键不在于“会不会调用 API”，而在于：

• 谁能做什么
• 代码跑在哪个进程
• 权限怎么隔离
• 能力怎么通过受控桥梁暴露