Which is more performant: XmlHttpRequest response as HTML or JSON?

In a highly AJAX-ified web site, the content of web page is updated partially by AJAX, which is basically change HTML tags or part of the web page.

So, we need to make a decision:

1. Server side render the HTML tags and returned in XmlHttpRequest response. Browser JavaScript just change innerHTML of container with the XHR response;

2. Server side returns data in JSON format. Browser JavaScript render HTML accordi开发者_运维百科ng to the JSON and then change innerHTML of container.

From a performance perspective, which approach is better?

As of performance, I mean perceived performance by end user, which is affected by time spent in server side, time spent on network and on client-side browser.

Most likely the JSON version is faster, because with it you have to transfer less bits over the wire. Rendering the HTML in browser is fast compared to possible network latency. Just use some client-side templating language that precompiles the templates. Like Handlebars.js.

Also JSON is more general purpose if you ever want to do something else with it. I would go without a doubt with JSON.

If we leave client-side performance out of the equation, there are two things that you might want to measure:

1. Length of transmitted data (since the network is the bottleneck here by far, shorter requests would be more performant both as realized from the client and from your server).
2. Time taken to generate said data on the server side.

Off the top of my head both of these metrics sound like they will be very close using either JSON or HTML, to the point of saying "just forget about it and do what is more convenient". But if you are serious about getting every last drop of performance, these metrics are what you should use to decide.

If you need to send html formatted data, I would choose direct HTML response.

With JSON you would have to create it in such a way that a property would tell which tag is it, and another one for the data it contains. If you have many nested tags it will start to be unreadable and error prone.

Alternatively, you could send a JSON with only a property containing a string with all the HTML. But then, plain HTML is still best imho.

I don't think you will see any performance differences anyway.

I'd say performance is not the issue here but the best practices that you should follow.
If you have a highly ajax website you should consider a SOA architecture.
REST is specifically useful here as you can actually request both formats depanding on the MIME-Type you requested for.
You should use the Accept and Content-Type HTTP headers to request the correct format and check if it is received correctly.
This, as a consequence, allows you to be flexible and choose the most appropriate representation according to your needs.
You should read about REST here and here.

I've been using JSON blindly until recently. I realized that with some setups returning HTML on XHR can be faster not only for the client but also for the server.

It's faster for the client, because a well-structured HTML is not significantly longer than a JSON converted to string. At the same time, you largely avoid most of the JS. Less JS = faster.

It's also faster for the server in some cases, because you're not converting struct to JSON and then to bytes. Instead, you can directly convert struct to bytes. Remember, JSONs are sent encoded to string.

With JSON, what you're doing is struct -> JSON -> string -> bytes -> string -> JSON -> JS try to fill the HTML.

With HTML, you go struct -> html -> bytes -> JS insert.