哪个性能更高：HTML 形式的 XmlHttpRequest 响应还是 JSON 形式？
在高度AJAX化的网站中，网页内容的部分更新是通过AJAX进行的，基本上是改变HTML标签或网页的一部分。
因此，我们需要做出决定：
服务器端渲染 HTML 标记并在 XmlHttpRequest 响应中返回。浏览器 JavaScript 只需使用 XHR 响应更改容器的 insideHTML；
服务器端返回JSON格式的数据。浏览器JavaScript根据JSON渲染HTML，然后更改容器的innerHTML。
从性能角度来看，哪种方法更好？
至于性能，我指的是最终用户感知的性能，它受到服务器端花费的时间、网络和客户端浏览器花费的时间的影响。
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:
Server side render the HTML tags and returned in XmlHttpRequest response. Browser JavaScript just change innerHTML of container with the XHR response;
Server side returns data in JSON format. Browser JavaScript render HTML according 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
直到最近我一直在盲目地使用 JSON。我意识到，通过一些设置，在 XHR 上返回 HTML 不仅对于客户端而且对于服务器来说都可以更快。
对于客户端来说速度更快，因为结构良好的 HTML 并不比转换为字符串的 JSON 长很多。同时，你很大程度上避免了大部分 JS。更少的 JS = 更快。
在某些情况下，服务器的速度也更快，因为您无需将 struct 转换为 JSON，然后再转换为字节。相反，您可以直接将结构转换为字节。请记住，JSON 被编码为字符串发送。
使用 JSON，您要做的是 struct -> JSON->字符串 ->字节->字符串 -> JSON-> JS尝试填充HTML。
使用 HTML，您可以构建 -> html->字节-> JS 插入。
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.
JSON 版本很可能更快，因为使用它您必须通过线路传输更少的位。与可能的网络延迟相比，在浏览器中呈现 HTML 的速度很快。只需使用一些预编译模板的客户端模板语言即可。就像 Handlebars.js 一样。
如果您想用它做其他事情，JSON 也更通用。我毫无疑问会选择 JSON。
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.
如果我们将客户端性能排除在外，那么您可能需要测量两件事：
在我的脑海中，这两个指标听起来无论使用 JSON 还是 HTML 都会非常接近，甚至可以说“忘记它，做更方便的事情”。但如果您真的想获得每一滴性能，那么您应该使用这些指标来做出决定。
If we leave client-side performance out of the equation, there are two things that you might want to measure:
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.
如果需要发送html格式的数据，我会选择直接HTML响应。
使用 JSON，您必须以这样一种方式创建它：一个属性可以告诉它是哪个标签，另一个属性可以告诉它包含的数据。如果您有许多嵌套标签，它将开始变得不可读且容易出错。
或者，您可以发送仅包含包含所有 HTML 字符串的属性的 JSON。但恕我直言，纯 HTML 仍然是最好的。
无论如何，我认为您不会看到任何性能差异。
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.
我想说性能不是这里的问题，而是您应该遵循的最佳实践。
如果您有一个高度 Ajax 的网站，您应该考虑 SOA 架构。
REST 在这里特别有用，因为您实际上可以根据您请求的 MIME 类型请求这两种格式。
您应该使用 Accept 和 Content-Type HTTP 标头来请求正确的格式并检查是否正确接收。
因此，您可以灵活地根据您的需求选择最合适的表示形式。
您应该此处阅读有关 REST 的信息此处。
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.