本文首發(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)容等你來
原文地址
