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?
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.