Electron:PC 端多端融合方案


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

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

一、 计划选型

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

Electron:PC 端多端融合方案
Electron:PC 端多端融合方案
Electron: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 工程,工程目录如下所示

Electron:PC 端多端融合方案

在终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 _通等问题。

Electron:PC 端多端融合方案

早在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 前期多进程架构浏览器

Electron:PC 端多端融合方案

上图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 架构图如下所示

Electron:PC 端多端融合方案

最新 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 面向服务的架构”的进程模型图

Electron:PC 端多端融合方案

现在 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)

操作进程:

  1. 翻开 Chrome 浏览器
  2. 在地址栏输入 https://github.com/FantasticLBP
  3. 点击 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

Electron:PC 端多端融合方案

实验定论:

仅仅翻开了 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 架构

Electron:PC 端多端融合方案

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

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

简略描绘下。

  • 主进程中的 RenderProcessHost 和 render 进程中的 RenderProceb $ 5 0 s 6ssE 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

Electron:PC 端多端融合方案

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 中。

Electron:PC 端多端融合方案

上图描绘了– & 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 相关的调试

Electron:PC 端多端融合方案

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 . ],在弹出的面板中填写需求调试的端口信息
    Electron:PC 端多端融合方案
  • 从头开启服务 npm start,在 chrome inspect 面板的 Target 节点中挑选需求调试的页面
  • 在面板中能够看到主进程履行的 m6 v } qain.js。能够加断点进行调试
    Electron:PC 端多端融合方案

办法二:运用 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会运转程序,能够增加断点信息。整体界面如下所示。能够单步调试、能够暂停、鼠标移上去能够看到目标的各种信息。

    Electron:PC 端多端融合方案

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

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

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

Electron:PC 端多端融合方案

五、 开发 tips及其优化手法

1. 开发 tips

  1. 或许会为网页增加事情代码,可是页面看到的* + h Q @ I内容是E u v 7 Y u a R :烘托进程,所以事情相关的逻辑代码应该写在 html 引进的 render.js 中。

  2. 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。

  3. 从 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:
    
  4. 运用 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 等。

  5. 在工程化角度看,运用 yarn 比 npm 好一些,由于 yarn 会缓存B E [ : j R N Z现已安装过的依靠,其他项目只需发现存在缓存,则读取本地的包依靠,会愈加快速。

  6. 在运用 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
    
  7. 开发完毕后需求设置运+ S ~ f用程序的图标信息、版别号等,打包需求指定不同的平台。

  8. 新开项目创立后会报错.

初始化工程后会报错 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();
+    });
+  }
  1. Electron 多窗口与单窗口运用差异

    Electron:PC 端多端融合方案
  2. 知道 Elecp ` N #tron 开发原理,所以大部分时间是在写前端代码b R i P ~ 1 _。所以依据团队技能沉积、挑选对应的前端框架,比方 Vue、React、Angular。

  3. 或许开发并不难,难在视觉和 UX。很多写过网页的开发者或许# f 4 U P N w G [以前端的视觉去写 Elect2 : y h / ? | tron App 难免会写出网页版的桌面运用程序,说难听点,便是四不像 。所以需求改变主意,这是在开发桌面运用程序。

  4. Electron 和 Web 开发相比,各自有侧重点

    Electron:PC 端多端融合方案

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. 构建

Electron:PC 端多端融合方案

2. 工程解耦

Electron:PC 端多端融合方案

3. 问题定位

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

Electron:PC 端多端融合方案

引申材料

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

发表评论

提供最优质的资源集合

立即查看 了解详情