解決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使應用程序感受更原生。