Electron 主進程和渲染進程

本節咱們來學習什麼是主進程和渲染進程，主進程與渲染進程之間有什麼區別，主進程和渲染進程之間的通訊。下面咱們先來看一下進程的概念。

進程（Process）是計算機中的程序關於某數據集合上的一次運行活動，是系統進行資源分配和調度的基本單位，是操做系統結構的基礎。

什麼是主進程

在 Electron 中，啓動項目時運行的 main.js 腳本就是咱們說的主進程。在主進程運行的腳本能夠以建立 web 頁面的形式展現 GUI。

一個 Electron 應用有且只有一個主進程。而且建立窗口等全部系統事件都要在主進程中進行。

什麼是渲染進程

因爲 Electron 使用 Chromium 來展現頁面，因此 Chromium 的多進程結構也被充分利用。每一個 Electron 的頁面都在運行着本身的進程，這樣的進程咱們稱之爲渲染進程。

也就是說每建立一個 web 頁面都會建立一個渲染進程。每一個 web 頁面都運行在它本身的渲染進程中。每一個渲染進程是獨立的，它只關心它所運行的頁面。

主進程與渲染進程的區別

主進程使用 BrowserWindow 實例建立網頁。每一個 BrowserWindow 實例都在本身的渲染進程中運行。當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。

主進程管理全部頁面和與之對應的渲染進程。每一個渲染進程都是相互獨立的，而且只關心他們本身的網頁。

使用Electron的API

Electron 在主進程和渲染進程中提供了大量 API 去幫助開發桌面應用程序， 在主進程和渲染進程中，能夠經過require() 方法將其包含在模塊中，以此獲取 Electron 的 API。

引入 electron：

const electron = require('electron');

全部 Electron 的 API 都被指派給一種進程類型。許多 API 只能被用於主進程或渲染進程中，但其中一些 API 能夠同時在上述兩種進程中使用。 每個 API 的文檔都將聲明咱們能夠在哪一種進程中使用該 API 。

Electron 中的窗口是使用 BrowserWindow 類型建立的一個實例， 它只能在主進程中使用，以下所示：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

主進程和渲染進程之間通訊

Electron 的主進程是在後臺運行，對應 main.js 文件。而渲染進程是前端看到的，對應 index.html 文件。這個兩個進程之間的通訊首選 ipc 方式，由於它會在完成時返回，而不會阻止同一進程中的其餘操做。

異步通訊

異步通訊，在發送消息以後，不會阻止同一進程中程序的繼續運行。下列示例渲染進程發送異步消息 ping 到主進程，而後主進程回答 pong。

示例：

渲染器進程：

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `異步消息回覆: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

主進程：

const ipc = require('electron').ipcMain

ipc.on('asynchronous-message', function (event, arg) {
  event.sender.send('asynchronous-reply', 'pong')
})

同步消息

除了以異步方式在進程之間發送消息，咱們還可使用 ipc 模塊在進程之間發送同步消息，可是此方法的同步特性意味着它在完成任務時會阻止其餘操做。

示例：

渲染器進程：

const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `同步消息回覆: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

主進程：

const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

連接：https://www.9xkd.com/