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?