Dealing With Slow Electron Startup

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 i

Solution 1:

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.

Solution 2:

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