Electron：PC 端多端融合方案-六虎

每天都要写第二天的 todoList。有一天在写的时分忽然想到，为了让自己清楚知道自己需求做啥、做了多少、还剩多少没做，想写一个电脑端程序，在技能选型的时分就选了 electron。

本篇文章的目的不是解说 API 怎么运M 9 S p _ d用，想知道这些能够直接看官方文V e { [档。本文目的k o 5 8 9 x L旨在批注怎么技能怎么挑选、怎么快速上手、怎么调试、Electron 底层原理、工程体系方面的总结。

一、计划选型

3天时间写了个 PC 端运用程序。先看看结果吧

为什么要选 electron 作为 pc 端开发计划？
史前时代，以 MFC 为代表的技能栈，开发功率较低，保护本钱高。
后来运用 QT 技能，特点是运用 DirectUI + 面向目标 + XML 界说 UI，适用于小型软件、功用要求、包巨细、UI 杂乱度叫高的需求。
再到后来，以 QJ M . # 1T Quick 为代表的技能，特点是框架本身供给子* N , 8 d H X 5控件，根据子控件组合来创立新的控件。相似于 ActionScript 的脚本化界面逻辑代码。
新时代首要是m 5 O j O h T y以 electron 和 Cef 为代表^ 5 Y。特点是界面开发以 Web 技能为主，部分逻辑需求 Native 代码完成。咱们都了解5 ? b的 VS Code 便是运用 elec* ~ : k S i ! rtron 开发的。适用于 UI 改变较多、体积限制不大、| g ? s y i o 4开发功率高的场景。

拿 C 系列写运用程序的体v K ( ( S I 4 E会不好，累到奔溃。再加上有 Hybrid、RQ 6 Zeact Native、iOS、Vue、React 等开发经历，electron 是不二挑选。

二、 Quic1 + % X | (k start

履行下面指令快速体会 Hello world，也是官方给的一3 O x $ l z c f个 Demo。

gf & Rit clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

简略介绍下 Demo 工程，工程目录如下所示

在终z c )端履行 npm start 履行的是 package.json 中的 scripts 节点下的 start 指令，也便是 electron .，. 代表履行 main.js 中的逻辑。

// Modules to control application life and creatr ? Z 7 % W U qe native browser window
const {app, BrowserWindow} = requirG & X J | | b e(9 t k  B'electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
prelop ` !ad: pF R S  : M h Fath.join(__dirname, 'preload.jsI ? 6 = k K | J r')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')L { b 0 G V P P }
// Open the DevToolsi ; 9 y V + Q 7.
mainWindow^ + I = j T D M.webContents2 7 h } 1 ; ) ; 7.openDevToh 5 d !ols()
}
// This meU s 9 8 C Dthod will be* Z b ; * h ( + t called when Electron has finished
// inity + H |ialz ~ : 8 B ization and id V A i *s ready to cre8 N F zate browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// Onh O f , f macOS it is common for appliB h Mcati/ 7 _ P ! _ d Fons and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (prN I y 3 z Y a .ocess.platform !== 'darwin'd & d b 0 M) app.3 s 1 6quit()
})
app.on('- u T )activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clO 6 qicked and there are no other windows open.
if (B% Q a $ z U rowserWindow.getAllWindows().length === 0) createWindow()
})
// Ic V [ J b v 9 +n this file you can include the restT F ! ] 4 of your app's specific maf ] { ! 0in prt u { B $ a oocess
// code. You can also put themB q Y d S h in separate files and requiref k Q N l - J 1 t@ $ 7 e ] 2 w [ 9hem here.

写过 Vue{ T g . d a A ) H、React、Native 的人看代码很简略，由于运用程序的生命周期钩子函数是很重要的，开发者依L , B I b L p {据需求在钩子函数里边做相应的视图创立、初始化、毁掉目标等等。比方 electron 中的 activate、window-all-closed 等。

app 目标在 whenReady 的时分履行 cv i % 9reateWindow 办法。内部创立了一个 BrowserWindow 目标，指定了r C 7巨细和功用设置。

1. webPreferences Object (可选) - 网页功用的设置。
2. preload String (可选) - 在页面运转其他脚本之前预先加载指定的脚本 不管页面是_ $ G O 6 y = O否集成 Node, 此脚N K + [ M ( 5本都能够拜访一切 Node API 脚本途径为文件的绝对途径。 当 node integration 封闭时, 预加载的脚本将从大局范围从头引进 node 的大局引证标志。

mainWindow.loadFI 7 ? b 7 {ile('index.html') 加载了同级目录下的 index.html 文件。也能够加载服务器o 1 @ V G资源（部署好的网页），比方 win.loadURL('https://github.com/FantasticLBP')

接下去看看 preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventR l X 5 #Listener('DOMCont5 / 9 ; * mentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementS ` ^ById(selector)
if (element) element.innerText = textK : E ] - B x Q c
}
conso{ p I O c / (le.table(process)
console.info(process.versions)
fon j w ! q G l zr (const type of ['chrome', 'nog 4 R s k ( % # hde', 'electron']) {
replaceText(`${type}-version`, proce z u j 7 Y W }ss.version[ 3 M # H !s[type])
}
})

在页面运转其他脚本之前预先加载指定的脚本，不管页面是否集成 Node，此脚本都能够拜访一切 Node API 脚本途径为文件的绝对途径。Demo 中的逻辑很简略，便是读取 process.versions 目标中的 node、chroQ r Y p 2 y bme、electron 的版别信息并展现1 s 0 { q M u出来。

index.html 中的内容便是主页面显现的内容。一般不会直接写 html、css、js，都会依据技能背景挑选前端框架，比方 Vue、React 等，或许模版引擎 ejs 等。

三、完成原理

electron 分为烘托进程和主进程。和 Native 中的概念不一样的是 electron 中主进程只k / D c Z ^需一个，烘托进程（也便是 UI 进程）* ( o 3 , m 有多个。主进程在后台运转，每次翻开一个界面，会新开一个新的烘托进程。

烘托进程：用户看到的 web 界面便是由烘托进程制作出来的，包含 html、css、js。
主进程：electron 运转 packq / C n Hage.json 中n 6 ~ U 9 ~ = Z N的 main.js 脚a [ 6 Q R本的进程被称为主进程。在主进程中运转的脚本经过创立 web 页面来展现用户界面= J ! j v ! h。一个 electron 运用程序总是只需一个主进程。

1. Chromium 架构

浏览b ) C c H器分为单进程和多m ] s i ^ h 1 , y进程架构。下面先讲讲 Chrome 为代表的浏览器过去和未来。

1.1 单进程浏览器

单进程浏D c f览器指的是浏览器的一切功用模块都是运转在同一个进程] – C , o里_ n ~ ; h Z ^的，这些模块包含网络、插件、Javascrs P oipt 运转环境、烘托引擎和页面等。 T ~ m x ` L I g如此杂乱的功用都在一个进程内运转，所以导致浏览器呈现不稳定、不安全、不流b 9 9 _通等问题。

早在2007年之前，市u K # d v面上的浏览器都是单M l c ) L ? W V进程架构。

问题1:N z 0 X . C 不稳定

前期浏览器需求借助插件来完成相似 Web 视频、We^ 3 ^b 游戏等各种“强壮”的功用。但插件往往是最简略呈现问题的模块。此外由于运转在浏览器进程中，所以一个插件的意外奔溃到导致f 7 y整个浏览器到的奔溃。

除了插件之外，烘托引擎模块也是不稳定的。一般一些杂乱的 Javascript 代码就有可能导致烘托引擎模块的奔溃。和插件一样，烘托= i K e引擎的奔溃会导致整个浏览器奔溃。
问题2: 不流通

从单进程浏览器架构图看3 v V /出，一切页面的烘托模块、Javascript 履行环境、插件都是在一个线程中履行的。这意味 W Q % Z 9 5 G着同一时刻只需一个模块能够B b d } N 7 7履行。
```
function execUtilCrash() {
while (true) {
console.log("Stay hungry, stay foolish."0 M u t P);
}
}
execUtilCrash();
```
在单进程浏览器架构下，该代码在履行的时分会独占线程，导致其他运转在该线程中的模块没机会履行，浏览器中的一切页E d n u / j z面都运转在该线程中，所以页面都没机会去履行任务，表现为整个浏览器失掉呼应，也G | ^ 6 E便是卡顿。

脚本、插件 会让单进程浏览器变卡顿外，页面的内存泄露也会导致浏览器卡顿。一般浏览器内核是十分杂乱的，运转一个杂乱的页面再封闭页面，会存在内存不能彻底回收的状况，这样导致的问题是随着运用时间的变长，内存泄漏问题越严重，内存占用越高，可用内存越来越| T 少，浏览器会变得越来越慢。
问题3: 不安M v 3 V全

一般浏览器插件都是用 C/C++ 编写的，经过插件就能够获取到较多的操作体系资源，当你在页面上运转一个插件的时分，也就意味着这个插件能“彻底”操控你的电脑。假如是恶意插件，那它就能够做一些窃取账号密码等，引发安全问题I * 1 0 4

1.2 前期多进程架构浏览器

上图2008年 Chrome 发s b { 7 G [ ,布时的进程架构图。能够看出 Chrome 的页面是运转在独自的烘托进程中，一起页E v @ h Z面的插件也是运转在独自的插件进行中的，进程之间经过 IPC 进行通讯。

**处理了不稳定问题。**由于进程之间是彼此阻隔的，所以当一个页面或许插件奔溃时，受影响的仅仅3 ~ R 9 h w j是当时的页面或许插件进程，并不会影响到浏览器和其他的页面。也便是说处理f G r了前期浏览器某个页面或许插@ 0 D ; . ` / 件奔溃导致整个浏览器的奔溃，然后处理了不稳定问题。

处理了不流通问题。 相同，Javascript 进行也是运转在烘托进程中的，所以a d C Z } K : U v即便z % : h o T _ $当时 Javascript 堵塞了烘托进程，影响到的也只是当时的烘托页面V M A ] h b Z t，并不会影响到浏览器和其– U c他页面或许插件进2 D B程（其他的页面的脚本是运转在I ; = R g R自己的烘托进程中的）。

关于内存泄漏的处理办法愈加简略。当封闭某个页面的时分，整个烘托进程就会被封闭，所以该进程所占用的内存都会被体系回收，所以轻松处理了浏览器页面的内r T A 2存泄漏n d _ & y a d n问题。

处理了安全问题。选用多进程架构能够运用安全沙箱技能。沙箱能够看成是操作体系给浏览器一个小黑9 & q盒，黑盒内部能够履行程序，可是不能拜访操作体系资源、不能拜访硬盘数据，也不能在 ) 7灵敏位置读取任何数据，例如你的文档和桌面。ChroF Q 2 Ome 把插件进程和烘托进程运用沙箱阻隔起来，这样即便在烘托进程或许浏览器进程中履行了恶意代码，恶意代码也无法打破沙箱限制去获取体系权限。

沙箱阻隔起来的进程必须运用 IPC 通e c 9 b P {道才能够与浏览器内核进程通讯，通讯进程就会进行安全的检查。

沙箱规划的目的是为了让不行_ E z w E信的代码运转在必定的环境中，然后限制这些代码拜访阻隔区之外的资源。假如由于某种原因，确实需求拜访阻隔区外的资源，那么就必须经过的指定的通道，这些通道会进行严格的安全检查，来判断恳求的合法性。通道会采纳默许回绝的战略，一般选用封装 API 的办法来完成。

1.3 现在多进程架构浏览器

Chrome 团队不o @ R E q 0 J Q d断开展，现在架构有了较i F | S & 0 X新改变，最新 Chrome 架构图如下所示

最新 Chrome 浏览器包含：1个网络进程、1个浏览器进程、1个 GPU 进程、多个烘托进程、多个插件进程。

浏览器进程：首要负责界面显现、用户交互、子进程管d # [理，一起供给存储功用。
烘托进程：中心任务是将 HTML、CSS、Javascript 转换为用户能够与之的网页，排版引擎 Blink 和 Javascript 引擎 V8 都是运转在该进程中。默许状况下，ChromR ; Y h % r ue 为每个 tab 标签页创立一个新的烘托进程。出于安全考虑，烘M L 9 W z u托进程都是运转在沙箱机制下的。
GPU 进程：最早 Chrome 刚发布的时分是没有 GPU 进程的，而 GPU 的运用初衷是完成 css 3= n ] ~ GD 效果。随后网页、Chrov s `me 的 UI 界面都挑选选用 GPZ d &U 来制作，这使得 GPU 成为浏览3 3 ? i k 8器遍及需求。终究 Chrome 多进程架构中也引进N n [ K了 GPU 进程。
网络进程：首要负责页面的网络资源恳求加载。前期是作为一个模块运转在n Q 8 ^ b G Q N浏览器进程里边的，最近才独立出来作为一个独自的进程。
插件进程：首要o ( I + Q负责插件的运转。因插件代码由普通开发者书写，C F ` o P +所以在 QA 方面可能不是那么完善，代码质量参差不齐，插件简略奔溃，所以需求经过插件进程来阻隔，以保证插件进程的H } * ,奔溃不会对浏览器和页面形成影响。

所以，你会发现翻开一个页面，检查进程发现有4个进程。凡事具有两面性，上面说了多进程架T d V , e & Z构带来V G L | c P g W浏览器稳定性、安全性、流* 6 G ~通性，可是也带来一些问题：

更高资源占用：每8 t ^ { g m a ^ B个进程都会包含公共根底结构的副本（如 Javascript 运转环境），这意味着浏览器将会R M $ s 8消耗更多的资源
更杂乱的体系结构：浏览器各模块_ O B之间耦合度高、拓展性差，Y ` z S Y会导致现在的架构很难习惯新需求。

Chrome 团队5 I S一直在寻求新的弹性计划，既能够处理资源占用较高问题吗，也能够处理杂乱的体系架构问题。

1.4 未来面向服务的架M K I l . P构

2016年 Chrome 官方团队运用 “面向服务的架构”（ServicesK ) 4 7 T – Oriented Arg O 6 m * /chitecture，简称 SOA）的思维规划了最新的 Chr6 ? B #ome 架构。Chrome 整体架构会向现代操作体系所选用的“面向服务的架构”方向开展。

之前的各种模块d l { g &会被重构成为独自的服务（Services），每个服务都? | ? Q能够运p k O E q p 3 v转在独立的进程中，拜访服务必须运用界说好的接口，经过 IPC 进行通讯。然后构建一个更内聚、低耦合、易于保护和拓展的体系。

Chrome 终究把a / F 4 b b z x UI、数据库、文件、设备、网络等模块重构为根底服务。下图是 “Chrome 面向服务的架构”的进程模型图

现在 Chrome 正处于老架构向q = @ { t F J U新架构的过度阶段，且比较绵长。

Chrome 供给灵敏的弹性架构，在强壮功用设备上会以多进程的办法运转根底服务，可是在设备资源受限的状况下，ChroE n i dme 会将很多服务整合到一个进程中，然后节省内存占P | 0用。

[图片上传失利…(image-47cd20-1589339943235)]

1.5 小实验

测验环境： MacBook P: ) M T gro（macOS 10.15.3）、Chro6 j { a 4 V h ; cme Version 81.0.4044.138 (Official Build) (64-bit)

操作进程：

翻开 Chrome 浏览器
在地址栏输入 https://github.com/FantasticLBP
点击 Chrome 浏览器右上角 ...，在下拉菜单_ } p J r V 1 I中挑选 More Tools，在/ Y q l o A对应的翻开菜单中点击 TasS 8 d s = rk Manager

实验现象b W % G t Q：

实验定论：

仅仅翻开了 1 个页面，为什么有 4 个进程？由于翻开 1 个页面至少需求 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个烘托进程，共 4 个；假如翻开的页面有运转插件的话，还需求a F ^再加上 1 个g } x 4 A E a插件进程。

然后印证了上述观点。

1.6 特殊状况

现象：咱们在运用 Chrome 的时分仍是会呈现由于单个页面卡死终究溃散导致W i R e一切页面溃散的状况，why？

一般状况下是^ N _ P h一个页面运用一个进程，可是，有? H O _ ] 2一种状况，叫”同一站点(same-site)”，详细地讲，咱们将“同一站点”界 W ) k f ? ) G说为根域名（例如，github.com）加上协议（例如，https:// 或许http://），还包含了该根域名下的一切子域名和不同的端口，比方下面这三个：

developer.github.com
www.github.com
www.github.com:8080
都是归于同一站点，j X 4由于它们的协议都是 https，而根域名也都是 gitk z D bhubp & F 3 a U.com。差异于浏览器同源战略。

Chrome 的默许战略是，每个标签对应一个烘托进程。可是假如从一个页面翻开了新页面，而新页面和当时页面归于同一站点时，那么新页面会复用父页面的烘托进程。官方把这个默许V w { S g ! ? ! 4战略叫 process-per-sites c 3 N 1 - 7 J D-instance。

直白的讲，便是假如几个页面契合同一站点，那么他们将被分配到一个烘托进程里边去。

这种状况下，一个页面溃散了，会导致同一站点的页面一起溃散，由于他们运2 ; % Y = f C B用了同一个烘B ! |托进程。

为什么要让他们跑在一个进程里边呢？

由于在一个烘托进程里边P j / ^ Z $ 2，他们就会共享JS的履行环境，也便是说A页面能够直接在B页面中履行脚本。由所以同一家X S P x G q的站点，所以是有这个需求的

1.7 Chromium 架构

这张图是 chromium 多进程架构图。

多进程架构的浏览器处理了上述问题，至于怎么处理的今后的文l S l ( p e Y 5章会专门解说，不是本文的首要内容。

简略描绘下。

主进程中的 RenderProcessHost 和 render 进程中的 RenderProceb $ 5 0 s 6ss 是E D @ S w D d !用来处理进程= k l J {间通讯的（IPC）。
RendP } 2 m N X A w $er 进程中的 RenderView 内容根据 WebKit 排版展现出来的
Render 进程中的 ResourceDispatcher 是用来处理资源恳求的: & ]。Reni f *der 进程中假如有恳求则创立一个恳求 ID，转发到 IPC，由 Browser 进程中处理后返回
Chromium 是多进程架构，包含一个主进程，多个烘托进程

关于 chromium 多进程架构感兴趣的能够点击这个链接检查更多材料-Multi-process Architecture。

2. Electron 架– ^ 6构

El{ e % z ;ectron 架构和 ChromiumS s V 7 Y 架构相似，也是具有1个主进程P ? + f d & 0 U和多个烘+ c S q c x @ u d托进程。可是$ w A b X , I b 7也有差异

在各J c O i W S ^ .个进行中暴露了 Native API ，供给了 Native 才能。
引进了 Noj ` D F 6de.js，所以能够运用 Node 的才能

技能难点：由于 Electron 内部整合了 Chromium 和 Node.js，3 p h 3 ? r h y主线程在某个时刻只能够履行一个事情循环，可是2者的事情循环机制不一样，Node.js 的事情循环根据~ ( : z ~ { D libuv，# g e 5 4可是 Chromium 根据 message bump。

所以 Electron 原理的重点便是「怎么整合事情循环」。2种思路

Chromium 集成到 Node.js~ 9 ? 中：用 libuv 完成 messagebumT 1 / N $ I s ,p（Node-Webkit 便是这么干的，缺点挺多）
Node.js 集成到 Chromium 中（ElectK ~ Q = Zron 所选用的办法）

后来随着 libuv 引进 backend_fd 的概念，适当所以 libuv 轮询事情的文件描绘符。经过轮训 backend_fd 能够知道 libuv 的新事情。所以 EX O 1 0 6lectron 采纳的做法便是将 Node.js 集成到 Chromium 中。

上图描绘了– & 7 ] Node.js 怎么融入到 Chromium 中。描绘下原理

ElecI w ) ` Qtron 新起一个安全线程去轮训 backend_fd
当检M 1 U 1 7 o j e测到一个新的 backend_fd，也便是一个新的 NodE 8 . ~ Y : f 7 Se.js 事情之后，经过 PostTask 转发到 Chromium 的事情循环中

上述2个进程完成了 Electron 的事情循环。

四、怎么调试

调试分为主进程调试和烘托进程调试。

1. 烘托进程调试

看到 Demo 工程中履行 npm start 之后能够看到主界面，Mac 端快捷键 comand + option + i，唤出调试界面，相似于 chrome 下的 devtools。其实便是无头浏览器的那些东西。或许在代码里翻开调试形式 mainWindow.webConc p ! Q wtents.openV P % Y dDevTools() 。

工程选用 Electron + Vue 技能，下面截图 Vue-devt( o c % ) X i boQ i 8 Y } n ~ d ~ols 很便利检查 Vue 组件层级等 Vue 相关的调试

2. 主进程调` S R ) ` u a I 6试办法

主进程调试有2种办法

办法一：运用 chrome in5 v 7 g : L p 3spectO ; 4 3 功用进行调试

需求在发动的时分给 package.json 中的 scripts 节点下的 start 指令加上调试开关f & } X $ x o [

--inspect=[port]
// electr{ 7 8 Mom --inspect=8001 yourApp

然后翻开浏览器，在地址栏输入 chrome://inspect
点击 configureO . ]，在弹出的面板中填写需求调试的端口信息
从头开启服务 npm start，在 chrome inspect 面板的 Target 节点中挑选需求调试的页面
在面板中能够看到主进程履行的 m6 v } qain.js。能够加断点进行调试

办法二：运用 VS Code 调试 ele7 : z v Lctron 主进程。

在 VS Code 的左边菜单栏，第四个功用模块便是调试，点击调试，r n ` l F B b g弹出g & s + T : G对话框让你增加调试配置文件 launch.json

修正 launch.json 的文件内容。如下

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"r 2 U = n d C zrequest": "1 [ @ t R h launch",
"name": "Debug main process",
"cwd": "${workspaceRo8 l ,o4 0 d M 7 c j = Et}",
"runtimeExecutable": "${workspaceRoot}/nodR } L ; * we_modules/.bin/e4 4 , - Flect! z # E 3 C | H Tron",
"windows": {
"runtimeExecutabl= x K n e @ * ` Ke": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"ar7 ? a 0 5 0 Xgs": ["."],
"outputCapture": "std"
}
]
}

在调试模点击绿色小三角，A x w 7 y { L会运转程序，能够增加断点信息。整体界面如下所示。能够单步调试、能够暂停、鼠标移上去能够看到目标的各种信息。

3. 主进6 G m Z 1程调试之 hot reload

Electron 的烘托进程中a Y &的代码改变了，运用 Command + R 能够刷新，可是修正主进程中的代码则必须从头发动 yarn run dev 。功率低下，所以为了提高开发功率，有必要处理这个问题

Webpack 有一个 api: watch-A E . , vrun，能够针对代码文件检测，有改变则 Restart

五、开发 tips及其优化手法

1. 开发 tips

或许会为网页增加事情代码，可是页面看到的* + h Q @ I内容是E u v 7 Y u a R :烘托进程，所以事情相关的逻辑代码应该写在 html 引进的 render.js 中。
在 render.js 中写 Node 代码的时分需求在 main.js 初始化 BrowserWindow 的时分，在 webPreferences 节点下j I % C $ f 2 (增加 nodeIntegD g $ : W g & tration: true 。不然会报错：renderer.js:9 Uncaught ReferenceError: procZ K U A Wess is not defined。
从 Chro2 ^ ~ rme Extenstion V2 开端，不允许履行任何 inline javascript 代码在 html 中。不支持以内联办法写事情j | } ^ = K x绑定代码。比方 <button onclick=X W s I"handleCPn - | r + 6U">检查</button&w U 1 2 M T S Y tgt;
```
Refused to execute inline event# 1 = o C S D handler because it violates the following Content Security Policy directive:
```
运用 electron 进行开发的时分，能够看成是 NodeJS + chromium + Web 前端开发技能。NodeJS 拥有文件拜访等后端才能，chg G l ; q A 6romium 供给展现功用，以及网络才能（electron 网络才能不是 NodeJS 供给的，而是 ch; t tromiB K j K &um 的 net 模块供给的）。web 前端开发技能计划都能够运用在 electron 中，比方 Vue、React、Bootstrap、sass 等。
在工程化角度看，运用 yarn 比 npm 好一些，由于 yarn 会缓存B E [ : j R N Z现已安装过的依靠，其他项目只需发现存在缓存，则读取本地的包依靠，会愈加快速。
在运用 Vue、React 开发 electron 运用时，能够运用 npm 或 yarn install 包，也能够运用 electron-y 6 b 0 ; I Kvue 脚手架东西。
```
vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm0 0 x c d run dev
```
开发完毕后需求设置运+ S ~ f用程序的图标信息、版别号等，打包需求指定不同的平台。
新开项目创立后会报错.

初始化工程后会报错 ERROR in Template execution failX = a s [ s 0 @ed: Referg . H E h 0 NenceError: process is not defined。处理办法是运用 nvm 将 node 版别将为 10。

继续N ^ I 3 U # g运转仍是报错，如, V $ Y K 1下

┏ Electron --------8 Q X x f y / L 6-----------
[11000:0615/095124.922:ERROR:CONSOLE(7574)] "Extension serveru O d } m ] S v error: Object not found: <top>", source: c# a = p Z 3 & 6 Dhrome-devtooY E jls://devto] w 0 5ols/bu^ q { m sndled/inspector.js (7574)
┗ ----------------------------

处理办法是在 main/index.dev.js 修正代码

- require('electron-de/ g = % B } c z =bug')({ showDevTools: true });
+ // NB: Don't open dev tools with this, it is causing the error
+ require('electron-debug')();

在 In main/index.js in the createWindow() function:

mainWindow.loadURL(winURL);
+C A D P * 2 : ! a  // OH y _ I 7 I _ lpen dev tools initially when in development mode
+  if (process.env.NODE_ENV === "developmeO w R 9nt") {
+    mainWindow.webContents.on("did-frame-finish-load", () =&gA j n t F . O Jt; {
+      mainWindow.webContents.once("devtools-opened"~ ? {, () => {
+        mainWindow.ft Q m Qocus();
+      });
+      mainWim W C j f Z vndow.webContents.openDevTools();
+    });
+  }

Electron 多窗口与单窗口运用差异
知道 Elecp ` N #tron 开发原理，所以大部分时间是在写前端代码b R i P ~ 1 _。所以依据团队技能沉积、挑选对应的前端框架，比方 Vue、React、Angular。
或许开发并不难，难在视觉和 UX。很多写过网页的开发者或许# f 4 U P N w G [以前端的视觉去写 Elect2 : y h / ? | tron App 难免会写出网页版的桌面运用程序，说难听点，便是四不像。所以需求改变主意，这是在开发桌面运用程序。
Electron 和 Web 开发相比，各自有侧重点

2. 优化手法

2.1 功用剖析

由于开发进程中，Electron 体会便是在开发一个前端项目，所以咱们运用 Chrome 的 Performanu ] 4 3 Sce 进行剖析。

剖析某段代码的履行进程，也能够经过下面指令生成剖析文件，然后导入到 Chrome Performance 中剖析:

# 输出 cpu 和 堆? ? 0 V _ Y f +剖析文件
node --cpu-prof --heap-prof -e "require('req^ C F iuest’)”“

2.2 白屏优化

不管是 Native App 仍是 Web 网页，骨架屏都是比较常见的一些技能手法。比方弱网下简书 App 的效果
懒加载。优先加载第一屏（主界面）所需的依靠，其他的依靠延迟加载
代b $ A f ] ?码切割。Webpack 东西支持代码切割，这在前端中是很常见的一种优化手法
Node 模块延迟加载或合并。Node 归于 CMD 规范，模块查找、文件读取都比较耗时，某} ] y 7 j V些 Node 模块依靠模块较多、子模块较深这样首屏会很慢。所以延迟加载或许挑选运用打包东西优化和n p % m K 2 |合并 Nod( C O ge 模块。
打包优化。现代打包东西有十分多优化手法。 Webpack 支持代码压缩、预履行… 裁剪多余的代码, 减少运转时担负。模块合并后还能够减小 IO 。
和 Native App 中的 Hybrid 优化手法机5 c c A 5 Z K p制一样。能够对静态资源进行缓存（公司根底1 X ^ / ` f t款式文件、根底组件等，规划资源更新战略）。运用 Service-Worker 进o ? 2 Z行静态资源阻拦，或/ 3 g许在 Native 端做恳求阻拦，比A 3 = ^ L 0 W方 Mac 端 NSURLProtocol
预加载机制。在登陆界面或许发动动画阶段，初始化主界s X 1 B U F面，然后将主界面设置到不行见状态。等发动或许登陆后再将主界面设置为可见状态
运用 NoU W r pde API 尽量防止同步操作。一般 Node API 都有同步和异步2种 API，比方 fs 文件读取模块
对内存影响较大的功用运用 Native 的才能，比方 Database、ImN 7 1 ! 2 K jage、Network、Animation 等。虽然 Web 都有对应的处理计划，可是原生关于这些功用的操作权限更大、内存操控更灵敏、安全性更高、功用更佳
减小主进程压力。Electron 有1个主进程和多个烘托进程，主进程是一切窗口的父进程，它负责调度各种资源。假如主进程被堵塞，将影响整个运用呼应功用。

六、技能体系建立

其实一个技能本身的难易程度并不是能否在c s Y 自己企业、公司、团队内顺畅运用的仅有标尺，其配套的 CI/CD、APM、埋点体系、发布更新、灰度测验等能否与现有的体系以较小本钱交融才是很大的决议要素。由于某个w Y $ X q技能并不是十分难，要是大多数开发者觉得很难，那它规划上便是失利的。

1. 构建

2. 工程解耦

3. 问题定位

Electron3 n % 9 M G 7 s S 供给的 crash 信息进行包装。

引申材料

electron-vue架构解析-开发环境X a X发动流程剖析
chromium 进程模型

Electron：PC 端多端融合方案

一、 计划选型