最佳实践：加载渲染的HTML还是JSON？

Question

大家好，我有一个问题，觉得问题有点傻，但又说不清楚为什么。

背景：

假设有一个带有用户和标签的 Web 应用程序。用户可以对彼此打标签。

在应用程序中，有一个页面显示与单个用户相关的单个标签的详细信息。假设用户为 'bob'，标签为 'footag'。在此页面上，我要显示两个列表：所有已使用 'footag' 标记了 bob 的人和 bob 已使用 'footag' 标记的所有人。让我们称这些为<div id="received'> 和 <div id="sent">。

假设此视图的 URL 为 /users/bob/tags/footag。

当然，这些列表很长 - 我不想在页面加载时加载整个列表。因此，我只加载每个列表的前十个。

问题

现在，我可以为每个列表提供动态分页的方式：

1. 从服务器以 JSON 格式获取下一个 10 个用户的数据。编写 JS 渲染此数据，并替换 div 的内容。
2. 从我的服务器上的另一个明确定义的 URL 中获取呈现的 HTML“片段”，例如 /users/bob/tags/footag/received?page=1。我异步地获取它，然后只替换相关的 <div> 的内容。

因此，在一种情况下，我会在浏览器中获取数据并通过 JS 渲染它，而在另一种情况下，我会获取已渲染的数据，并将其整个放入文档中。

有没有理由不使用 #2？我想象不出来，但我想可能有我没考虑到的安全方面、性能问题或其他问题。我很愿意采用 #2，因为它极大地简化了我的生活。

谢谢！

- Idan Gazit

---

除非“长”表示超过1000个条目，否则我投票加载整个列表。分页很烦人。 - Instance Hunter

@InstanceHunter 我同意，但是你可以在用户向下滚动时加载更多的内容。就像Facebook一样。 - Jonas Stensved

Answer 1

我有一个类似的应用程序，我同时使用两种方法。

我使用您的第一种方法来更新不连续的字段（例如，各处的输入字段），但我使用您的第二种方法来更新表格数据，有点像您的列表。

对于您的情况，我建议坚持使用第二种方法。

- Cᴏʀʏ

Answer 2

我会选择#1...这样你确实会得到数据，而不仅仅是一些HTML。它将只是一个简洁的JavaScript对象结构，而不是一些字符串，因此您可以随意评估数据，缓存它，用于搜索等等。在客户端完成的工作越多，越聪明，你的应用就能够扩展得越好...你可能有1个服务器，或者也许有2-10个，我不知道，但你有10-10000个以上的客户端...

问候，

back2dos

- back2dos

Answer 3

我会在几个浏览器中进行基准测试，但我怀疑#1（以JSON格式传输）实际上可能会更快。使用该方法，您可以简单地替换现有DOM节点的值。例如（非常简化），直接使用DOM操作更改：

<li>foo</li>
<li>bar</li>
<li>baz</li>

to:

<li>foo2</li>
<li>bar2</li>
<li>baz2</li>

当你获取到JSON时：

["foo2", "bar2", "baz2"]

这样做，您就不会不必要地创建新的DOM节点。另一个优点是，如果您以后决定以某种形式公开它，JSON API会更具吸引力。

- Matthew Flaschen

---

我认为，将一块HTML直接放入页面要比通过JavaScript解析JSON迭代地添加HTML快得多。此外，启用gzip压缩（如果您关心性能的话）可能会使数据缩小到足以使HTML和JSON之间的性能差异最小化。 - D'Arcy Rittich

OrbMan，我说的不是添加HTML（使用innerHTML或其他方式），而是替换现有HTML节点中的文本。gzip只影响带宽，对创建新的HTML节点的成本没有任何作用。 - Matthew Flaschen

Answer 4

我个人会选择方法#2。为什么要浪费时间进行客户端解析，而不是使用服务器端语言轻松地更好地完成呢？与其创建一个数组然后将其转换为json，不如直接循环遍历结果并回显HTML会更好。

- Salty

---

这非常具有误导性。当您通过 AJAX 请求发送 HTML 时，浏览器确实需要重新解析（和重新渲染）它。 - Matthew Flaschen

我认为Salty所指的并不是浏览器，而是你需要编写的客户端JavaScript代码，用于将JSON转换回HTML或在必要时注入它。 - D'Arcy Rittich

Answer 5

嗯，除了从服务器加载格式的轻微开销可能会在大量数据时使它略慢之外，我看不出有什么缺点。而且由于JavaScript渲染也可能很慢，所以我会选择#2。

- Nico Burns

Answer 6

在大多数情况下，我会选择方案#1。如果你想在更新的div之外添加“上一页/下一页”按钮，则可以使用JS来确定何时启用/禁用它们。使用#1可以为您提供更大的灵活性，并进一步将数据与呈现分离。

在我看来，性能和“开发便利性”都可以忽略不计。对于较小的数据“块”（假设您的JS处于理智的范围内），性能并不是很重要，“开发便利性”也不是一个很大的因素，因为这样更容易维护。

- user19302