通过 AJAX 进行动画无限滚动：返回 JSON 还是 HTML？答案

【问题标题】：Animated infinite scrolling via AJAX: returning JSON or HTML?通过 AJAX 进行动画无限滚动：返回 JSON 还是 HTML？
【发布时间】：2023-04-01 00:10:02
【问题描述】：

我正在尝试创建一个无限滚动页面 - 有点类似于 this 这样的 tumblr 存档页面。我理解我必须通过服务器调用加载内容的概念，但我不知道如何像在 Tumblr 中那样实现这种“动画加载”设计。

我不想知道确切的代码，只想知道解决方案的整体概念。那么做这样的事情的最佳做法是什么？

我应该从服务器获取什么：一堆 JSON 数据 还是 完整的 HTML 页面？

我尝试解码上面的 Tumblr 页面，在我的网络流量页面上看到，在每个滚动事件中都有一个 POST 请求，它返回一个 full HTML 页面，该页面有自己的 JavaScript 和CSS 内容！

我猜动画逻辑在这个 JavaScript 内容中。

但是我对这个方法有两个问题：

当我从服务器获取完整的 HTML 页面（其中也包含新页面）时，如何丢弃当前显示的 HTML 文档并设置新的？
从性能的角度来看，每次都返回一个完整的 HTML 文档是不是太糟糕了？因为完整的文档也将包含存档的先前“页面”的结果。还是我想错了？

从服务器返回仅 JSON 的结果不是更好吗？（它必须在客户端上进行解析，但我猜它对网络流量更友好）

如果返回 JSON 会更好，为什么 Tumblr 以另一种方式工作？

【问题讨论】：

标签： javascript html json infinite-scroll

【解决方案1】：

不发送大量不会使用的数据肯定是有益的。但是，如果您的服务器有很多资源，您可以在服务器上而不是客户端上进行一些预处理。这意味着，您可以发送 HTML sn-p（将添加的块）而不是 JSON。此外，如果您的 HTML 结构非常复杂，您不希望实现两次；一次在 HTML 中，一次在 Javascript 中。

Tumblr 的工作方式可能是因为他们不想向服务器代码库添加更多内容，而是将工作卸载到客户端。 由于一次只发送一页，因此开销是恒定的 w.r.t。页数。客户端只需获取完整的 HTML，通过 DOM 操作找到相应的元素并将其放置在某处。

事实上，这就是 AutoPager 插件的作用：它从用户那里学习“下一个”链接和页面正文，然后从毫无防备的服务器获取额外的完整页面并将其内容插入页面（并读取下一页 url）。

简而言之：

JSON 的好处是带宽使用率低。
HTML sn-ps 的好处是对客户端处理能力的要求低，几乎没有代码重复。
完整 HTML 的好处是服务器不需要关心它是在提供第一页还是其他任何页面。

【讨论】：

为什么开销不变？如果我已经向下滚动了 1000 页（例如），那么下一次我将得到一个包含 1001 页的完整 HTML 页面！而不是简单的 1 页 (JSON) 响应。我认为开销是线性的......
@Zsolt 否。一个完整的 HTML 页面将只包含一个页面（第 1001 个页面）。服务器不会再次发送之前的 1000 页。 javascript 不会用它收到的内容替换当前页面。它将追加它的特定部分。
“完整”的意思是“包括页眉和页脚”，或者“如果网站使用常规分页，用户会看到的一切”。
哦，我明白了，你是对的......那么，我认为这种持续的开销可能并不重要。那么动画加载呢？如果我想实现这个“功能”，它会影响选择 HTML 而不是 JSON 的决定吗？由于“附加”的 HTML 可能包含 Javascript 块，我认为答案是否定的......
动画加载肯定会推动您对 JSON 的决定，而不是单个 sn-p（如果您想在一个结果集中打包多个帖子），但完整的 HTML 始终是可能的，并且可能仍然更容易实现（服务器方面）。 single-sn-p 方式不再提供有关计算能力的任何好处，但完整 HTML 的好处仍然存在。