本文首发于公众号【一个老码农】
因公司业务需要，最近参与了一个公司的桌面应用。技术栈为electron+react，界面部分主要用的是antd。
在开发过程中遇到一个问题：有一个非常耗时的任务，当任务开启时，会导致整个应用界面卡死，只能等待任务执行结束才能进行界面操作。今天就来讲一下在electron中密集型任务的处理方法。
卡顿原因
由于electron应用使用的是js作为开发语言，而js是单线程的，所以electron也是没有多线程的，但是它却允许有多进程。在electron中分为主进程和渲染进程，主进程在main文件中进行控制，同时这个文件还负责控制应用的生命周期。（注：main文件在package.json配置文件中的main字段中进行配置）而每一个窗口则是一个渲染进程即我们所说的UI进程。经过研究发现，应用界面卡死是由于任务比较耗资源，进而造成当前渲染进程卡死。
怎样避免UI卡顿
关于electron应用的性能优化，electron的官方文档给出了以下几点建议：
每当Node.js的核心模块 (如fs) 提供一个同步版本或异步版本，你更应该使用异步和非阻塞式的变量
尽可能避免使用同步IPC 和 remote 模块，使用remote模块的时候非常容易不知情地阻塞 UI线程
对于需要长期占用CPU的繁重任务，可以将它们移动到 BrowserWindow, 生成一个专用进程。（也就是新建一个窗口）
具体解决方案
基于官方文档，我采用了使用新建一个隐藏的BrowserWindow的方式，把耗时任务放入新的窗口中。由于每一个BrowserWindow都是一个单独的渲染进程，所以此方法可以避免界面卡顿。而任务处理进度，隐藏的渲染进程（后用"任务进程"代替）可以通过IPC通信的方式告诉主进程，主进程再通知当前渲染进程。
为了方便起见也可以在当前渲染进程中用remote.ipcMain.on()来与任务进程通信。
核心代码如下：
在当前渲染进程中监听，由于渲染进程与渲染进程之间不能通信，所以可以用remote.ipcMain的方式拿到主进程对象进行监听
//当前渲染进程
import { remote } from 'electron'
import React, { useState, useEffect, useRef } from 'react'
const win = useRef()
useEffect(() => {
return () => {
closeArchiveRenderer()
}
}, [])
//开始任务
function begain() {
listenIpcRenderer()
createNewWindow()
}
//创建隐藏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通信监听
function listenIpcRenderer() {
remote.ipcMain.on('window-load-success', (event, arg) => {
console.log(arg)
if (arg) {
event.reply('begain-task', {
//tag标记任务类型
tag: 'xxx',
//传给任务进程的数据
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) {
//状态处理
}
})
remote.ipcMain.on('task-complete', (event, arg) => {
//任务完成
//关闭进程，移除监听，可根据需要放在合适的地方
closeArchiveRenderer()
})
}
//要在合适的时机把进程关闭，并移除监听
function closeArchiveRenderer() {
if (win.current) {
win.current.close()
win.current = null
}
remote.ipcMain.removeAllListeners()
}
任务专用进程中需要这样处理
// 任务进程，当前窗口处理隐藏状态
import { ipcRenderer } from 'electron'
useEffect(() => {
ipcRenderer.on('begain-task', (event, arg) => {
// 根据tag判断任务类型
if (arg.tag === 'xxxx') {
console.log(arg.dataSource)
//任务处理TODO
xxxx()
//以下代码可根据需要放在合适的位置
//如果处理状态有变化则发送变化通知
ipcRenderer.send('change-task-status', data)
//如果任务处理完成，则发送完成通知
ipcRenderer.send('task-complete', data)
}
})
ipcRenderer.send('window-load-success', true)
return () => {
ipcRenderer.removeAllListeners()
}
}, [])
关注公众号【一个老码农】，更多优质技术内容等你来
原文地址
