主進程和渲染進程

在Electron應用中，通過執行package.json中的main欄位所指向的文件，可以開啟electron的主進程（main process）。在主進程中可以通過創建web頁面的方式來展示出圖形用戶界面。而且一個electron應用有且只能有一個主進程。

由於electron使用Chromium來展示web頁面，Chromium多進程架構也會被用到。每一張web頁面都運行在它自己的進程里，該進程稱為渲染進程（renderer process）

對於一般的瀏覽器來說，web網頁是跑在一個沙盒環境下的並且不允許與系統層面的資源進行交互。然而electron通過使用nodejs在頁面上，賦予了用戶與系統底層進行交互的能力。

主進程和渲染進程的區別

主進程通過創建BrowserWindow實例來創建頁面，每一個BrowserWindow實例都會在一個獨立的渲染進程中去渲染頁面。當一個BrowserWindow實例被刪除，它對應的渲染進程也會終止運行

主進程管理著所有的頁面以及頁面對應的渲染進程，每一個渲染進程都是獨立的，而且只關心跑在它上面的web頁面

在web頁面里，調用系統底層的API是不被允許的，這是因為在web頁面上處理底層GUI資源是非常危險的，很容易導致資源泄漏。如果你想要在web頁面上執行GUI操作，相應web頁面的渲染進程必須與主進程進行通信，向主進程發起請求去執行那些操作.在electron中，有幾種主進程與渲染進程通信的方法，比如用ipcRenderer和ipcMain模塊來發送信息，還有RPC風格的遠程通信模塊。

使用electron的API

Electron提供了多個API供開發者在主進程及渲染進程上面的開發。在兩種進程中，你都可以通過require(electron)來引入electron模塊。所有的Electron API都會被分配到一個進程類型。一些API只能用在主進程中，一些API只能用於渲染進程中。還有一些API兩種進程可以通用。electron的API文檔會聲明每一個API可以被用於哪一種進程

Electron中通過BrowserWindow class來實例化創建一個窗口（window），實例化窗口的動作只能在主進程中進行.實際上，如果在渲染進程的代碼里引入BrowserWindow對象，獲得的其實是一個undefined。

由於進程間通信是可能的，所以一個渲染進程可以基於主進程執行一些task。electron提供了一個叫做remote模塊，remote模塊提供了一種簡單的進程間通訊的方式。在Electron中，GUI相關的模塊（比如dialog，menu等）只能在主進程中進行使用，為了在渲染進程中也能使用它們，那就要通過ipc模塊給主進程發送消息。但有了remote模塊，你可以直接使用主進程的對象而不需要發送確切的進程消息，比如在renderer.js中去載入一個遠程頁面

展示效果為下圖：

使用node

不管是在主進程中還是渲染進程中，都可以使用nodejs模塊

  1. node所提供的API都適用於electron，如果你曾嘗試過載入遠程內容的時候，可能會帶來一些安全問題。這部分問題可以看這個electronjs.org/docs/tut
  2. 你可以在應用中使用node模塊，npm也提供了全世界最大的開源倉庫

這裡還有一點需要注意，Native Node模塊需要被編譯之後才能在electron中進行使用。但好在大多數的nodejs模塊代碼不是底層的，如果確實是需要這部分功能，可以參考這個electronjs.org/docs/tut

vscode

我們日常開發使用的編輯器vscode也是通過electron構建的，這是vscode的架構圖

可以看到vscode中也包含主進程，渲染進程，同時因為vscode提供了插件的擴展能力，又出於安全穩定性的考慮，上圖中又多了一個Extension Host，其實這個Extension Host也是一個獨立的進程，用於運行我們的插件代碼。並且同渲染進程一樣，彼此都是獨立互不影響的。Extension Host Process暴露了一些vscode的API供插件開發者去使用。


推薦閱讀：
相关文章