Electron 窗口标题需要一些时间才能加载（在加载前显示项目名称）答案

【问题标题】：Electron window title takes a few moments to load (shows project's name before loading)Electron 窗口标题需要一些时间才能加载（在加载前显示项目名称）
【发布时间】：2019-09-19 03:33:06
【问题描述】：

当我使用npm start 运行我的代码时，main_window 的标题需要一些时间才能完全加载。这是一个演示它的 GIF：

这是我的代码：

const electron = require('electron')
const url = require('url')
const path = require('path')

const {app, BrowserWindow, Menu} = electron

let main_window

app.on('ready', function() {
    main_window = new BrowserWindow({})
    main_window.loadURL(url.format({
        pathname: path.join(__dirname, 'main_window.html'),
        protocol: 'file:',
        slashes: true
    }))

    Menu.setApplicationMenu(null)
})

在我在main_window.html 中指定的标题加载之前，它显示了我在package.json 中指定的项目名称。我不认为这两个文件的内容是相关的，但无论如何它们都在这里：

main_window.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>7Watchlist Data Grabber</title>
    </head>
    <body>
        <h1>Another Collection of Web Crawlers</h1>
    </body>
</html>

package.json:

{
  "name": "datagrabber",
  "version": "1.0.0",
  "description": "Another Collection of Web Crawlers",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/amirashabani/DataGrabber.git"
  },
  "author": "Amir A. Shabani",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/amirashabani/DataGrabber/issues"
  },
  "homepage": "https://github.com/amirashabani/DataGrabber#readme",
  "dependencies": {
    "electron": "^5.0.0"
  }
}

这是我必须接受的吗？我不认为这是正常的行为。

Edit1：将sandbox 设置为true 或使用npm start --no-proxy-resolver 运行应用程序（如@Mr. Polywhirl 所建议）似乎没有什么不同：

【问题讨论】：

将sandbox 设置为true?通过nodeJS / Electron renders pages slower than Chrome

标签： javascript performance user-interface npm electron

【解决方案1】：

将webPreferences.sandbox 设置为true 为您的BrowserWindow。

参考：nodeJS / Electron renders pages slower than Chrome

main_window = new BrowserWindow({
  webPreferences: {
    sandbox: true
  }
})

编辑

另一个建议是使用 --no-proxy-resolver 标志运行应用程序。

见：https://github.com/electron/electron/issues/12895

【讨论】：

【解决方案2】：

Polywhirl 先生提到，除了sandbox = true 和--no-proxy-resolver 之外的另一个选项是directly set the title。然后将使用给定的标题，直到页面被渲染并且 Chromium 能够显示 HTML 的 <title> 内容。

main_window = new BrowserWindow ({
    title: "7Watchlist Data Grabber"
});

此解决方案不会阻止您的代码访问 NodeJS API，因为它不会创建沙箱。但是，沙盒方法相当可观，因为它也更安全。

【讨论】：

【解决方案3】：

这是我必须接受的吗？我不认为这是正常行为。

这是正常行为，因为 BrowserWindow 的生命周期与 HTML(DOM) 的生命周期不同。您可以多次将 URL 加载到 BrowserWindow 并执行许多与 HTML 无关的其他任务。

所以我认为期望 BrowserWindow 遵循 HTML 的 DOM 状态是不合理的。但是你可以这样做

使用 'dom-ready' 或 'ready-to-show' 事件避免在 HTML 完全加载之前显示任何内容（包括原始窗口标题）

From docs

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})

【讨论】：

如果您使用的是win.maximize()，那么您必须在win.show()之前添加