处理缓慢的电子启动
Posted
技术标签:
【中文标题】处理缓慢的电子启动【英文标题】: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 毫秒。以上是关于处理缓慢的电子启动的主要内容,如果未能解决你的问题,请参考以下文章