性能方面：请求JSON并在JS中呈现，或者请求整个HTML？

Question

  

可能重复：
  Why is it a bad practice to return generated HTML instead of JSON? Or is it?

如果我向PHP文件发送一个AJAX请求，那么什么会导致更快的HTML呈现：

1. 直接从PHP发送完全格式化的HTML，或者：
2. 只需发送JSON数据并让Javascript进行HTML呈现吗？

我有一个相当复杂的HTML结构，这使得大型HTML块的下载时间与Javascript（jQuery）需要呈现相同结构的时间相同。

是否有确凿的答案？

Answer 1

您需要根据自己的情况来衡量时间，因为答案取决于：

服务器呈现的HTML ：

1. 服务器在低负载和高负载下将数据格式化为HTML所需的时间。
2. 在低负载和高负载下将格式化HTML移动到客户端所需的时间。
3. 在客户端上使用格式化的HTML重绘页面所需的时间，适用于速度较慢的客户端和浏览器。

客户端呈现的HTML ：

1. 服务器在低负载和高负载下将数据格式化为JSON所需的时间。
2. 在低负载和高负载下将JSON数据移动到客户端所需的时间。
3. 客户端从JSON数据呈现HTML所需的时间，用于慢速和快速客户端和浏览器。

在这种情况下，在编码之前运行测试的一小时可以避免以后重做所有内容。

<强> [补充]

每组测量（1,2,3）都需要一组不同的工具来捕获数据。我将选择3组代表性数据（最小，平均，最大），然后对于每个数据集，进行上面列出的每个测量。请注意，您不需要（实际上不应该）使用您的完整应用程序 - 您真的只需要最小的代码块来完成您想要的操作。然后我会查找服务器呈现和客户端呈现之间的差异，并确定哪个（如果有的话）在我的应用程序中更重要。

你无法衡量每一种可能的组合，但如果你选择最慢的PC上最慢的浏览器，你可以放手（例如：便宜的上网本），并使用最慢的互联网连接（你还有一个AOL拨号帐号用于测试，对吧？）这会让你看到最糟糕的情况，这就是你真正关心的。

Answer 2

JSON是要走的路。 网络可能是巨大的瓶颈，而javascript处理速度很快。最大的区别在于慢速连接。它绝对值得解析。新浏览器提供原生JSON ，因此它应该疯狂快速。

还有一件事需要考虑： innerHTML有很多bugs （表格，表格等）。在这些情况下，您需要大量开销才能使其工作跨浏览器。可能会出现意外问题，这会使您的应用程序不稳定。

但是，JSON允许您根据内容决定是否要使用innerHTML或DOM方法。这是另一个巨大的胜利。

Answer 3

我会说＃2 - 这样可以减轻服务器的负担，并允许客户端浏览器完成工作。这也快得多，因为它传输的数据更少。

Answer 4

您需要在快速和慢速计算机上进行测量。 JavaScript可能需要比PHP +传输时间更长的渲染时间，但它取决于客户端的速度（以及连接的速度以及PHP生成HTML所需的速度）。

Answer 5

可能没有确凿的答案。但请注意，尽管从请求角度来看，返回JSON的AJAX比使用PHP请求整个页面要轻。处理JSON请求和更新页面组件会带来更高的管理负担。

你考虑过混合动力车吗？ AJAX请求PHP返回小块HTML。

Answer 6

首先，您需要比较JSON与HTML的字节大小。

如果JSON不是很小，那么只需发送HTML即可。使用JavaScript的innerHTML将HTML块放入页面非常快。从某些JSON构建DOM树会更慢。

最终，除非JSON / HTML的数量真的巨大，否则用户的时间差异可能微不足道。

Answer 7

取决于网站类型，而不是其他任何东西。

• 你需要它优雅地降解吗？
• 您的目标受众可能使用哪些浏览器？
• 他们可能有什么样的联系？
• 该网站有多少次点击？

例如，可以公平地假设使用具有快速连接的合适浏览器的计算机速度较快的人访问“技术”网站。

如果你必须支持IE6，那么我会对过多的javascript保持警惕，但它确实需要进行测试。

我倾向于在服务器上渲染，它只是更容易，但是我再次制作低负载的内部网站点！

Answer 8

这实际上取决于您传输的数据类型。如果前端有一些静态HTML元素，您只需要填写值，JSON就是最快速，最简单的解决方案。为此，有许多很多很多客户端JS库。如果这是您的要求，请知道使用这种方法，您的HTML已存在，无论是在页面中，还是在客户端的内存中作为模板（取决于您编写脚本的方式）

至于另一个选项，我建议你只有这样做，如果你有一些非常“复杂”或真正依赖服务器的HTML，只有服务器可以生成...或者如果你是从其他地方嵌入HTML提供HTML。

生成响应的速度完全取决于您的服务器及其编程方式。由于JSON较小，通常更快，并且有许多JSON库可用于所有类型的后端编程。< / p>

我认为你应该研究一些以UI为中心的JS框架

Answer 9

雅虎的尼古拉斯·扎卡斯（Nicholas Zakas）在Velocity 2010的文章/演讲中提到了这一点，

这听起来像是你的javascript性能所以非常值得查看幻灯片/ pdf。

包括Steve Sounders和一些我从未听说过的人的东西：

http://en.oreilly.com/velocity2010

编辑：如果我正确地记得结论是html通常更好，因为IE缓慢的json解析（我想！）

Answer 10

请记住，对于用户来说，真正重要的不是总时间，而是它们的样子。

• 情况A）用户按下按钮， 没有任何事情发生2秒，然后数据 负载。
• 情况B）用户按下a 按钮，它说“请等待”或 东西，然后数据加载3秒 后面。

对于大多数用户而言，情况A实际上似乎较慢。

所以无论你做什么，都要尝试让渐进式渲染为你工作，这样用户可以尽快看到发生的事情。