Electron 进程模型

来源: Electron 进程模型
发布时间: 2021-06-08 07:00:40

1. electron是什么

electron是一个帮助前端开发者快速开发跨平台桌面（macOS，Linux，windows）应用的工具，内部包含了chromium与nodejs的工具集。
​

​

​

2. electron 进程

electron本质上是chromium的再开发，也就说它和chromium一样，是一个多线程的架构。




详细可点击这里查看：Chromium 跨平台基础库：多线程，简单可看下图：



对于开发者而言，electron里面需要关注就是下面两个进程主进程和渲染进程。
​

2.1 主要进程(main process)

什么是主进程？引用官网讲：每个Electron应用都有一个单一的主流程，作为应用程序的入口点。 主过程在Node.js环境中运行，这意味着它具有 require （请求）模块和使用所有 Node.js API 的能力。


也就是讲，主进程运行着electron窗口，以及创建其他各种功能子进程。在electron主进程里面，拥有访问文件，网络，硬件等宿主能力，可以和宿主机进行交互。也就是说基本系统有功能都可以去使用和访问。


electron主进程三种主要功能：
​

1. 窗口管理
2. 应用生命周期管理
3. 原生api使用

2.2 渲染进程(renderer process)

在electron里面渲染进程是针对单个窗口，也就是说一个主进程会对应多个渲染进程，每个渲染进程都会对应生成一个浏览器窗口，去渲染html、css、js、image等资源。
​

原因可查看这里：

图来源于: https://www.google.com/googlebooks/chrome/
渲染的进程独立，避免单一网页的不佳，导致其他网页应用挂掉。

​

在electron中渲染进程指的的预加载进程，在初始化 BrowserWindow 的时候，通过 webPreferences.preload 属性加载js脚本，这个脚本运行在加载页面之前，可以在该进程内访问electron的 renderer api。
​

2.3 进程通信

在electron里面虽然运行的都是JS，但是实际上跑的进程是不一样的，主进程和渲染进程是独立的，所以就需要进程同行。在electron中，使用 contextBridge 进行互通，下面是一个简单的bridge使用:
​

​

preload.js

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true,
});

renderer js

console.log(window.myApi.desktop); // true

​

3. 感想

对于electron应用来说，可以说是“每一个electron app，相当于一个chrome+网页应用”，他的使用前提必须要完整的chromium的运行的环境，这是跨平台应用的前提，能运行chromium的必然可以跑electron。究其根本，还是网页应用，在网页技术上的优化，一样可以使用到桌面应用。对于他来讲，降低包的体积，如果要有本质的改变必须要去优化electron的体积，其他的优化也只能微乎其微~