iFrame - cost of implementing an Iframe in a web application

Question

First of all, to clarify, this question is not about onload page rendering performance.

I am working on a web application (HTML5, SVG, CSS3 & Js) which is using SVG & a lot of javascript. Its come to a point where dragging is noticeably slow & we are having to go back & re-write & review all the existing functionality to optimize the application.

One of my team mates thinks that the web application wouldn't bear much impact if I load a feature in an iframe as the browser would treat it in a separate thread & therefore the existing web application tab would not have to bear the brunt of the iframe content rendering & updating. To add, the content in iframe can easily be rendered in a div if need be.

My question is, is it true that the browsers (latest & greatest ofcourse) allocate separate resources for render & performance's sake when dealing with iframes? Application loading is not an issue for this question.

Answer 1

I hate to leap on an old thread here, but the accepted answer is misleading. Your friend was correct: iframes are effectively sandboxed, so their rendering processes are independent, asynchronous, and multithreaded in modern browsers. So while segmenting parts of your app into iframes won't speed any javascript execution, it will quite possibly improve rendering performance to the extent that it segments and simplifies the DOM of each page component.

For reference, check out the story about Fastbook , which the Sencha engineers put together over a couple of weeks as an evening project, just to show that the Facebook web app could have been greatly optimized. Among other things, they used iframes to sandbox rendering.

As a side note, this isn't really how browsers are supposed to work. (Eg the Chrome team encourages people to file bugs for cases where iframes are necessary to boost performance.) Still, for the foreseeable future, it's a best practice for complex apps, especially those with multiple "panels" and high reflow rates.

Answer 2

Same-domain <iframe> s are guaranteed to run in the same thread.

The browser can only run two pages on different threads if they cannot interact with each-other.