Performance of multiple iframes

Question

I'm working on a project that requires previews for related websites. We've been playing with a couple ideas, and two that have come up are using a service to render the website and send back a screenshot, or fetching the website and loading it in iframes as a 'live preview'.

The team is convinced that the iframes are the better option, since they would be interactive, and allow for dynamic visuals to be previewed, but I have some performance concerns.

Just wondering if anyone could offer some insights here, without coding up a server to fetch the website content and forward it to the site. The designs would have about 5 images/iframes, relatively small ~300x500 pixels. Would loading the 5 iframes be analogous to opening those sites in 5 tabs?

Answer 1

To answer your question, yes, it is analogous to opening those sites in 5 tabs. iFrames build an entirely new page in memory, then add it to the page.

Besides this, iFrames have huge security issues, as you are accepting the providers code without question. You're always better off using ajax and injecting the code into your own DOM after some parsing, but I realize that sometimes options are limited.

Check out performance specs offered here.

I think the important piece of the above article is this:

Iframes Block Onload

It’s important that the window’s onload event fire as soon as possible. This causes the browser’s busy indicators to stop, letting the user know that the page is done loading. When the onload event is delayed, it gives the user the perception that the page is slower.

The window’s onload event doesn’t fire until all its iframes, and all the resources in these iframes, have fully loaded. In Safari and Chrome, setting the iframe’s SRC dynamically via JavaScript avoids this blocking behavior.