electron loadFile/loadURL 耗时很长问题分析

项目场景：

项目中需要展示个人信息窗口 或打开图片查看器等 需要创建独立窗口的业务

---

问题描述

目前Electron的开发者很多都遇到这个问题，并且Issue中也有很多人提过问题，创建并显示一个BrowserWindow很慢，在一些低配机型上往往需要2秒或者更长的时间，这个问题使得很多需要用子窗口时，都用HTML DOM模拟。然而，Dom模拟的窗口必须在父窗口容器内，是没办法脱离父窗口存在的。所以还得解决BrowserWindow loadURL慢的问题。

let win = new BrowserWindow(...)
      ​
win.loadURL('http://localhost:8080/#/index')

 

---

原因分析：

electron Issue中也收录了该问题 ，但问题至今没有修复

https://github.com/electron/electron/issues/32375https://github.com/electron/electron/issues/32375https://github.com/electron/electron/issues/32882https://github.com/electron/electron/issues/32882

引用其他开发者的分析：BrowserWindow之所以慢，主要是两个问题导致的，第一个就是Electron内部在创建BrowserWindow对象时做了很多初始化工作，如果你要让渲染进程拥有Node的能力的话，那么它还会给你初始化一个Node的环境。第二个是对于一个全新的BrowserWindow对象来说首次加载并渲染HTML页面比较慢；最主要的还是第二个原因。

---

解决方案：

窗口池， 提前创建隐藏窗口并加载页面

窗口池就是一个数组

首先初始化窗口池，创建几个备用窗口（内存占用过大，不要创建太多）

let windowArr = []

for (let i = 0; i < 5; i++) {
    windowArr .push(createWindow ())
 }

const createWindow = () => {
	return new BrowserWindow(...)
}

当需要用到窗口时，从窗口池内取出，并删除该实例，同时补充窗口池

隐藏的窗口可以loadURL空白页面，本人项目中使用了vue，所以在用窗口池时，执行路由跳转即可

创建Electron窗口慢的应对方案：窗口池（一） - 知乎https://zhuanlan.zhihu.com/p/446109389