从架构出发探究Electron运行原理
早期桌面應(yīng)用的開發(fā)主要借助原生 C/C++ API 進(jìn)行，由于需要反復(fù)經(jīng)歷編譯過程，且無法分離界面 UI 與業(yè)務(wù)代碼，開發(fā)調(diào)試極為不便。后期出現(xiàn)的 QT 和 WPF 在一定程度上解決了界面代碼分離和跨平臺的問題，卻依然無法避免較長時(shí)間的編譯過程。近幾年伴隨互聯(lián)網(wǎng)行業(yè)的迅猛發(fā)展，尤其是 NodeJS、Chromium 這類基于 W3C 標(biāo)準(zhǔn)開源應(yīng)用的不斷涌現(xiàn)，原生代碼與 Web 瀏覽器開發(fā)逐步走向融合，Electron 在這種背景下誕生。?
?基于Electron實(shí)現(xiàn)的產(chǎn)品
Electron提供了豐富的本地（操作系統(tǒng)）API，使你能夠使用純JavaScript來創(chuàng)建桌面應(yīng)用程序。與其它各種的Node.js運(yùn)行時(shí)不同的是Electron專注于桌面應(yīng)用程序而不是Web服務(wù)器。
Electron通過集成瀏覽器內(nèi)核，使用Web技術(shù)來實(shí)現(xiàn)不同平臺下的渲染，并結(jié)合了 Chromium 、Node.js 和用于調(diào)用系統(tǒng)本地功能的 API 三大板塊。
總結(jié)起來，Chromium 負(fù)責(zé)頁面 UI 渲染，Node.js 負(fù)責(zé)業(yè)務(wù)邏輯，Native API 則提供原生能力和跨平臺。
上面粗略講解了 Electron 的跨端原理，下面我們來深究一下。
Chromium 架構(gòu)
Chromium 是 Chrome 的開源版，也是一個(gè)瀏覽器，Google Chrome 瀏覽器正是基于它。
Electron底層基于Chromium，Chromium的設(shè)計(jì)理念是基于多進(jìn)程的，每個(gè)Tab都是一個(gè)獨(dú)立的進(jìn)程，稱之為Renderer Process，有多少個(gè)Tab就有多少個(gè)Renderer Process。(圖源: Chromium 官網(wǎng))
另外還有一個(gè)，有且只有一個(gè)的主進(jìn)程，稱之為Main Process（瀏覽器整體的Window），它負(fù)責(zé)其他眾多Renderer Process的創(chuàng)建、分配，還有其他眾多整體上的控制。
因此如果有一個(gè)Tab崩潰的話，不會(huì)影響到其他的Tab，瀏覽器可以繼續(xù)運(yùn)行。
Chromium 的多進(jìn)程模式主要由三部分組成: 瀏覽器端(Browser)、渲染器端(Render)、瀏覽器與渲染器的通信方式(IPC)
1.瀏覽器進(jìn)程
瀏覽器進(jìn)程 Browser 只有一個(gè)，當(dāng) Chrome 打開時(shí)，進(jìn)程啟動(dòng)。瀏覽器為每個(gè)渲染進(jìn)程維護(hù)對應(yīng)的 RenderProcessHost，負(fù)責(zé)瀏覽器與渲染器的交互。RenderViewHost 則是與 RenderView 對象進(jìn)行交互，渲染網(wǎng)頁的內(nèi)容。瀏覽器與渲染器通過 IPC 進(jìn)行通信。
2.渲染進(jìn)程管理
每個(gè)渲染進(jìn)程都有一個(gè)全局 RenderProcess 對象，可以管理其與父瀏覽器進(jìn)程之間的通信，并維護(hù)其全局狀態(tài)。
3.view 管理
每個(gè)渲染器可以維護(hù)多個(gè) RenderView 對象，當(dāng)新開標(biāo)簽頁或彈出窗口后，渲染進(jìn)程就會(huì)創(chuàng)建一個(gè) RenderView，RenderView 對象與它在瀏覽器進(jìn)程中對應(yīng)的 RenderViewHost 和 Webkit 嵌入層通信，渲染出網(wǎng)頁內(nèi)容(這里是我們?nèi)粘Ｖ饕P(guān)注的地方)。
Electron 架構(gòu)解析
Electron 架構(gòu)參考了 Chromium 的多進(jìn)程架構(gòu)模式，即將主進(jìn)程和渲染進(jìn)程隔離，并且在 Chromium 多進(jìn)程架構(gòu)基礎(chǔ)上做一定擴(kuò)展。
將上面復(fù)雜的 Chromium 架構(gòu)簡化：
Chromium 運(yùn)行時(shí)由一個(gè) Browser Process，以及一個(gè)或者多個(gè) Renderer Process 構(gòu)成。Renderer Process 負(fù)責(zé)渲染頁面 Web ，Browser Process 負(fù)責(zé)管理各個(gè) Renderer Process 以及其他功能(菜單欄、收藏夾等)
下面我們看一下 Electron 架構(gòu)有那些變化？
?Electron 架構(gòu)中仍然使用了 Chromium 的 Renderer Process 渲染界面，Renderer Process 可以有多個(gè)，互相獨(dú)立不干擾。由于 Electron 為其集成了 Node 運(yùn)行時(shí)，Renderer Process 還可以調(diào)用 Node API。
相較于 Chromium 架構(gòu)，Electron 對 Browser 進(jìn)程做了很多改動(dòng)，將其更改名 Main Process，每個(gè)應(yīng)用程序只能有一個(gè)主進(jìn)程，主進(jìn)程位于 Node.js 下運(yùn)行，因此其可以調(diào)用系統(tǒng)底層功能，其主要負(fù)責(zé)：渲染進(jìn)程的創(chuàng)建；系統(tǒng)底層功能及原生資源的調(diào)用；應(yīng)用生命周期的控制(包裹啟動(dòng)、推出以及一些事件監(jiān)聽)，可以把它看做頁面和計(jì)算機(jī)溝通的橋梁。
經(jīng)過上面的分析，Electron 多進(jìn)程的系統(tǒng)架構(gòu)可以總結(jié)為下圖：
可以發(fā)現(xiàn)，主進(jìn)程和渲染進(jìn)程都集成了 Native API 和 Node.js，渲染進(jìn)程還集成 Chromium 內(nèi)核，成功實(shí)現(xiàn)跨端開發(fā)。
在Electron中，GUI組件僅在主進(jìn)程可用，在渲染進(jìn)程中不可用。那如果想要在渲染進(jìn)程中使用GUI組件，勢必需要和主進(jìn)程進(jìn)行通信。ipc模塊就是用來實(shí)現(xiàn)主進(jìn)程和渲染進(jìn)程之間的通信。在主進(jìn)程中使用ipcMain模塊進(jìn)行對渲染進(jìn)程的通信進(jìn)行控制和處理。而在渲染進(jìn)程中，則使用ipcRenderer模塊，來向主進(jìn)程發(fā)送消息或者接受主進(jìn)程的回應(yīng)。
Node 與 Chromium
沒有Chromium就沒有V8（Chromium內(nèi)置的高性能JavaScript執(zhí)行引擎），沒有V8就沒有Node.js。Chromium的高性能并不單單是多進(jìn)程架構(gòu)的功勞，V8引擎也居功甚偉，V8引擎以超高性能執(zhí)行JavaScript腳本著稱，Node.js的作者也是因?yàn)檫@一點(diǎn)才決定封裝V8，把JavaScript程序員的戰(zhàn)場引向客戶端和服務(wù)端。
Node 的事件循環(huán)與瀏覽器的事件循環(huán)有明顯不同，Chromium 既然是 Chrome 的實(shí)驗(yàn)版，自然與瀏覽器實(shí)現(xiàn)相同。
Node 的事件循環(huán)基于 libuv 實(shí)現(xiàn)，而 Chromium 基于 message bump 實(shí)現(xiàn)。主線程只能同時(shí)運(yùn)行一個(gè)事件循環(huán)，因此需要將兩個(gè)完全不同的事件循環(huán)整合起來。
有兩種解決方案：
- 使用 libuv 實(shí)現(xiàn) message bump 將 Chromium 集成到 Node.js
- 將 Node.js 集成到 Chromium
Electron 最初的方案是第一種，使用 libuv 實(shí)現(xiàn) message bump，但不同的 OS 系統(tǒng) GUI 事件循環(huán)差異很大，例如 mac 為 NSRunLoop，Linux 為 glib，實(shí)現(xiàn)過程特別復(fù)雜，資源消耗和延遲問題也無法得到有效解決，最終放棄了第一種方案。
Electron 第二次嘗試使用小間隔的定時(shí)器來輪詢 GUI 事件循環(huán)，但此方案 CPU 占用高，并且 GUI 響應(yīng)速度慢。
后來 libuv 引入了 backend_fd 概念，backend_fd 輪詢事件循環(huán)的文件描述符，因此 Electron 通過輪詢 backend_fd 來得到 libuv 的新事件實(shí)現(xiàn) Node.js 與 Chromium 事件循環(huán)的融合(第二種方案)。
下面這張 PPT 完美的描述了上述過程(圖源:Electron: The Event Loop Tightrope - Shelley Vohr | JSHeroes 2019)
如何開發(fā)？
開發(fā)Electron應(yīng)用的方式有很多，下面以React為例做個(gè)簡單的說明：
1. 熱調(diào)試
在React項(xiàng)目目錄下安裝Electron
npm install electron修改package.json文件，增加或?qū)⒁延械膍ain屬性值修改為main.js，在scriptes中添加"electron-start": "electron ."，最終配置文件如下：
{"name": "electron-react","version": "0.1.0","main": "main.js","private": true,"dependencies": {"@testing-library/jest-dom": "^5.16.5","@testing-library/react": "^13.3.0","@testing-library/user-event": "^13.5.0","electron": "^20.0.3","react": "^18.2.0","react-dom": "^18.2.0","react-scripts": "5.0.1","web-vitals": "^2.1.4"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","electron-start": "electron ."},"eslintConfig": {"extends": ["react-app","react-app/jest"]},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]} }打開main.js,將
const { app, BrowserWindow, globalShortcut } = require("electron"); const path = require("path");function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webContents: {openDevTools: true, //不想要控制臺直接把這段刪除}});win.loadFile("index.html"); }app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}}); });app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();} })中的
win.loadFile("index.html");修改為
win.loadURL("http://localhost:3000/")打開兩個(gè)終端，一個(gè)運(yùn)行React
npm start另一個(gè)執(zhí)行
npm run electron-start程序運(yùn)行正常
總結(jié)
以上是生活随笔為你收集整理的从架构出发探究Electron运行原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机还原默认的配置,每次启动电脑，bi
- 下一篇： Hermit（隐士）APT组织2020年