javascript - Dealing with slow Electron startup - Stack Overflow

admin管理员组

文章数量:1202803

Context

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 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

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

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

Questions

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. 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.

Context

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 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

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

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

Questions

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. 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.

• javascript
• node.js
• performance
• electron
• desktop-application

Share Improve this question Follow edited Jun 15, 2021 at 6:57 aochagavia asked Jun 7, 2021 at 15:25 aochagaviaaochagavia 6,23666 gold badges3737 silver badges5454 bronze badges 3

• what machine are you running on? I can't repro. For me, app ready 80ms, window created 196ms, ready to show 417ms – pushkin Commented Jun 13, 2021 at 18:33
• First of all thanks for the repo, it was easy to set up. I can't reproduce the 2 second load time either. I get: App ready in 36 ms. Window created in 90 ms. Window ready to show in 161 ms – Joshua Commented Jun 14, 2021 at 2:23
• Thanks for trying out the repo! I am running Windows 10 on a ThinkPad T460 with an i5-6200U processor, SSD and 8 GB of memory. I would expect things to run smoothly even though this machine is about five years old. Based on your comments I figured out the slow startup might be related to Windows, so I disabled Windows Defender real-time protection and full startup magically sped up to 500 ms, close to the speed mentioned by @pushkin. It seems that the issue is unrelated to Electron. – aochagavia Commented Jun 15, 2021 at 6:52

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 13

Short answer

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

Long answer

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 ms: app ready
• 150 ms: blank window shown
• 500 ms: HTML loaded and shown

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

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

What if you hid your window until it's ready to show, then show your window, and while your window's hidden show a loading spinner.

First only show your main window until after it's ready:

var mainWindow = new BrowserWindow({
    show: false
});
mainWindow.webContents.once('did-finish-load', function ()
{
    mainWindow.show();
    loadingWindow.close();
});

Meanwhile show a loading spinner:

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

本文标签： javascriptDealing with slow Electron startupStack Overflow