Electron 学习路线

系统性精通 Electron 的个人学习路径。边学边填——有心得再回来写，不强求完整。

阶段地图

✅ 0 先决条件  →  ✅ 1 进程模型 & IPC  →  ✅ 2 原生集成
                                               ↓
✅ 5 架构精通  ←  ✅ 4 工程化 & 打包  ←  ✅ 3 安全模型

主线学习路径完成。下一阶段：源码阅读 + AnyGen 实战应用。

阶段 0 — 先决条件 ✅

资料： Node.js Design Pattterns — 前四章 ✓

阶段 1 — 进程模型 & IPC ✅

→ Electron - 进程模型与 IPC

已掌握

• Main / Renderer / Preload 三层职责划分
• contextIsolation + nodeIntegration: false 安全原理
• IPC 四种模式：handle/invoke、send/on、单向通知、跨窗口广播
• 七个常见陷阱：监听器泄漏、Structured Clone 限制、窗口生命周期竞态等

下一步前：重读 OpenCode Electron 快捷键系统深度解析与 AnyGen 设计建议 §3 和 §5

阶段 2 — 原生集成 ✅

→ Electron - 原生集成

已掌握

• app 生命周期、单例锁与 second-instance 接管逻辑
• Menu：应用菜单、右键菜单、role vs 自定义 click
• dialog：文件选择、消息框（必须在 Main 调用）
• Tray：托盘图标、GC 陷阱（无内部注册表，必须保持模块级引用）
• Notification、globalShortcut、shell
• WebContentsView 内嵌浏览器视图

阶段 3 — 安全模型 ✅

已掌握

• contextIsolation: true + nodeIntegration: false：XSS 危害等级放大原理
• CSP 配置、sandbox、webSecurity
• Preload 最小权限界面，contextBridge 锁死频道名
• Security Checklist 逐条理解

阶段 4 — 工程化 & 打包 ✅

→ Electron - 工程化与打包

已掌握

• electron-vite 两套构建配置的原因（Main vs Renderer 运行时不同）
• electron-builder 打包本质：Electron 二进制 + asar + 目录约定
• asar 归档原理（不是加密，透明 fs 拦截，原生模块需 unpack）
• 代码签名底层：macOS codesign + 公证，Windows signtool + SmartScreen 口碑
• 自动更新底层：Squirrel.Mac / Squirrel.Windows，electron-updater 是封装层
• GitHub Actions 矩阵三平台并行构建

阶段 5 — 性能 & 架构 🔜

→ Electron - 性能与架构

已掌握

• 启动慢：懒加载、V8 Code Cache；测量优先，不靠猜
• 内存高：Heap Snapshot 定位泄漏、及时 destroy() 窗口
• IPC 阻塞：节流 / 批量合并、大数据走 SharedArrayBuffer
• 渲染卡顿：Utility Process 隔离 CPU 密集任务（vs Worker Thread 的取舍）
• 包体积：asar list 分析、tree-shake、排除无用文件
• Command System 中心化、多窗口状态同步（Main 广播 / BroadcastChannel）
• Plugin 沙箱：Utility Process 隔离 + 白名单 API

源码阅读计划

相关笔记

• Electron — 主题枢纽，所有 Electron 笔记汇总
• Node.js Design Pattterns — 主进程底层原理
• Electron - 内建浏览器（Built-In Browser) — WebContentsView 实战
• OpenCode Electron 快捷键系统深度解析与 AnyGen 设计建议 — 架构参考（内部）