Google Chrome 应用程序：Web 视图行为

2024-01-10

在研究一个问题时<iframe>在 Chrome 扩展中，<webview>Chrome Apps 引起了我的注意并引起了我的兴趣。

所以我决定做一个我面临的问题的小例子<iframe>看看是否<webview>解决它。根据我对观看 Chrome 开发视频的理解，webview在与您的应用程序不同的进程中运行；它没有与您的应用程序相同的权限。因此，我假设如果运行中的内容以某种方式与“主线程”（应用程序）分开，我猜它们的内容将彼此分开执行，不会阻塞应用程序或另一个应用程序，以防它们中的任何一个可能有一个可能长时间运行的 js 执行。因此我做了以下事情：

背景.js

chrome.app.runtime.onLaunched.addListener(function() {
  // Tell your app what to launch and how.
  chrome.app.window.create('window.html', {
      width: 1800,
      height: 1000
  });
});

清单.json

{
  // Required
  "name": "Hello World!",
  "version": "0.1",
  "manifest_version": 2,

  // Recommended
  "description": "My first packaged app.",
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
  // "default_locale": "en",

  // Pick one (or none) OF browser_action, page_action, theme, app 

  "app": {
    "background": {
      "scripts": [ "background.js" ]
    }
  },

  "minimum_chrome_version": "23",

  "permissions": [ "webview" ]

}

窗口.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
    <webview id="wv1" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.google.com"></webview>
    <webview id="wv2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes.com"></webview>
    <webview id="wv3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow.com"></webview>
    <webview id="wv4" style="width: 450px; height: 300px; border: 2px solid red" src="http://db.tt/FCCA7nuz"></webview>
  </body>
</html>

其中三个 webview 是普通网页，第四个只是长时间运行的 js 文件的示例，您可以检查代码，或者我可以稍后提供。如果我打开 4 个 google chrome 浏览器窗口，输入地址，按 Enter 键，我会观察到：立即加载 3 个页面，而另一个执行较长 js 的页面仍然可以工作。

如果我在网页中执行此操作，用于打开这 4 个网页，因为它们都在同一进程中，如果 1 个页面由于 js 执行而缓慢/阻塞，则所有其他页面都将被阻塞。

现在，通过 Chrome 应用程序，我注意到了一些有趣且奇怪的行为。我注意到以下几点：

如果我只加载前 3 个网页，则加载速度很快并且会“同时”出现；
如果我按原样加载所有网页，我会看到前 3 个页面加载，最后一个页面加载，因为它有很长的 js 执行时间，然后它显示（这将是最佳行为），因为它们是不同的进程，所以它们应该不依赖于某个 webview 是否慢，其他人必须等待；
现在，如果我评论第三个，刷新并执行应用程序，我将看不到网页视图，直到长脚本完成为止。（为什么会发生这种情况？）
上面的点是随机的，要么像我提到的那样发生，要么不发生。
最后，让我们添加另一个<webview id="wv5" style="width: 450px; height: 300px; border: 2px solid red" src="http://developer.chrome.com"></webview>，对我来说会发生的是：前三个被加载，第四个正在执行，完成并显示后我看到第五个渲染。

我的主要问题/疑问是围绕行为，因为它们实际上在单独的进程中运行，为什么它没有与浏览器窗口相同的行为，例如，为什么该 webview 阻止其他人工作/渲染，它是有意的吗按原样工作？我是否应该做一些解决方法来检测一段时间后的网络视图是否未完成以跳过加载并让其他加载，以便我可以返回到慢速视图？

先感谢您。

Webviews run in a different process than your app, but they run in the same process of each other in the same partition. If you don't specify a partition attribute, they will be in the same, default one. If you check the Chrome Task Manager (shift+esc) you will see: enter image description here

（注意进程 ID 列）

如果您使用 tag 属性将每个 webview 设置为不同的分区：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
    <webview id="wv1" partition="p1" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.google.com"></webview>
    <webview id="wv2" partition="p2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes.com"></webview>
    <webview id="wv3" partition="p3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow.com"></webview>
    <webview id="wv4" partition="p4" style="width: 450px; height: 300px; border: 2px solid red" src="http://db.tt/FCCA7nuz"></webview>
  </body>
</html>

您将看到每个 webview 现在都在自己的进程中运行：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)