0

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

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

我应该从服务器得到什么：一堆JSON 数据或一个完整的 HTML 页面？

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

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

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

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

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

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

4

1 回答 1

1

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

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

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

简而言之：

  • JSON 的好处是带宽使用率低。
  • HTML 片段的好处是对客户端处理能力的要求低，几乎没有代码重复。
  • 完整 HTML 的好处是服务器不需要关心它是在提供第一页还是其他任何页面。
于 2012-09-22T23:35:15.513 回答