本文目录

[[toc]]

Electron 架构

多进程架构图

Electron 底层架构基于 Chromium ，完整的 Chromium 架构可以查看 官方文档

简化版本的架构图如下:

事件循环

Electron 基于 Chromium 与 NodeJS ，但是二者的事件循环以及生命周期并不相同:

• Chromium: message bump
• NodeJS: libuv

整合 Chromium 与 NodeJS 的过程 如下图:

基本流程是:

• 开启一个单独的安全线程
• 线程轮询 backend_fd ，可以拿到 linuv 最新的事件
• 将事件添加到 Chromium 事件循环中

进程间通信

render 发往 main

render 通知 main 有两种方式，分别为事件回调写法与 Promise 写法， Promise 写法需要在 Electron 7 以上才支持

• render 使用 ipcRenderer.send(channel, ...args) , main 使用 ipcMain.on(channel, handler) , render 不需要等待 main 返回时使用
• render 使用 ipcRenderer.invoke(channel, ...args) , main 使用 ipcMain.handle(channel, handler) , render 可以等待 main 的响应结果返回

main 发往 render

main 通知 render ，需要先获取到子进程的 window 对象，通过 window.webContents.send(channel, ...args) 发送消息。

render 通过 ipcRenderer.on(channel, ...args) 即可接收事件。

main 发送消息时，并没有提供 invoke 等效的 API ，一般来说 main 不应该持续等待 render 的结果，如果需要的话，也可以通过模拟实现。

render 与 render 通信

Electron 5 以上提供了 ipcRenderer.sendTo ，可以将消息从 render 发往 render 。

在 Electron 27 版本 正式弃用 ipcRenderer.sendTo ，修改为通过 MessageChannel 实现 render 与 render 的通信

在此之前，需要通过 main 进行消息转发

数据共享

由于 Electron 也是基于 Chromium 的，所以 Electron 也支持 localStorage 、 sessionStorage 、 indexedDB 等能力，可以实现数据共享。

除此之外， Electron 也提供了 remote 实现数据共享，底层是一个 sync 的 ipc 通信，容易造成卡顿等情况。

在 Electron 9 中默认关闭 remote 功能 ，并在 Electron 12 中正式移除 ，转为额外插件维护。

原生能力

Electron 由于运行在桌面端，可以提供桌面应用独有的能力，比如 GUI 、设备调用等。

同时由于底层使用了 NodeJS ，可以通过 NodeJS 的原生 API 与 addons 实现更加丰富的操作，并复用已有的 NodeJS 模块