electron优化那些事儿

前言

hello，阿隆近期参与了一款electron做的网盘项目，总结了一些electron优化点与大家分享。

窗口管理

BrowserWindow对象是electron提供的窗口对象，在electron创建一个BrowserWindow,到用户在电脑上真实的渲染出来实际上是一个相对耗时的工作。

窗口池

借鉴线程池的概念，窗口也可以类似线程池一样，提前创建几个隐藏的窗口（不要太多，会占用一定的内存），在需要的时候去加载页面再渲染出来，速度会快很多。

window.open

在electron中，使用window.open会打开一个子窗口，通过window.open打开的窗口不会创建新的线程，并且在内存使用上会减少很，可以参考【electron】我是如何将窗口的内存从500M降低到132M的这篇文章。

在实际的开发中，窗口池和window.open是可以搭配起来使用的，打开窗口url同源的情况下尽量采用window.open可以减少内存的开销。

在windows受限于病毒防护功能，打开窗口会慢上不少，这里附上ssue 可以为病毒和威胁防护功能添加排除项来优化

这里可以通过安装完electron应用后添加下面脚本来实现

Add-MpPreference -ExclusionProcess "C:\Users\yeguo\AppData\Roaming\Electron Fiddle\electron -bin\20.0.1\electron.exe"

打包体积

electron-builder打包原理：electron-builder执行构建打包的时候会检查我们指定目录下的package.json 文件，查看其内部是否存在 dependencies 依赖，如果存在，electron-builder 会帮我们打包到安装包中。

去除无用

我们通常会把生产环境中的依赖写到dependencies，把开发环境使用的依赖写到devDependencies，但在根据electron-builder打包原理，会把dependencies所使用的依赖都打包。

举个例子： 用vue框架开发一个页面，通常前端代码先打包成dist产物，代码中会包含vue、vue-router等代码，由于我们会习惯性的把vue、vue-router写到package.json中，这时候electron会把vue、vue-router在打包到安装包中，造成代码冗余。

按需打包

在开发electron应用的时候，许多npm包会提供mac、windows、linux等系统的依赖，在打包的时候可以根据要打包的平台来移除其他平台的依赖来减少体积。

举个例子：

比如我们要打包windows平台的时候可以把linux和mac的无用文件都移除掉。

页面性能优化

说起页面性能优化，web页面的第一反应就是首屏加载，不过在electron应用中，通常会把页面到包进本地，加载是很快的，即使是几M的js文件也是瞬间获取到了，所以更多考虑到是执行代码过程中的优化。

设置partition共享或者隔离缓存

通过设置相同的partition名称，可以共享cookies、缓存以及本地存储

const mainWindow = new BrowserWindow({ webPreferences: { partition: 'myapp' } });

使用Web Workers

当碰到复杂的计算函数时，在主进程或者渲染进程中实现都可能引起页面的卡顿，可以将其放置到worker中

const worker = new Worker('./worker.js')

worker.addEventListener('message', event => {
  console.log(`Received from worker: ${event.data}`)
})

worker.postMessage('Hello from the main thread!')

数据本地存储

如果你的应用程序涉及到网络请求，那么缓存请求结果会减少网络延迟并减少请求次数。考虑将使用的数据存储在本地，并向服务器发送请求来更新数据。

当软件业务复杂度足够高的时候，可以考虑在本地引入数据库

拆分接口

当引入本地数据库后，数据传输耗时极短，可以考虑将部分业务接口拆分成颗粒度更小的接口，接口返回速度可小于30ms，感受客户端级别的丝滑体验。

performance分析js执行瓶颈

通过performance火焰图来排查分析的原因，逐步优化性能瓶颈。 关于performance使用可以参考这篇文章

web性能优化（Lighthouse和performance）：从实际项目入手，如何监测性能问题、如何解决

数据库

数据库选型

常见的有localStore、indexedDb、electron-store、webSQL、sqlite、pouchdb。

桌面端较为复杂的应用sqlite选择居多，不少开发会直接安装sqlite , 而社区新起的better-sqlite3 性能高出了不少。

经阿隆实践，效果可谓相当哇塞，查询100条数据快了一倍。

如果开发的软件场景是离线可操作，在线同步到服务端到编辑类型软件， 这里推荐pouchdb,与之匹配的后端选型为couchdb,可以便捷的实现多端同步的场景。

架构建议

与数据库相关的操作尽量放到一个进程中，避免多进程操作数据库带来不可控的影响。

若有多个进程需要与数据库交互，可采用http或者ipc的方式，推荐ipc好一些，在频繁操作数据库的场景下，http接口受限于浏览器，通常只能并行6个请求。

体验优化

开发桌面端和web端其实是有别的，但大多数开发都是以web视角来实现的，体验上会有瑕疵。

支持离线

使用桌面端和web端最大的意义就在于离线可操作，断网的时候访问出错了，语雀并且给出的提示【页面出错】web感很强，比较遗憾的是页面做了缓存，即使联网在切换回来还是页面出错的状态。

少用loading

apifox 打开loading一般感觉有2s 也是web感很强。

模态化全局设置级别的窗口

桌面端开发窗口模态化是个基础概念，pixcall在修改文件存储位置的时候，是可以操作主窗口的文件，可能会造成一些不可控的问题，尽量模态化全局设置的窗口，当用户完成系统设置后才可操作其他窗口。

这些都是优秀的electron应用，这里只是一些体验感受建议，实际上还是成本考虑优先，多数还是保持跟web一致成本会低一些。

软件安全

electron使用的是web技术开发的，软件安全相关的能力会相对弱一些，常见的加密方式有JS混淆加密和 bytenode， 推荐使用bytenode方式安全性会更好一些。