Electron 基础知识点
🧠 核心架构与进程机制
主进程 vs 渲染进程
- 主进程负责控制应用生命周期、窗口管理等核心功能。
- 渲染进程是每个
BrowserWindow 内的 Web 页面环境，运行 HTML/CSS/JS。
- 通信方式：
- 使用
ipcMain 与 ipcRenderer 模块进行双向异步通信。
- 推荐使用
contextBridge 与 preload 脚本增强安全性。
contextBridge 的安全通信
- 通过
contextBridge.exposeInMainWorld 暴露 API 给渲染进程。
- 避免直接访问 Node.js API，提高安全性，防止原型污染。
remote 模块的弃用
- 原因：存在安全隐患和性能问题。
- 替代方案：使用 IPC 通信或构建服务层，让渲染进程通过安全接口调用主进程功能。
⚙️ 性能优化与资源管理
启动与内存优化
- 使用懒加载方式加载窗口内容。
- 开启
backgroundThrottling 控制后台窗口性能。
- 减少模块依赖和优化打包资源体积。
避免主线程阻塞
- 将耗时操作放入渲染进程或使用子进程。
- 利用
worker_threads 或 child_process 模块处理 CPU 密集任务。
使用 webContents 与 session 管理资源
webContents.getResourceUsage() 监控内存和 CPU。session 可用于缓存、cookie 管理和拦截请求。
🔐 安全性与权限控制
防止 XSS 和 CSRF
- 启用 CSP（内容安全策略）限制加载源。
- 禁用不信任的协议和外部脚本。
- 所有输入数据做严格验证与转义。
sandbox 模式配置
- 在
BrowserWindow 中设置 sandbox: true。
- 渲染进程无法访问 Node.js，全靠
contextBridge 提供接口。
- 更适合多窗口和 Web 内容隔离的场景。
禁用 Node.js 集成
- 配置
webPreferences.nodeIntegration = false。
- 避免渲染进程调用敏感模块，提升整体安全等级。
📦 打包与自动更新
打包工具对比
| 工具 | 优点 | 缺点 |
|---|
| electron-builder | 自动更新支持好，配置简洁 | 依赖较多 |
| electron-packager | 简单易用，灵活 | 自动更新支持弱 |
electron-updater 流程
- 配置
publish 字段指向更新服务器。
- 在主进程中引入
autoUpdater，监听更新事件。
- 渲染进程通知用户下载与安装。
代码签名与版本控制
- macOS 需使用 Developer ID 签名。
- Windows 需使用 Authenticode 或 DigiCert。
- 利用 Git 或 CI 工具控制版本发布节奏。
🧪 测试与调试
使用 Spectron 测试
- 基于 WebDriver 和 Mocha，测试 Electron UI 行为。
- 可模拟用户操作和验证窗口状态。
VS Code 调试技巧
- 设置
launch.json 分别调试主进程和渲染进程。
- 利用
--inspect 参数开启调试端口。
崩溃报告与分析
- 利用
crashReporter 模块收集崩溃信息。
- 配合 Sentry 或类似平台做堆栈追踪和错误聚合。
🧩 实战经验题
多窗口管理
- 使用
BrowserWindow 实例管理多个窗口。
- 使用 IPC 或
window.postMessage 实现跨窗口通信。
与前端框架集成
- Vue/React 可通过
create-react-app 或 vite 构建。
- 注意禁用 Node.js 集成，避免 Web 安全问题。
- 前后端通信通过
preload.js 和 contextBridge 完成桥接。
