rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
126 lines (84 loc) • 4.44 kB
Markdown
---
sidebar_position: 1
---
# Electron 简介
Electron 是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的框架。换一个角度理解，其实是一个可以用 **JavaScript、HTML 和 CSS** 构建桌面应用程序的库，一个 JavaScript 运行环境。
它由上图所示 Electron 环境由：浏览器环境 + Node 环境 + 操作系统 Native API 共同组成。
### 主进程
我们在启动任何应用的时候，都会开启一个进程，表示应用进程，用于和操作系统打交道。比如：打开一个系统窗口。
因此，这个应用进程，在 Electron 里面为做：**主进程**。
当我们使用：`electron xxx.js` 启动应用的时候（不打开任何窗口），启动了一个进程，这个进程就是**主进程**。
首先新建一个测试项目：
```bash
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`。
```ts title="main.js"
// main.js
console.log('this is main process');
```
接着运行这个 JS，此处在`package.json`中添加命令：
```ts
{
...
"dev:main": "electron main.js",
...
}
```
最后运行 `pnpm run dev:main`， 打出了 'hello'，我们在活动监视器可以看到：
上述步骤启动了一个 **Electron 主进程**，即图中的带图标的那个 Electron 进程。他启动了一个额外的辅助进程
Electron helper，是 GPU 处理进程。
### 渲染进程
当我们打开浏览器的一个 Tab 并加载了一个页面，此时页面是运行在一个新的进程中的。这个承载页面的进程，在 Electron 里为：**渲染进程**。
接着上述示例：
```ts title='main.js'
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
const win = new BrowserWindow({
width: 400,
height: 400
});
});
```
运行 `pnpm run dev:main`, 查看活动监视器：
启动后，我们发现并未新增进程。因为**这个窗口在没有加载页面**（本地 HTML 文件或网页）的时候，不会新增渲染进程。
我们需要加载一个页面：
```ts title='main.js'
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 类似。
```ts
win.loadURL(`file://${__dirname}/../index.html`);
```
上面讲解了 Electron 主进程和渲染进程的概念。
从上述例子也可以直观感受到：
* 主进程主要和操作系统打交道，比如打开原生窗口，应用菜单等。
* 渲染进程则主要就是指窗口中加载页面运行的进程，可以简单理解为浏览器的 Tab 进程。
与浏览器的网页环境不同的是，在 Electron 的渲染进程环境中，可以使用 Node 的相关能力。
以下有一张图，大家可以直观感受到**可使用**的 API 上的差异。
* 渲染进程和主进程均可以使用 Node，因此 Node 环境在最外层。
* 主进程主要调用与系统相关 API。
* 渲染进程则主要是 Web 上的 API。
:::tip 提示
参考文章：[渲染进程、主进程](https://cameronnokes.com/blog/deep-dive-into-electron's-main-and-renderer-processes/)、[Electron本质](http://jlord.us/essential-electron/)。
:::