2

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(e.g. 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.

Md. Arafat Al Mahmud
  • 3,124
  • 5
  • 35
  • 66
  • iframe src, parsed as content type html/htm by browser , you must have to through html content by server to browser. js or html extension does not matter if you set content type header with extension – Pushker Yadav Feb 23 '15 at 07:51
  • you can't set an iframe.src to a script file url and have it run, it will just display all scrunched up... – dandavis Feb 23 '15 at 08:24

1 Answers1

0

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.

Community
  • 1
  • 1
winhowes
  • 7,845
  • 5
  • 28
  • 39
  • I need to actually modify the DOM in certain stages. If I render html instead of js, I will do some client side templating and I need some DOM manipulation in that case – Md. Arafat Al Mahmud Feb 23 '15 at 08:02
  • Sure, in that case I would still do as much as you can just in the html to limit the amount of DOM manipulation you are doing. Doing it all in JS will be slower than just some in JS – winhowes Feb 23 '15 at 08:05
  • I have found this link- http://yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/ where it is said that "Try to limit HTML pages to 25.6KB or less if you want them to be cached". But for CSS and JS the limit is 1 MB. So what do you think, caching would still be the same ? – Md. Arafat Al Mahmud Feb 23 '15 at 08:36
  • I think it would be roughly the same. It depends, if your html file is massive and it can't be cached but you can efficiently generate all the elements you need in a cacheable JS file, then I'd say do that. If the HTML file is less than that size I'd say throw everything in the HTML. If the HTML and JS both exceed cacheable size, I'd say you'd probably need to experiment, but I'd side for the larger html file. – winhowes Feb 23 '15 at 08:42