起源: 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 主过程三种次要性能：
- 窗口治理
- 利用生命周期治理
- 原生 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 的体积，其余的优化也只能微不足道~