1. 什么是 Electron？

介紹

Electron官網(wǎng)的簡介的介紹：使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺（Windows、MacOs、Linux）的桌面應(yīng)用。electron?其實(shí)就是一個(gè)可以展示網(wǎng)頁內(nèi)容的殼子，相當(dāng)于一個(gè)獨(dú)立的瀏覽器，可以提供給你一些接口，去調(diào)用系統(tǒng)的資源。

發(fā)展歷程

Electron的前身是?atom?編輯器，是在它的基礎(chǔ)上實(shí)現(xiàn)過來的一套跨平臺解決方案。最初被GitHub開發(fā)，2013年4月11日以Atom Shell為名起步，2014年5月16日開源，2015年4月17日改名為Electron。

組成

Chromium : 為Electron提供了強(qiáng)大的UI能力，可以不考慮兼容性的情況下，利用強(qiáng)大的Web生態(tài)來開發(fā)界面。electron本質(zhì)上就是chromium（chrome開源版本）瀏覽器，最新的東西都會在chromium測試，所以electron可以體驗(yàn)最新的api，這也是好處之一）

應(yīng)用場景

• 一種是給現(xiàn)有項(xiàng)目打包成可執(zhí)行文件，可以直接雙擊打開使用，不需要部署?web?服務(wù)器

• 另一種是想做一個(gè)本地化的工具，能操作系統(tǒng)資源，并且能跨平臺使用

Chromium 多進(jìn)程架構(gòu)圖

主進(jìn)程中的RenderProcessHost和 render 進(jìn)程中的RenderProcess是用來處理進(jìn)程間通信的（IPC（Inter-Process Communication，進(jìn)程間通信）。

Render 進(jìn)程中的 RenderView 內(nèi)容基于 WebKit（瀏覽器引擎） 排版展示出來的

Render 進(jìn)程中的ResourceDispatcher是用來處理資源請求的。Render 進(jìn)程中如果有請求則創(chuàng)建一個(gè)請 求 ID，轉(zhuǎn)發(fā)到 IPC，由 Browser 進(jìn)程中處理后返回

Node.js ：讓Electron有了底層的操作能力，比如文件的讀寫，甚至是集成C++等等操作，并可以使用大量開源的npm包來完成開發(fā)需求。

Native API ： Native API讓Electron有了跨平臺和桌面端的原生能力，比如說它有統(tǒng)一的原生界面，窗口、托盤、消息通知這些。

通過三者的巧妙組合，我們開發(fā)應(yīng)用變得十分高效。

1. Electron 架構(gòu)

Electron 架構(gòu)具有1個(gè)主進(jìn)程和多個(gè)渲染進(jìn)程。

示意圖

Electron 進(jìn)程

主進(jìn)程

Electron 運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱為主進(jìn)程

主進(jìn)程特點(diǎn)：

1.主進(jìn)程連接著操作系統(tǒng)和渲染進(jìn)程，可以把她看作頁面和計(jì)算機(jī)溝通的橋梁。

2.進(jìn)程間通信、窗口管理

3.全局通用服務(wù)。

4.一些只能或適合在主進(jìn)程做的事情。例如瀏覽器下載、全局快捷鍵處理、托盤、session。

5.維護(hù)一些必要的全局狀態(tài)

渲染進(jìn)程

渲染進(jìn)程就是我們所熟悉前端環(huán)境了。只是載體改變了，從瀏覽器變成了window.

注：出于安全考慮，渲染進(jìn)程是不能直接訪問本地資源的），因此都需要在主進(jìn)程完成。

渲染進(jìn)程特點(diǎn)

• Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到。

• 每個(gè)web頁面運(yùn)行在它自己的渲染進(jìn)程中。每個(gè)渲染進(jìn)程都是相互獨(dú)立的，并且只關(guān)心他們自己的網(wǎng)頁。

• 使用BrowserWindow類開啟一個(gè)渲染進(jìn)程并將這個(gè)實(shí)例運(yùn)行在該進(jìn)程中，當(dāng)一個(gè)BrowserWindow實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。

• 渲染進(jìn)程中不能調(diào)用原生資源，但是渲染進(jìn)程中同樣包含Node.js環(huán)境，所以可以引入Node.js（下文會提到：nodeIntegration ）

主進(jìn)程與渲染進(jìn)程的區(qū)別

主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建網(wǎng)頁。

每個(gè) BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行著一個(gè)網(wǎng)頁。當(dāng)一個(gè) BrowserWindow 實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。

主進(jìn)程管理所有頁面和與之對應(yīng)的渲染進(jìn)程。

由于在網(wǎng)頁里管理原生 GUI 資源是非常危險(xiǎn)而且容易造成資源泄露，所以在網(wǎng)頁面調(diào)用 GUI 相關(guān)的 APIs 是不被允許的。如果你想在網(wǎng)頁里使用 GUI 操作，其對應(yīng)的渲染進(jìn)程必須與主進(jìn)程進(jìn)行通訊，請求主進(jìn)程進(jìn)行相關(guān)的 GUI 操作。

Chrome（或其他瀏覽器）的每個(gè)標(biāo)簽頁（tab）及其頁面，就好比 Electron 中的一個(gè)單獨(dú)渲染進(jìn)程。即使關(guān)閉所有標(biāo)簽頁，Chrome 依然存在。這好比 Electron 的主進(jìn)程，能打開新的窗口或關(guān)閉這個(gè)應(yīng)用。

1. Electron 優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)

上手簡單

HTML、CSS、JS、Node 。npm包、UI框架 ，方便高效，能很輕松的實(shí)現(xiàn)很好看的UI

多端運(yùn)行

快速構(gòu)建“跨平臺”（Windows、MacOs、Linux）的桌面級應(yīng)用

開發(fā)時(shí)間短

相對其他跨平臺方案（如 QT GTK+ 等），更穩(wěn)定，bug少，開發(fā)簡單。

不用考慮多瀏覽器的兼容，只針對谷歌 但要兼容mac、Linux

• 缺點(diǎn)

1. 安裝包體積略大（打包了Chromium） 至少包含了一個(gè)瀏覽器的體積 ，每裝一個(gè) app 就相當(dāng)于裝一個(gè) chrome，

2. 性能低下，不如原生應(yīng)用，啟動慢。新開一個(gè)進(jìn)程，起步價(jià)就是一個(gè)nodejs的內(nèi)存開銷

loadURL加載遠(yuǎn)程頁面白屏事件長，優(yōu)化可采用 vscode 骨架屏

基于Electron開發(fā)的應(yīng)用

Postman、uTools、Typora、Atom、Brave瀏覽器，最大名鼎鼎的就是vscode。