优化electron客户端卡顿的几种方案

背景

公司需要做一个同步盘的客户端，框架技术选型方面使用了支持跨平台的Electron框架，其中一些核心功能就是文件的上传，和下载，考虑到node操作文件比较方便，起初把文件的下载上传操作放到主进程，在大量文件下载和上传时，造成了界面的卡顿，现在就这个问题进行剖析和优化。

解决卡顿

方案一

首先要确定是什么因素导致的卡顿，在平时，没有上传下载文件时，electron客户端没有出现卡顿的情况，然后对下载的流程进行跟踪，通过打印log日记发现，在执行一个方法后后面的log无法输出，然后界面失去了响应，其代码如下

const  parentExist = (rpath: string) => {const  root = store.get("syncPath") as  string;
let  parent = path.parse(rpath).dir.replaceAll("\\", "/");
let  localFilePath = path.join(root, parent);
let  isFalse = parent !== "/";
const  dirs = [];
try {while (!fs.existsSync(localFilePath) && isFalse) {dirs.push(localFilePath);
parent = path.parse(rpath).dir.replaceAll("\\", "/");
localFilePath = path.join(root, parent);
isFalse = parent !== "/";
}
for (const  dir  of  dirs) {fs.mkdirSync(dir);
}
} catch (error) {console.log(error);
}
};

好家伙，在while 循环里我做了parent = path.parse(rpath).dir.replaceAll(“\“, “/“);，应该是parent = path.parse(parent).dir.replaceAll(“\“, “/“); 不然parent 一直不等于”/“,这样就一直循环出不来了，导致主进程卡顿失去响应。
解决这个问题后发现，卡顿依然存在，还需要继续优化。

方案二

一般来说，造成卡顿的主要原因是主进程被阻塞了，虽然我使用的异步，但是，像之前的while 循环无线递归，虽然放在主进程，但是也会阻塞主进程，而下载上传这样的同步逻辑涉及到很多计算和资源的等待，于是，我对同步逻辑进行了整改，我把同步逻辑放在一个隐藏的渲染进程进行运行，通过ipc再进行交互.

进行了这一轮改造后，发现优化后的效果不太明显。

方案三

经过前几轮的优化，让我对我渲染进程的逻辑有些思考，会不会是我的渲染进程的js代码有问题，于是我重新审视了我的代码，发现在获取状态图标的时候,每个文件都需要调用ipc，通过主进程获取文件的状态，并且，每一个触发同步操作时，都会通知渲染进程进行重新渲染，如果触发频率过高，就会一直触发渲染，而且发现获取状态的回调时长有点长，平均每个1s，

const resust = await ipcRenderer.invoke("getFileStatus",this.getRLPath(filedir)
);

就是这段代码。

于是我就将获取状态的方案重新整改。通过缓存的方式获取，放到主进程的全局变量里，两个渲染进程共同操作这个全局变量

  const statusCache: any = new mapCache();const statusCacheinit = async () => {const meta = new MetaData();const dbFile = await meta.getAll("");statusCache.clear();if (dbFile) {for (const file of dbFile) {if (statusCache.containKey(file.path)) {continue;} else {statusCache.add(file.path,  {path: file.path,status: "success",fileID: file.fileid,sharePerm: file.remotePerm.includes("R"),perm: file.remotePerm,collect: false,isShared: false});}}}
};global.statusCache = statusCache;

并且使用防抖，把刷新的频率降低下来,

 debounce(() => {ipcRenderer.sendTo(this.mainID, "dirChange", filePath, evt);},2000,{ maxWait: 5000 })();

经过这次的方案整改后，整体的感觉没有卡顿，用的比较流畅，当然后续还有优化空间

总结

用electron进行pc客户端的开发坑还是有点多的，特别是优化这一块，electron的优势是js和html，他的缺点也是js和html，本来是想用多线程做这次的优化的，发现js 的Web Worker太难用了，而且不能使用electron模块，这样在web Worker处理的逻辑就不能方便的通知到渲染进程，所以对于卡顿优化这一块，还是得通过其他方式进行优化，最最重要的是防止主进程阻塞。

优化electron客户端卡顿的几种方案相关推荐

c# 多线程界面卡顿_优化electron客户端卡顿的几种方案
背景公司需要做一个同步盘的客户端,框架技术选型方面使用了支持跨平台的Electron框架,其中一些核心功能就是文件的上传,和下载,考虑到node操作文件比较方便,起初把文件的下载上传操作放到主进程, ...
IM开发干货分享：我是如何解决大量离线消息导致客户端卡顿的
1.引言好久没写技术文章了,今天这篇不是原理性文章,而是为大家分享一下由笔者主导开发实施的IM即时通讯聊天系统,针对大量离线消息(包括消息漫游)导致的用户体验问题的升级改造全过程. 文章中,我将从如 ...
Win10最详细优化设置告别卡顿
Win10专业版怎么优化最流畅?Win10目前的用户已经非常多了,这个系统如果你会优化的话,会大大提升系统的运行速度,让你的电脑告别卡顿,流畅运行,以下小编就给大家带来Win10最详细优化设置. Wi ...
Win11的两个实用技巧系列之解决dns异常的三种方法、win10/win11卡顿的三种解决办法
电脑dns异常怎么修复win10? Win10解决dns异常的三种方法电脑dns异常怎么修复win10?最近有很多win10用户遇到dns配置错误的问题,这让用户非常苦恼,下面我们就来看看Win10 ...
iOS解决控制器转场和返场界面卡顿的一种方法
本博介绍了在控制器转场和返场时界面发生卡顿的一种解决方法,主要思想是使用视图快照功能来提供一个静态的伪视图以提高性能. 转场和返场转场是指从控制器A切换到控制器B中,这意味着控制器A被隐藏: 控制器 ...
表格使用格式刷卡顿的一种解决办法
表格使用格式刷卡顿的一种解决办法一.这种方法的适用条件二.解决方法三.小补充一.这种方法的适用条件 1.即便少量的格式刷也会卡顿 2.其他表格无相似情况 1.2两点基本排除与电脑性能.软件无关 ...
APP启动应用优化加速和卡顿
APP启动应用优化加速和卡顿一:应用启动类型 1冷启动应用自启动后,或系统终止应用后的首次启动 2暖启动如:应用退出应用,又重新启动,程序可能已经运行,但需要重新创建acitivity.或者进程 ...
IM即时通讯开发如何解决大量离线消息导致客户端卡顿的
大部分做后端开发的朋友,都在开发接口.客户端或浏览器h5通过HTTP请求到我们后端的Controller接口,后端查数据库等返回JSON给客户端.大家都知道,HTTP协议有短连接.无状态.三次握手四次 ...
android db加载后无法读取任何内容_android性能优化(二)之卡顿优化
相对于其他类型的性能指标,卡顿是能直接让用户产生视觉反馈的现象,比如App反应滞后于用户的操作,在严重的情况下会出现ANR.关乎用户体验的大事,是很容易遭到用户吐槽的.因此,开发人员平时写代码时必须要 ...

优化electron客户端卡顿的几种方案

背景

解决卡顿

总结

优化electron客户端卡顿的几种方案相关推荐

最新文章

热门文章