javascript - 在单独的进程中创建 iframe，这样它就不会阻塞父窗口的主线程

Question

我最近听说了rel="noopener"可以添加到 anchor 标记的属性值，以便新窗口在单独的进程中运行。这让我想知道:是否可以创建一个在单独进程中运行的 iframe，例如，iframe 中的无限循环不会导致父窗口的主线程被阻塞？

这是一些观察主线程卡住的示例代码:

<progress></progress>
<iframe srcdoc="<script>function loop() { i=0; while(i<700000000){i++}; setTimeout(loop, 2000) }; loop();</script>"></iframe>

https://jsbin.com/zabecoviwi/1/edit?html,output

编辑:请注意，您可以通过添加 sandbox 来防止卡住。归因于 iframe，这似乎“强制”浏览器(至少是 Chrome)将 iframe 放在单独的线程中，但在我的情况下我不能这样做。但是，我在一个单独的子域下提供 iframe 的代码，所以我认为由于它是一个单独的来源，Chrome 会将它放在一个单独的进程中，因为如果 iframe 的 src 似乎会这样做是不同的顶级域。

Answer 1

在某些浏览器(包括 Chrome)中，跨域 iframe already run in a separate process .例如，在 Chrome 中运行以下代码段不会阻止您在父 Stack Overflow 窗口中滚动:

while (true) {
}

对于尚未执行此操作的浏览器或相同来源的 iframe，您可以通过在 iframe 中的 Web Worker 中运行昂贵的任务来明确该过程:

const workerFn = () => {
  // something expensive
  while (true) {
  }
};
const workerFnStr = `(${workerFn})();`;
const blob = new Blob([workerFnStr], { type: 'text/javascript' });
const worker = new Worker(window.URL.createObjectURL(blob));

// The worker has been created, and will continuously consume resources,
// but will not block the iframe window or the iframe's parent

body {
  height: 1000px;
}