前言

公司需要做一个同步盘的客户端，框架技术选型方面使用了支持跨平台的 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 一直不等于 “/” ，这样就一直循环出不来了，导致主进程卡顿失去响应。

实际应该是parent = path.parse(parent).dir.replaceAll("\", "/");  ，但在解决这个问题后，发现卡顿依然存在，还需要继续优化。​​​​


优化方案二

一般来说，造成卡顿的主要原因是主进程被阻塞了。虽然使用的异步，但是像之前的 while 循环无线递归，即使放在主进程，也会阻塞主进程，而下载上传这样的同步逻辑涉及到很多计算和资源的等待。

因此，对同步逻辑进行了整改，把同步逻辑放在一个隐藏的渲染进程进行运行，通过 ipc 再进行交互。

【electron学习笔记】优化electron客户端卡顿的几种方案_前端

在这一轮的改造后，发现优化的效果还是不太明显，需要进行第三轮调整。


优化方案三

经过前两轮的优化，让我对自己的渲染进程逻辑进行了深入思考，会不会是渲染进程的 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 实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！