Electron运行原理

Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API。

Chromium

Chromium是Google为发展Chrome浏览器而启动的开源项目，Chromium相当于Chrome的工程版或称实验版，新功能会率先在Chromium上实现，待验证后才会应用在Chrome上，故Chrome的功能会相对落后但较稳定。

Chromium为Electron提供强大的UI能力，可以在不考虑兼容性的情况下开发界面。

Node.js

Node.js是一个让JavaScript运行在服务端的开发平台，Node使用事件驱动，非阻塞I/O模型而得以轻量和高效。

单单靠Chromium是不能具备直接操作原生GUI能力的，Electron内集成了Nodejs，这让其在开发界面的同时也有了操作系统底层API的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用。

系统API

为了提供原生系统的GUI支持，Electron内置了原生应用程序接口，对调用一些系统功能，如调用系统通知、打开系统文件夹提供支持。

在开发模式上，Electron在调用系统API和绘制界面上是分离开发的，下面我们来看看Electron关于进程如何划分。

主进程

Electron区分了两种进程：主进程和渲染进程，两者各自负责自己的职能。

Electron 运行package.json的 main 脚本的进程被称为主进程。一个 Electron 应用总是有且只有一个主进程。

职责:

• 创建渲染进程（可多个）
• 控制了应用生命周期（启动、退出APP以及对APP做一些事件监听）
• 调用系统底层功能、调用原生资源

可调用的API:

• Node.js API
• Electron提供的主进程API（包括一些系统功能和Electron附加功能）

渲染进程

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个Electron 中的 web页面运行在它自己的渲染进程中。

主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

你可以把渲染进程想像成一个浏览器窗口，它能存在多个并且相互独立，不过和浏览器不同的是，它能调用Node API。

职责

• 用HTML和CSS渲染界面
• 用JavaScript做一些界面交互

可调用的API:

• DOM API
• Node.js API
• Electron提供的渲染进程API

一图浅析electron架构

废话不多说，electron既然基于chromium，我们先简单看下chromium架构：

chromium运行时有一个Browser Process，以及一个或者多个Renderer Process。Renderer Process 顾名思义负责渲染Web页面。Browser Process则负责管理各个Renderer Process以及其他部分（比如菜单栏，收藏夹等等）。

我们再来看看electron在chromium的基础上做了什么：

Renderer Process

在electron中，仍然使用Renderer Process渲染页面，也就是说electron app使用Web页面作为UI显示，并且兼容传统的Web页面。不同的是electron app开发者可以可选的配置是否支持Node.js。

Main Process

electron对Browser Process改动较大，干脆另起一个名字叫Main Process。Main Process 除了原来chromium的runtime，又添加了Node.js的runtime，main.js便运行在此之上。

electron将Node.js的message loop和chromium联系起来，使得js中可以灵活的控制页面显示，以及和Renderer Process的IPC通信。

当然原生的Node API和第三方的node module同样支持，并且有electron API提供给开发者控制原生菜单和通知等。

注：Browser Process本来没有js运行时，所以还需要依赖V8（当然这是chromium中的V8，不是单独的V8库）。