本文首發(fā)于公眾號【一個老碼農(nóng)】

因公司業(yè)務需要，最近參與了一個公司的桌面應用。技術棧為electron+react，界面部分主要用的是antd。

在開發(fā)過程中遇到一個問題：有一個非常耗時的任務，當任務開啟時，會導致整個應用界面卡死，只能等待任務執(zhí)行結束才能進行界面操作。今天就來講一下在electron中密集型任務的處理方法。

卡頓原因

由于electron應用使用的是js作為開發(fā)語言，而js是單線程的，所以electron也是沒有多線程的，但是它卻允許有多進程。在electron中分為主進程和渲染進程，主進程在main文件中進行控制，同時這個文件還負責控制應用的生命周期。（注：main文件在package.json配置文件中的main字段中進行配置）而每一個窗口則是一個渲染進程即我們所說的UI進程。經(jīng)過研究發(fā)現(xiàn)，應用界面卡死是由于任務比較耗資源，進而造成當前渲染進程卡死。

怎樣避免UI卡頓

關于electron應用的性能優(yōu)化，electron的官方文檔給出了以下幾點建議：
每當Node.js的核心模塊 (如fs) 提供一個同步版本或異步版本，你更應該使用異步和非阻塞式的變量

盡可能避免使用同步IPC 和 remote 模塊，使用remote模塊的時候非常容易不知情地阻塞 UI線程

對于需要長期占用CPU的繁重任務，可以將它們移動到 BrowserWindow, 生成一個專用進程。（也就是新建一個窗口）

具體解決方案

基于官方文檔，我采用了使用新建一個隱藏的BrowserWindow的方式，把耗時任務放入新的窗口中。由于每一個BrowserWindow都是一個單獨的渲染進程，所以此方法可以避免界面卡頓。而任務處理進度，隱藏的渲染進程（后用"任務進程"代替）可以通過IPC通信的方式告訴主進程，主進程再通知當前渲染進程。
為了方便起見也可以在當前渲染進程中用remote.ipcMain.on()來與任務進程通信。

核心代碼如下：

在當前渲染進程中監(jiān)聽，由于渲染進程與渲染進程之間不能通信，所以可以用remote.ipcMain的方式拿到主進程對象進行監(jiān)聽

//當前渲染進程
import { remote } from 'electron'
import React, { useState, useEffect, useRef } from 'react'


const win = useRef()

useEffect(() => {
    return () => {
      closeArchiveRenderer()
    }
  }, [])

//開始任務
function begain() {
    listenIpcRenderer()
    createNewWindow()
}

//創(chuàng)建隱藏window
function createNewWindow() {
    let win.current = new remote.BrowserWindow({
      width: 500,
      height: 500,
      show: false,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
      },
    })
    win.current.loadURL('xxxxxx')
}

//ipc通信監(jiān)聽
function listenIpcRenderer() {
    remote.ipcMain.on('window-load-success', (event, arg) => {
      console.log(arg)
      if (arg) {
        event.reply('begain-task', {
            //tag標記任務類型
          tag: 'xxx', 
          //傳給任務進程的數(shù)據(jù)
          dataSource: dataSource
        })
      }
    })

remote.ipcMain.on('change-task-status', (event, arg) => {
      console.log(arg)
      if (arg.error) {
        console.log(arg.error)
        return
      }
      if (arg.status === 2) {
        //狀態(tài)處理
      }
    })

remote.ipcMain.on('task-complete', (event, arg) => {
    //任務完成
    //關閉進程，移除監(jiān)聽，可根據(jù)需要放在合適的地方
    closeArchiveRenderer()
    })
}


//要在合適的時機把進程關閉，并移除監(jiān)聽
function closeArchiveRenderer() {
    if (win.current) {
      win.current.close()
      win.current = null
    }
    remote.ipcMain.removeAllListeners()
  }

任務專用進程中需要這樣處理

// 任務進程，當前窗口處理隱藏狀態(tài)
import { ipcRenderer } from 'electron'

useEffect(() => {
    ipcRenderer.on('begain-task', (event, arg) => {
      // 根據(jù)tag判斷任務類型
      if (arg.tag === 'xxxx') {
        console.log(arg.dataSource)
        //任務處理TODO
        xxxx()
        //以下代碼可根據(jù)需要放在合適的位置
        //如果處理狀態(tài)有變化則發(fā)送變化通知
        ipcRenderer.send('change-task-status', data)

        //如果任務處理完成，則發(fā)送完成通知
        ipcRenderer.send('task-complete', data)
      }
    })

    ipcRenderer.send('window-load-success', true)
    return () => {
      ipcRenderer.removeAllListeners()
    }
  }, [])

關注公眾號【一個老碼農(nóng)】，更多優(yōu)質(zhì)技術內(nèi)容等你來
原文地址