Question

Is there a major performance difference between the following:

<iframe style="visibility:hidden" />

<iframe style="width:0px; height:0px; border:0px" />

I’m using a hidden iframe to pull down and parse some information from an external server. If the iframe actually attempts to render the page, this may suck up a lot of CPU cycles. Of course, I’d ideally just want to get the raw markup – for example, if I could prevent the iframe from loading img tags, that would be perfect.

Answer 1

I think either way your iframe is going to load it’s contents. You can do a simple test by hiding and then showing the iframe with a page that takes a while to load.

If the iframe (when made visible) immediately shows the long loading page, you’ll know it was already loaded in before the show.

If you’re using FireBug then you can use that to look at the HTTP requests made. This will show you whether there’s a HTTP request made by the iframe.

As far as performance differences, I doubt there’s any between the two pieces of HTML you posted. If anything I’d say that setting visibility to hidden will be more “efficient” since the browser doesn’t have to wory about rendering anything visually, even if it is 0*0px.

Still, I don’t think there’s any real performance difference and especially no major performance differences.

Update:

I just tested in FireBug to see if the iframe still loads its contents when set to visibility:hidden, display:none; and with it’s height and width attributes set to 0px and in all cases, the iframe contents was loaded.