I’m considering two different ways of completing the same task of displaying dynamic HTML using AJAX. The first method is to simply generate the HTML server-side and then insert it via. the DOM (jQuery’s $().load() actually). The second method is to generate JSON server side and then use that data to inject elements into the DOM.
I would like to know the advantages and disadvantages of each method, especially in terms of performance trade-offs. Obviously, having to send HTML along with the data is going to slow things down in terms of the HTTP response, but how large will the data have to be for it to take a perceivably longer time to load?
That being said, how does the performance of rendering fresh new HTML compare with building a DOM object and then injecting it into the current document? I have a gut feeling that most browsers would be more efficient at rendering chunks of fresh HTML than rendering bits and pieces of different parts of the page at a time (maybe because browsers have been doing it for longer? I dunno, just a hunch). How do different browsers compare? (I personally use Chrome (not for testing), but I’m expecting the webapp to be used across Safari, IE7, IE8 and Firefox).
If JSON is clearly the better method, what qualifies as too extreme? What about loading the index to get a document object and maybe a simple page structure and then from there use AJAX and JSON to do everything else?
You may check this video to see how big (huge, in fact) the problem of rendering html in modern browser is. Truly, you would save innocent users hundreds of hours of waiting.
http://www.youtube.com/watch?v=nCgQDjiotG0
Well, quit kidding now. The whole idea of switching to json because of speed sounds a bit extreme to me. Not because html has some technological advantages, but because generating html from templates is easy in every web framework (MVC, at least). It’s what web frameworks do. And putting data into template in Javascript sounds bit tricky to me. Unnecessary complications.