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). <pre class="prettyprint"><code><body> <a href="test.html" target="mframe">open link></a> <iframe name="mframe" [params] /> </body> </code></pre> 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. <pre class="prettyprint"><code><body> <a href="doAjaxCall('test.html')">open link</a> <div id="main-content"></div> </body> </code></pre> 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.

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

Why are iframes so slow?

Tags:

javascript

html

ajax

css

iframe

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?

916

asked Jul 07 '09 12:07

palig

2 Answers

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.

110

answered Sep 25 '22 12:09

Dave Morgan

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

answered Sep 24 '22 12:09

Simon Lieschke

Related questions
                            
                                What's a good tool to screen-scrape with Javascript support? [closed]
                            
                                How to create an array in JavaScript whose indexing starts at 1?
                            
                                Adding click event handler to iframe
                            
                                Stack vs. Heap in Javascript? (Maximum call stack size exceeded)
                            
                                Can't Get Custom HTTP Header Response from Ajax getAllResponseHeaders
                            
                                What is the JavaScript equivalent of jQuery's hide() and show()? [duplicate]
                            
                                Set height of <div> = to height of another <div> through .css
                            
                                AngularJS: read only input with ng-readonly
                            
                                Difference between layerX and offsetX in JavaScript
                            
                                What are the precise semantics of block-level functions in ES6?
                            
                                Access function location programmatically
                            
                                Angular2 Unexpected value in Service. Please add annotation
                            
                                Javascript AOP libraries [closed]
                            
                                Translation in JavaScript like gettext in PHP?
                            
                                What's the best way to handle longtap and double-tap events on mobile devices using jQuery?
                            
                                Loading html into page element (chrome extension)
                            
                                How can jQuery behave like an object and a function?
                            
                                How can I tell if an object is a jQuery Promise/Deferred?
                            
                                Running node-inspector alongside nodemon?
                            
                                CORS issue with Vue.js

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With