起源: 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的体积，其余的优化也只能微不足道~