Electron 简介
Electron 是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序的框架。换一个角度理解,其实是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的库,一个 JavaScript 运行环境。
它由上图所示 Electron 环境由:浏览器环境 + Node 环境 + 操作系统 Native API 共同组成。
主进程
我们在启动任何应用的时候,都会开启一个进程,表示应用进程,用于和操作系统打交道。比如:打开一个系统窗口。
因此,这个应用进程,在 Electron 里面为做:主进程。
当我们使用:electron xxx.js
启动应用的时候(不打开任何窗口),启动了一个进程,这个进程就是主进程。
首先新建一个测试项目:
mkdir electron-process-test // 新建文件夹 electron-process-test
cd electron-process-test
yarn init
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn add electron -D
新建主进程文件:main.js
。
// main.js
console.log('this is main process');
接着运行这个 JS,此处在package.json
中添加命令:
{
...
"dev:main": "electron main.js",
...
}
最后运行 pnpm run dev:main
, 打出了 'hello',我们在活动监视器可以看到:
上述步骤启动了一个 Electron 主进程,即图中的带图标的那个 Electron 进程。他启动了一个额外的辅助进程 Electron helper,是 GPU 处理进程。
渲染进程
当我们打开浏览器的一个 Tab 并加载了一个页面,此时页面是运行在一个新的进程中的。这个承载页面的进程,在 Electron 里为:渲染进程。
接着上述示例:
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
const win = new BrowserWindow({
width: 400,
height: 400
});
});
运行 pnpm run dev:main
, 查看活动监视器:
启动后,我们发现并未新增进程。因为这个窗口在没有加载页面(本地 HTML 文件或网页)的时候,不会新增渲染进程。
我们需要加载一个页面:
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
const win = new BrowserWindow({
width: 400,
height: 400
});
win.loadURL('https://www.baidu.com');
});
运行并查看活动监视器:
发现多了一个Electron Helper,其中有一个新增的,即为加载页面的渲染进程。
以上过程,我们直观感受到了什么是主进程、渲染进程:
- 主进程就是使用
electron main.js
的时候,就会开启一个主进程:Electron。 - 渲染进程会在新建窗口后,
loadURL
的时候开启渲染进程:Electron Helper。
loadURL
也可以加载一个 HTML,与浏览器的 Tab 类似。
win.loadURL(`file://${__dirname}/../index.html`);
上面讲解了 Electron 主进程和渲染进程的概念。
从上述例子也可以直观感受到:
- 主进程主要和操作系统打交道,比如打开原生窗口,应用菜单等。
- 渲染进程则主要就是指窗口中加载页面运行的进程,可以简单理解为浏览器的 Tab 进程。
与浏览器的网页环境不同的是,在 Electron 的渲染进程环境中,可以使用 Node 的相关能力。
以下有一张图,大家可以直观感受到可使用的 API 上的差异。
- 渲染进程和主进程均可以使用 Node,因此 Node 环境在最外层。
- 主进程主要调用与系统相关 API。
- 渲染进程则主要是 Web 上的 API。
提示
参考文章:渲染进程、主进程、Electron本质。