处理缓慢的电子启动

Posted 2023-03-22

【中文标题】处理缓慢的电子启动

【英文标题】：Dealing with slow Electron startup

【发布时间】：2021-08-24 16:53:26

【问题描述】：

上下文

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

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

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

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

问题

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

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

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

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

【问题讨论】：

你在什么机器上运行？我无法复制。对我来说，应用就绪 80 毫秒，窗口创建 196 毫秒，准备显示 417 毫秒

首先感谢您的回购，它很容易设置。我也无法重现 2 秒的加载时间。我得到：应用程序在 36 毫秒内准备就绪。窗口在 90 毫秒内创建。窗口准备在 161 毫秒后显示

感谢您试用 repo！我在配备 i5-6200U 处理器、SSD 和 8 GB 内存的 ThinkPad T460 上运行 Windows 10。即使这台机器已经使用了大约五年，我也希望事情能够顺利运行。根据您的 cmets，我发现启动缓慢可能与 Windows 有关，因此我禁用了 Windows Defender 实时保护，并且完全启动神奇地加快了 500 毫秒，接近@pushkin 提到的速度。看来这个问题与 Electron 无关。

【参考方案1】：

简答

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

长答案

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

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

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

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

【参考方案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');

【讨论】：

不幸的是，这种方法遇到了我已经遇到的同样问题：在屏幕上显示加载 gif 大约需要 2500 毫秒。