处理缓慢的 Electron 启动

Question

上下文

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

60 毫秒：应用 ready 事件被触发；我们使用 new BrowserWindow()
170 毫秒：屏幕上出现空白 window
2800 毫秒：window 显示指定的 HTML

我已经设置了一个 repository with my code, which is derived from Electron's quick start 文档。

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

问题

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

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

让 Electron 显示启动画面：除非有特定的内置功能，否则这似乎是不行的，因为启动画面本身只会在 2.5 秒后显示。
隐藏应用程序的 window 直到它被渲染（使用 ready-to-show 事件），因此不会显示空白 window。这并不理想，因为这意味着用户不会得到任何应用程序实际加载的反馈。
创建一个包装器应用程序（使用本机代码）显示启动画面，启动电子并在显示电子 window 后隐藏自身。有点违背了使用 Electron 的初衷，因为您最终会编写本机代码并增加意外的复杂性。
按照 docs 的建议，将 window 的背景颜色设置为与您的应用类似的颜色。这看起来不太好。

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

Answer 1

如果您隐藏 window 直到它准备好显示，然后显示您的 window，并且当您的 window 隐藏时显示一个加载旋转器，会怎么样。

首先只显示您的主 window 直到它准备好：

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

Answer 2

简答

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

长答案

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

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

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

唯一剩下的就是想办法解决 Windows Defender 问题。为此，我问了 new question.

处理缓慢的 Electron 启动

Dealing with slow Electron startup

javascript

node.js

performance

electron

desktop-application

上下文

问题

简答

长答案