处理Electron启动缓慢问题

Question

背景

我花了几个小时来尝试使用Electron，并观察到将一个简单的html文件绘制到屏幕上需要超过2.5秒的时间。 时间线大致如下：

• 60毫秒：应用程序触发ready事件；我们使用new BrowserWindow()创建一个窗口
• 170毫秒：一个空白的窗口出现在屏幕上
• 2800毫秒：窗口显示指定的HTML

我已经设置了一个存储库，其中包含我的代码，它是从Electron的快速入门文档中派生的。

关于我的电脑，我正在运行Windows 10，使用2016年的ThinkPad T460，配备SSD和足够的内存。

问题

启动时显示空白窗口的应用程序对我来说是不可接受的。 我认为大多数开发Electron应用程序的人都持类似的看法。 因此，我的第一个问题是：我做错了什么吗？ 或者这是一个普通的Electron应用程序的预期加载时间？

假设这是正常行为，解决此问题的通常方法是什么？ 有一些想法：

1. 请求Electron显示启动画面：除非有特定的内置功能可用，否则似乎不可行，因为启动画面本身也只会在2.5秒后显示。
2. 在应用程序窗口渲染完成之前（使用ready-to-show事件），隐藏应用程序窗口，以避免显示空白窗口。这种方式并不理想，因为这意味着用户无法得到任何反馈来表明应用程序正在加载。
3. 创建一个包装应用程序（使用本地代码）来显示启动画面，启动Electron并在Electron 窗口显示后隐藏该包装应用程序。这有点违背了使用 Electron 的初衷，因为您最终需要编写本地代码并增加不必要的复杂性。
4. 根据文档建议，将窗口的背景色设置为类似于应用程序的颜色。但这看上去并不太好。

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

- aochagavia

---

你在哪台机器上运行？我无法重现。对我来说，应用程序准备就绪需要80毫秒，窗口创建需要196毫秒，准备显示需要417毫秒。 - pushkin

首先感谢您的仓库，它很容易设置。我也无法复制2秒钟的加载时间。我得到：应用程序在36毫秒内准备就绪。窗口创建于90毫秒。窗口准备好在161毫秒内显示。 - Joshua

感谢尝试使用该代码库！我正在一台配备i5-6200U处理器、SSD和8GB内存的ThinkPad T460上运行Windows 10。尽管这台机器已经有五年了，但我仍然期望事情能够顺利运行。根据您的评论，我发现启动缓慢可能与Windows有关，因此我禁用了Windows Defender实时保护和完整启动，神奇地加快了到500毫秒的启动速度，接近@pushkin提到的速度。看来问题与Electron无关。 - aochagavia

Answer 1

简短回答

Windows Defender导致了减速，因此这不是Electron的问题。

详细回答

事实证明，Windows Defender实时保护导致启动时间比必要的时间长得多。关闭实时保护后，我们实现了可接受的性能：

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

这意味着我提出的解决方案1（显示启动画面）应该非常适用于加载缓慢的应用程序。

唯一剩下的问题是如何解决Windows Defender问题。为此，我提出了一个新问题。

- aochagavia

Answer 2

如果您将窗口隐藏直到准备好显示它，然后再显示您的窗口，在窗口隐藏时显示加载指示器，会怎样呢？

首先只在准备好后显示主窗口：

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');

- Joshua

---

很遗憾，这种方法存在与我已经拥有的相同问题：在屏幕上显示加载动画需要大约2500毫秒的时间。 - aochagavia

看起来像是一种姑息治疗。 - undefined