views:

887

answers:

3

Hello gurus,

I have little bit longer question for you - but hope answer will be very simple :)

Let's say I have very simple page with link and iframe (just for simple example).

<body>
    <a href="test.html" target="mframe">open link></a>
    <iframe name="mframe" [params] />
</body>

So when you click on the link it will load test.html in the frame.

Now I will change the iframe with div and ajax call.

<body>
    <a href="doAjaxCall('test.html')">open link</a>
    <div id="main-content"></div>
</body>

The doAjaxCall will simply use GET ajax requset to get whole response, parse it (using JavaScript) and grab content in <body> tag and put it into main-content.innerHTML.

test.html contains a lot of html, also css styles (but the same as are on parent page - so I don't need them when I'm using ajax solution).

Question:

Why is this ajax solution SO faster? I'm still downloading the same amount of data (downloading whole test.html).

Why is the iframe solution so slow? Is it because of browser have to parse all possible styles again? Or is there any other overhead of iframes?

Thanks in advance!

Pavol.

+4  A: 

You are pretty much on the right track. iframes are going to be slower because there is an additional overhead for the browser (rendering it, maintaining it's instance and references to it).

The ajax call is going to be a bit faster because you get the data in and you then inject it, or do whatever you want with it. The iframe will need to build an entirely new "page" in the browsers memory, and then place it in the page.

Dave Morgan
Wow, thanks for super-sonic-fast answer :) Love the SO! I'll wait if there are any other answers/opinions.
palig
+2  A: 

Steve Souders has a post Using Iframes Sparingly on his High Performance Web Sites blog that may provide some more insight.

Simon Lieschke
I marked above one as 'answer' but this one is also very helpful! Thanks.
palig
A: 

An iframe will result in an additional connection to the server which will slow things down a bit. Then you get the impact of the rendering of the separate page and the associated allocation of memory etc.

The Ajax resuses the connection and the rendering.

Mark Schultheiss
Reuse of the HTTP connection is subject to the user clicking on the link to load the content within the keepalive timeout of the web server. Whether the content is loaded in a separate document in an iframe or by Ajax makes no difference.
Simon Lieschke
Yes, but on the client side, the iframe uses additional resources in the browser.
Mark Schultheiss