【Electron-Vue】构建桌面应用（41）- Electron程序第一次启动时会有短暂的空白页面

使用Electron开发的时候，会发现安装后第一次启动会出现短暂的空白大概是1~3秒不等。起初是以为在创建窗口的时候会去加载html页面，在加上vue组件的渲染，导致在启动的时候会出现几秒的空白页面，然后渲染之后，就能正常显示。之后的下次启动也不会出现这种问题。如果是这样的话，应该是缓存才会出现第二次启动没有空白页面的情况。

在github的electron上看到了一个类似的问题，开发者给出的解释是：

他认为是Chrome的版本升级导致的问题，然后给出了一个变通的方式去解决这个问题。

解决办法就是：创建窗口的时候先将窗口隐藏，即设置show:false。然后在ready-to-show中显示窗口即调用show()函数。

而Electron给出的ready-to-show解释为:

当页面已经渲染完成(但是还没有显示) 并且窗口可以被显示时触发
请注意，使用此事件意味着渲染器会被认为是"可见的"并绘制，即使 show 是false。 如果您使用 paintWhenInitiallyHidden: false，此事件将永远不会被触发。

也就是说：当页面渲染完成后，该事件会被触发。然后调用show()，就可以显示页面了。按照理解如果这个操作，在页面渲染之后触发显示，应该不会出现白屏的问题。尝试了一下发现，依然会存在这个问题：

// 创建窗体
function createWindow() {
  /**
   * Initial window options
   */
  let appIcon
  //创建系统通知区菜单
  if (process.env.NODE_ENV !== 'development') {//生产环境
    appIcon = path.join(__static, './logo.png')
  } else {//研发环境
    appIcon = path.join(__dirname, './logo.png')
  }
  mainWindow = new BrowserWindow({
    height: 360,
    width: 400,
    minHeight: 150,
    maxHeight: 360,
    useContentSize: false,
    resizable: false,
    frame: false,
    webPreferences: { nodeIntegration: true },
    icon: appIcon,
    show: false
  })

  mainWindow.loadURL(winURL)
  
  // 窗口准备好之后，再显示
  mainWindow.once('ready-to-show', (event) => {
     mainWindow.show()
  })
}

如果你开始就将show:true的话，你仔细观察，在第一次启动，窗口出现的时候会出现一个切换的效果，从一种状态(姑且叫做状态吧，很难描述，窗口的最上方有一道有颜色的边框)到另外一个页面的渲染过程。然后将show改为false将窗口隐藏不显示，然后在ready-to-show中显示。依旧会出现短暂的空白，但是没有了那种过渡效果，就会从空白到显示页面。

这种设置在我的代码中，无法避免白屏的问题。可能是跟代码的渲染时间长短有关系，于是想到了用setTimeout去延迟显示。

经测试在2s为最合适的时间，不会出现白屏，意思就是全部渲染完了，然后直接显示渲染之后的界面。

// 窗口准备好之后，再显示
mainWindow.once('ready-to-show', (event) => {
  setTimeout(() => {
    mainWindow.show()
  }, 2000);
})

这样就不会在启动的时候出现白屏的情况了。

提一点：也可能官方该出的解决办法确实有效，可能是因为我的代码渲染时间的问题，导致在改完之后依然会出现白屏的情况。每个人需要根据自己的实际情况去找到解决办法，这里只是提供一种思路。