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

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

在開(kāi)發(fā)過(guò)程中遇到一個(gè)問(wèn)題：有一個(gè)非常耗時(shí)的任務(wù)，當(dāng)任務(wù)開(kāi)啟時(shí)，會(huì)導(dǎo)致整個(gè)應(yīng)用界面卡死，只能等待任務(wù)執(zhí)行結(jié)束才能進(jìn)行界面操作。今天就來(lái)講一下在electron中密集型任務(wù)的處理方法。

卡頓原因

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

怎樣避免UI卡頓

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

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

對(duì)于需要長(zhǎng)期占用CPU的繁重任務(wù)，可以將它們移動(dòng)到 BrowserWindow, 生成一個(gè)專用進(jìn)程。（也就是新建一個(gè)窗口）

具體解決方案

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

核心代碼如下：

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

//當(dāng)前渲染進(jìn)程
import { remote } from 'electron'
import React, { useState, useEffect, useRef } from 'react'


const win = useRef()

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

//開(kāi)始任務(wù)
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)聽(tīng)
function listenIpcRenderer() {
    remote.ipcMain.on('window-load-success', (event, arg) => {
      console.log(arg)
      if (arg) {
        event.reply('begain-task', {
            //tag標(biāo)記任務(wù)類型
          tag: 'xxx', 
          //傳給任務(wù)進(jìn)程的數(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) => {
    //任務(wù)完成
    //關(guān)閉進(jìn)程，移除監(jiān)聽(tīng)，可根據(jù)需要放在合適的地方
    closeArchiveRenderer()
    })
}


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

任務(wù)專用進(jìn)程中需要這樣處理

// 任務(wù)進(jìn)程，當(dāng)前窗口處理隱藏狀態(tài)
import { ipcRenderer } from 'electron'

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

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

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

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