处理缓慢的电子启动

Question

上下文

我花了几个小时玩 Electron，我观察到在屏幕上绘制一个简单的 html 文件始终需要超过 2.5 秒。时间线大致如下：

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

我已经使用我的代码设置了一个repository，该代码源自 Electron 的 quick start 文档。

关于我的机器，我在 2016 年的 ThinkPad T460 上运行 Windows 10，配备 SSD 和足够的内存。

问题

发送一个在启动时显示一个空白窗口的应用程序对我来说是不行的。我假设大多数开发 Electron 应用程序的人都有类似的想法。因此我的第一个问题是：我做错了什么吗？或者这是一个普通 Electron 应用程序的预期加载时间？

假设这是正常行为，处理此问题的常用方法是什么？想到了一些想法：

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

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

Answer 1

简答

Windows Defender 导致速度变慢，因此这不是 Electron 问题。

长答案

事实证明，Windows Defender 实时保护导致启动持续时间比所需时间长得多。关闭实时保护后，我们获得了可以接受的性能：

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

这意味着我提出的解决方案中的选项 1（显示启动屏幕）对于加载缓慢的应用应该非常有效。

剩下的唯一事情就是弄清楚如何解决 Windows Defender 问题。为此，我询问了new question。

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