处理Electron启动缓慢的问题



上下文

我花了几个小时玩Electron,我观察到在屏幕上绘制一个微不足道的html文件总是需要超过2.5秒。时间线大致如下:

  • 60ms:appready事件被触发;我们使用new BrowserWindow()创建一个窗口
  • 170毫秒:屏幕上出现一个空白窗口
  • 2800毫秒:窗口显示指定的HTML

我已经用我的代码建立了一个存储库,它源自Electron的快速入门文档。

关于我的机器,我从2016年起在ThinkPad T460上运行Windows 10,带有SSD和足够的内存。

问题

对于我来说,发布一个在启动时长时间显示空白窗口的应用程序是不可能的。我想大多数开发Electron应用程序的人都有类似的想法。因此,我的第一个问题是:我做错了什么吗?或者这是一个微不足道的Electron应用程序的预期加载时间?

假设这是正常行为,那么处理这个问题的常见方法是什么?脑海中浮现出一些想法:

  1. 要求Electron显示启动屏幕:除非有特定的内置功能,否则这似乎是不可能的,因为启动屏幕本身只会在2.5秒后显示
  2. 隐藏应用程序的窗口,直到它被渲染(使用ready-to-show事件(,这样就不会显示空白窗口。这并不理想,因为这意味着用户不会得到应用程序实际加载的任何反馈
  3. 创建一个包装应用程序(使用本地代码(,该应用程序显示启动屏幕,启动电子并在显示电子窗口后隐藏自己。从一开始就有点违背了使用Electron的目的,因为你最终会编写本地代码,并增加意外的复杂性
  4. 按照文档的建议,将窗口的背景色设置为类似于您的应用程序的颜色。这看起来不太好

鉴于这一定是一个常见问题,我希望社区已经找到了标准的解决方案。如果有人能给我指明正确的方向,我会很高兴。

简短回答

Windows Defender导致了速度减慢,所以这不是Electron的问题。

答案很长

事实证明,Windows Defender实时保护会导致启动持续时间远远超过所需时间。在关闭实时保护后,我们实现了可接受的性能:

  • 55毫秒:应用程序就绪
  • 150毫秒:显示空白窗口
  • 500毫秒:加载并显示HTML

这意味着我提出的解决方案的选项1(显示启动屏幕(应该可以很好地用于缓慢加载的应用程序。

剩下的唯一事情就是找出如何解决Windows Defender问题。为此,我提出了一个新问题。

如果你隐藏你的窗口直到它准备好显示,然后显示你的窗口,当你的窗口被隐藏时,显示一个加载微调器。

首先只显示你的主窗口,直到它准备好:

var mainWindow = new BrowserWindow({
show: false
});
mainWindow.webContents.once('did-finish-load', function ()
{
mainWindow.show();
loadingWindow.close();
});

同时显示一个加载微调器:

var loadingWindow = new BrowserWindow({
width:          200,
height:         200,
transparent:    (process.platform != 'linux'), // Transparency doesn't work on Linux.
resizable:      false,
frame:          false,
alwaysOnTop:    true,
hasShadow:      false,
title:          "Loading..."
});
loadingWindow.loadURL('file://' + __dirname + '/loadingAnimation.gif');

最新更新