Creating An Iframe In Separate Process So It Doesn't Block The Main Thread Of The Parent Window

I recently heard about the rel='noopener' attribute value that can be added to anchor tags so that the new window runs in a separate process. That got me wondering: Is it possible

Solution 1:

In some browsers, including Chrome, cross-origin iframes already run in a separate process. For example, running the following snippet in Chrome will not prevent you from scrolling in the parent Stack Overflow window:

while (true) {
}

For browsers which don't do this already, or for same origin iframes, you can make the process explicit by running the expensive tasks in a web worker in the iframe:

constworkerFn = () => {
  // something expensivewhile (true) {
  }
};
const workerFnStr = `(${workerFn})();`;
const blob = newBlob([workerFnStr], { type: 'text/javascript' });
const worker = newWorker(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;
}

Solution 2:

As of early 2021, there is now the Origin-Agent-Cluster header which allows you to request dedicated resources for an iframe. It is currently supported on Chrome (88+) with positive reception from Mozilla and Safari.

Origin-Agent-Cluster is a new HTTP response header that instructs the browser to prevent synchronous scripting access between same-site cross-origin pages. Browsers may also use Origin-Agent-Cluster as a hint that your origin should get its own, separate resources, such as a dedicated process.

[...] For example, if https://customerservicewidget.example.com expects to use lots of resources for video chat, and will be embedded on various origins throughout https://*.example.com, the team maintaining that widget could use the Origin-Agent-Cluster header to try to decrease their performance impact on embedders.

To use the Origin-Agent-Cluster header, configure your web server to send the following HTTP response header: Origin-Agent-Cluster: ?1 The value of ?1 is the structured header syntax for a boolean true value.

More details here: https://web.dev/origin-agent-cluster/