解决Electron启动出现短暂的白屏

使用 electron 构建的应用,在首次打开时，会出现短暂的白屏。这个过程应该是在加载本地的资源

那么如何来优化这个问题呢？

通过查阅官方文档，我们可以现在创建窗口时隐藏，等加载完成后再显示出来

在加载页面时，渲染进程第一次完成绘制时，会发出ready-to-show事件 。 在此事件后显示窗口将没有视觉闪烁

mainWindow = new BrowserWindow({
  ...
  show: false // 先隐藏
})

...

mainWindow.on('ready-to-show', function () {
  mainWindow.show() // 初始化后再显示
})

对于一个复杂的应用，ready-to-show可能显示比较慢，会让应用感觉缓慢。 在这种情况下，建议立刻显示窗口，并使用接近应用程序背景的backgroundColor

const { BrowserWindow } = require('electron')

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

请注意，即使是使用ready-to-show事件的应用程序，仍建议使用设置backgroundColor使应用程序感觉更原生。