Loading an html or JavaScript file as iframe source

Question

What will be the difference between-

• loading a JavaScript file that builds the whole html(from creating head, body tags to rest) and other application related staffs.
• loading an html which contains the skeleton(eg head, body tags) and JavaScript that builds the rest of the page and other staffs.

I need to adopt the best approach between these two for populating an iframe:

ifrm.src="http://somewhereintheuniverse.com/test.js"

or

ifrm.src="http://somewhereintheuniverse.com/widget.html"

Is the resource caching mechanism for both applies the same ? Suggestion describing pros and cons of both approach will be appreciated.

Answer 1

It is faster to have the entire html in a single html file as building html, or rather modifying the DOM with JavaScript, is slow for a number of reasons, see But why's the browser DOM still so slow after 10 years of effort?

So if possible, I would opt for the option of loading all the html in a single file rather than building it with JavaScript if you're purely going for speed. JavaScript is nice in that it gives you flexibility and can get rid of duplicated code in things such as lists. But it would be better to get rid of that code duplication on the server-side and just return a single html file.

Note that caching would be the same. DOM manipulation is going to be the biggest slowdown.