What is the most performant way to inject new code into the DOM?

Question

Hi.

I am engaged in a small debate with the server side developer for my project (I'm the front end guy) around injecting new stuff into DOM. He maintains that the best method to inject a large amount of code (received via ajax) is to send a JSON object and then to iterate through each item of that object. He says that will save some bandwidth and is more server friendly.

Obviously (for me, at least :-) ), this mean a LOT of cpu cycles on client.

The data is basically a table with 20-30 rows (2-3 cols each), which means few (useless) iterations.

On the other hand, I think that the best method is to send pure XHTML (server generated source) and just inject it in place. This means just one cpu cycle ($('selector').html(data) where data is the data received with AJAX, but also means a lot of bloated HTML code.

I use jQuery (but I think that is not too important).

So, what do you think, guys? Thanks!

Answer 1

$('selector').html(data) is not one cpu cycle; it's one method call. The browser has to process all that HTML.

The only way to tell is to test both methods and decide how much you care about client response time vs. server load. From your description, it probably doesn't makes much difference either way. I suspect you'll want to optimize for a third factor: developer comfort. Do whichever makes the most sense and is easy to maintain.

Answer 2

It depends on the data that's being returned, in most of the situations I find myself in. If the server is replying with a form, or general content, I prefer the straight XHTML as you do.

In the event I need to receive actual data, however, I prefer the JSON format. Yes, I have to generate the markup on the client side, but since everything is nicely organized in the JSON array I can pick and choose and filter as needed. This also lets me easily change the view of the data later on, without having to get our back-end guy involved (his to-do list is always 4-5 days long!)

Answer 3

Even as at first I commonly send HTML to be inserted at specific places, now I tend to use JSON whenever I can, XML otherwise, mainly because I can modify a lot of places of the page, and act more dynamically with little information.

Also, JSON has a smaller footprint than XML and is also usually better "human parseable". XMl's biggest advantage is that it has been around for a long time and is the standard, so you have both the tools, and the knowledgeable workforce at hand for it. JSON, on the other hand is a little more obscure. Of course, any developer worth its paycheck will be able to learn it faster than I can write this. Just think about it:

• it has javascript syntax and
• its the same concept of XML.

About just sending HTML Quirksmode says:

If the HTML snippet contains forms, or if the receiving HTML element is a form, this method give horrific errors in Explorer.

(...)

I'm going to study JSON carefully and might switch to it for an unrestricted access application I have in mind. Nonetheless I feel that XML remains the best overall format for the time being, mainly because people are used to it.

In addition, HTML snippets may become quite complicated (...) Thus the server side script that generates the HTML may become quite complicated.

Furthermore, by sending just HTML you can just paste information, you won't be getting information, you'd be getting snippets, so you couldn't operate with it. Remember that the advantage of AJAX is to have dynamic pages, not pages that have some parts that update without reloading the full page. You can use it for that, and is OK, and a valid use, but you are under utilizing the potential.

Even when inserting HTML could be faster than dom manipulation, I don't think that its that much (besides the problems you could have with IE 6). This you should test and see if for your use, its really a bottle neck of performance.

I tend to agree with the closing argument of the previous link.

Although I'd love to be able to say that one of them is "the best", I think choosing the right format depends on the circumstances, and not on any theoretical musings.