Electron 启动白屏优化

启动白屏优化

白屏原因

窗口显示到页面渲染完成的时间差

隐藏窗口

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

mainWindow = new BrowserWindow({
  ...
  // 先隐藏
  show: false
})
mainWindow.on('ready-to-show', function () {
  // 初始化后再显示
  mainWindow.show()
})

初始化骨架图

采用新建view去遮罩内容的显示，等待显示完成加载出来

function createWindow() {
  win = new BrowserWindow({
    // 隐藏窗口
    show: false,
    // 背景透明
    transparent: true,
    // mac标题栏
    titleBarStyle: 'hiddenInset',
    // 隐藏标题栏
    frame: false,
  })
  // 创建View遮罩
  const view = new BrowserView({})
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 1050, height: 700 })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    view.webContents.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/loading.html')
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    view.webContents.loadURL('app://./loading.html')
    win.loadURL('app://./index.html')
  }
  // 显示窗口
  view.webContents.on('dom-ready', () => {
    console.log('dom-ready', new Date())
    win.show()
  })
  // 关闭遮罩
  ipcMain.on('stop-loading-main', () => {
    win.removeBrowserView(view)
  })
}

view.webContents.on('dom-ready' > win.on('ready-to-show' 优先级大只会执行前者