Does Iframe Creates separate execution context?

Question

I'm writing an html parser in js which handles and manipulates a lot of nodes.

I would like to split the overhead so I would not cause the UI to freeze.

I thought about using a web Worker but it doesn't have DOM access so currently I'm using setTimeout(0) in my loop to not freeze the UI, but I thought about creating multiple blank iframes and use their window context to do this task.

My question is if it's really considered to be a separate execution context and runs parallel to the main one or it will still freeze the main UI?

Answer 1

It actually depends on the browser. For example, mobile browsers are less likely to put different embedded iframes in separate threads/processes due to the compute overhead.

But as of early 2021, there is now the (weirdly named) Origin-Agent-Cluster header which allows you to explicitely 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/