electron多進程方案解決界面卡頓

本文首發(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) 提供一個同步版本或異步版本站蝠,你更應該使用異步和非阻塞式的變量

盡可能避免使用同步IPCremote 模塊,使用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)容等你來
原文地址

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市孙技,隨后出現(xiàn)的幾起案子产禾,更是在濱河造成了極大的恐慌,老刑警劉巖牵啦,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件亚情,死亡現(xiàn)場離奇詭異,居然都是意外死亡哈雏,警方通過查閱死者的電腦和手機楞件,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來裳瘪,“玉大人土浸,你說我怎么就攤上這事∨砀” “怎么了黄伊?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長派殷。 經(jīng)常有香客問我毅舆,道長西篓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任憋活,我火速辦了婚禮岂津,結果婚禮上,老公的妹妹穿的比我還像新娘悦即。我一直安慰自己吮成,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布辜梳。 她就那樣靜靜地躺著粱甫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪作瞄。 梳的紋絲不亂的頭發(fā)上茶宵,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機與錄音宗挥,去河邊找鬼乌庶。 笑死,一個胖子當著我的面吹牛契耿,可吹牛的內(nèi)容都是我干的瞒大。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼搪桂,長吁一口氣:“原來是場噩夢啊……” “哼透敌!你這毒婦竟也來了?” 一聲冷哼從身側響起踢械,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤酗电,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后内列,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體撵术,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年德绿,在試婚紗的時候發(fā)現(xiàn)自己被綠了荷荤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡移稳,死狀恐怖蕴纳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情个粱,我是刑警寧澤古毛,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響稻薇,放射性物質(zhì)發(fā)生泄漏嫂冻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一塞椎、第九天 我趴在偏房一處隱蔽的房頂上張望桨仿。 院中可真熱鬧,春花似錦案狠、人聲如沸服傍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吹零。三九已至,卻和暖如春拉庵,著一層夾襖步出監(jiān)牢的瞬間灿椅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工钞支, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留茫蛹,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓伸辟,卻偏偏與公主長得像麻惶,于是被迫代替她去往敵國和親馍刮。 傳聞我的和親對象是個殘疾皇子信夫,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容