处理缓慢的电子启动

2022-01-10 00:00:00 performance node.js desktop-application electron javascript

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

I have spent some hours playing with Electron and I have observed that it consistently takes more than 2.5 seconds to draw a trivial html file to the screen. The timeline is roughly as follows:

  • 60 毫秒:app ready 事件被触发；我们使用 new BrowserWindow()
    • 创建一个窗口
  • 170 毫秒:屏幕上出现一个空白窗口
  • 2800 毫秒:窗口显示指定的 HTML
  • 60 ms: app ready event is triggered; we create a window using new BrowserWindow()
  • 170 ms: a blank window appears on the screen
  • 2800 ms: the window shows the specified HTML

我已经用我的代码建立了一个 存储库，该代码源自 Electron 的 快速开始 docs.

I have set up a repository with my code, which is derived from Electron's quick start docs.

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

Regarding my machine, I am running Windows 10 on a ThinkPad T460 from 2016 with a SSD and enough memory.

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

Shipping an application that shows a blank window for so long upon startup is a no-go for me. I assume most people developing Electron apps think similarly. Hence my first question: am I doing something wrong? Or is this the expected loading time for a trivial Electron app?

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

Assuming this is normal behavior, what is the common way to deal with this problem? Some ideas come to mind:

  1. 要求 Electron 显示启动画面:除非有特定的内置功能，否则似乎不行，因为启动画面本身只会在 2.5 秒后显示.
  2. 隐藏应用程序的窗口直到它被渲染(使用 ready-to-show 事件)，所以不会显示空白窗口.这并不理想，因为这意味着用户不会得到任何关于应用程序实际加载的反馈.
  3. 创建一个包装应用程序(使用本机代码)，该应用程序显示启动屏幕、启动电子并在显示电子窗口后隐藏自身.一开始就有点违背了使用 Electron 的目的，因为您最终会编写本机代码并意外增加复杂性.
  4. 按照 文档.这看起来不太好.
  1. Asking Electron to show a splash screen: unless there is specific built-in functionality for this, it seems like a no-go, since the splash screen itself would be shown only after 2.5 seconds.
  2. Hide the app's window until it is rendered (using the ready-to-show event), so no blank window is shown. This isn't ideal, since it means that the user doesn't get any feedback whatsoever that the application is actually loading.
  3. Create a wrapper application (using native code) that displays a splash screen, launches electron and hides itself once the electron window is shown. Kind of defeats the purpose of using Electron in the first place, because you end up writing native code and adding accidental complexity.
  4. Setting the background color of the window to something resembling your app, as suggested by the docs. This just doesn't look very well.

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

Given this must be a common problem, I hope standard solutions have been found by the community. I'd be glad if someone can point me in the right direction.

推荐答案

简答

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

Short answer

Windows Defender is causing the slowdown, so this is not an Electron problem.

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

It turns out that Windows Defender real-time protection causes startup to last much longer than needed. After turning real-time protection off, we achieved acceptable performance:

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

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

This means that option 1 of my proposed solutions (showing a splash screen) should work quite well for slow-loading apps.

剩下的唯一事情就是弄清楚如何解决 Windows Defender 问题.为此，我提出了一个新问题.

The only thing left is to figure out how to solve the Windows Defender problem. For that purpose, I have asked a new question.

相关文章