优化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处理的逻辑就不能方便的通知到渲染进程，所以对于卡顿优化这一块，还是得通过其他方式进行优化，最最重要的是防止主进程阻塞。
