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