最佳实践：加载呈现的 html 或 json？

Posted 2023-03-05

技术标签:

【中文标题】最佳实践：加载呈现的 html 或 json？【英文标题】：Best practice: loading rendered html or json? 【发布时间】：2010-11-11 20:16:30 【问题描述】：

大家好，我有一个问题感觉很愚蠢，但我说不出为什么。

背景：

想象一个带有用户和标签的网络应用。用户互相标记。

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

假设这个视图的 url 是/users/bob/tags/footag

当然，这些列表很长——我不想在网页浏览时加载整个列表。所以我为每个加载前十个。

问题

现在我可以通过以下两种方式之一为每个列表提供动态分页：

div

html

/users/bob/tags/footag/received?page=1

<div>

因此，在一种情况下，我获取数据并通过浏览器中的 JS 呈现它，另一种情况下，我获取呈现的数据并将其大量放入文档中。

有什么理由不使用#2？我无法想象一个，但我想可能有我没有考虑的安全方面，或性能，或其他东西。我更喜欢做#2，因为它大大简化了我的生活。

谢谢！

【问题讨论】：

除非“长”表示超过 1000 个条目，否则我投票赞成加载整个列表。分页很烂。 @InstanceHunter 我同意，但是当用户向下滚动时，您可以加载更多内容。就像 facebook 一样。 【参考方案1】：

我个人会使用方法#2。为什么要把时间浪费在使用服务器端语言可以轻松、更好地完成的客户端解析上？与其创建一个数组然后将其转换为 json，不如只循环遍历结果并回显 HTML。

【讨论】：

这是非常具有误导性的。当您发送 HTML 以响应 AJAX 请求时，浏览器 /does/ 必须重新解析（并重新渲染）它。我不认为 Salty 指的是浏览器，而是您必须编写的运行客户端以将 JSON 转换（“解析”）回 HTML 或将其注入到必要的。【参考方案2】：

好吧，除了从服务器加载格式的轻微开销（这可能会使大量数据稍微变慢）之外，我看不出任何缺点。由于 javascript 渲染可能也很慢，所以我会选择 #2。

【讨论】：

【参考方案3】：

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

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

到：

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

当你得到 JSON 时：

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

这样，您就不会不必要地创建新的 DOM 节点。另一个优点是，如果您以后决定以某种形式公开 JSON API，它会更加“诱人”。

【讨论】：

我想你会发现在一大块 HTML 中猛击比通过 javascript 解析 JSON 迭代添加 HTML 要快得多。此外，gzip 压缩（如果您担心性能，这是一个好主意）可能会将数据压缩到足以使 HTML 和 JSON 之间的性能差异最小化。 OrbMan，我不是在谈论添加 HTML（使用 innerHTML 或其他东西），而是在 /existing/ HTML 节点中替换文本。 gzip 只对带宽很重要。它对创建新 HTML 节点的成本没有任何影响。【参考方案4】：

我会选择#1 ...所以你真的得到了数据，而不仅仅是一些 HTML ...它只是一个简洁的 JavaScript 对象结构而不是一些字符串，所以你可以随意评估数据，缓存它，将其用于搜索等......客户端完成的工作越多，它越聪明，应用程序的扩展性就越好......你有 1 个服务器，或者可能是 2-10，或者我不知道，但是您还有 10-10000 个客户...

问候

back2dos

【讨论】：

【参考方案5】：

我有一个这样的应用程序——我使用了这两种方法。

我使用您的方法 #1 来更新不连续的字段（例如，整个地方的输入字段），但我使用您的方法 #2 来更新表格数据，有点像您的列表。

对于您的情况，我会坚持 #2。

【讨论】：

【参考方案6】：

在大多数情况下，我说#1。如果您想在要更新的 div 之外添加“下一个/上一个”页面按钮，那么您可以使用 JS 来确定何时启用/禁用它们。使用 #1 为您提供了更大的灵活性，并进一步将数据与表示分离。

在我看来，性能和“易于开发”可以忽略不计。对于较小的“块”数据（假设您的 JS 在健全的领域），性能不再那么大，考虑到这更容易维护，“易于开发”并不是一个重要因素。

【讨论】：