CODEWITHSUNDEEP
htmliframe
Ender
Ender

Reputation: 27283

Performance differences between iframe hiding methods?

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.

Upvotes: 2

Views: 443

Answers (2)

Manuel Graf
Manuel Graf

Reputation: 528

Visibility:hidden will probably be more performant, as Browser doesn't have to recalculate, -layout and -paint. The element will just not be drawn at all, without even checking it's layout.

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 54011

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.

Upvotes: 2

Related Questions