服务器端延迟加载与客户端延迟加载答案

【问题标题】：Server-side lazy loading vs. Client-side lazy loading服务器端延迟加载与客户端延迟加载
【发布时间】：2018-03-17 18:28:06
【问题描述】：

我一直在做一些关于无限滚动的研究，并遇到了人们所说的“延迟加载”。现在我已经在我的一个网站元素（聊天框）上完成了它，现在我有两种方法可以做到这一点。但我无法决定哪个比另一个更有效。以下是我的方法：

假设我有 1,000,000 行来自数据库的数据需要全部提取

第一种方式：
从数据库加载内容，在服务器端代码（PHP）上截断它，然后只显示前 50 个。当用户在页面上滚动时，将发送另一个请求以再次获取结果并显示下一个 50，依此类推..

第二种方式：
从数据库加载内容，在我的 HTML 中将其呈现为隐藏元素，但仅显示前 50 个，然后在用户滚动时，再显示 50 个隐藏元素。

第一种方式是在需要显示更多结果时从服务器请求。第二种方式只是从服务器发出 1 个请求，然后隐藏结果，除了应该显示的前几个。

这两种方法我都没有问题。现在的困境是，第一种方式是发送更多的 HTTP 请求，而第二种方式（虽然只发送 1 个 HTTP 请求）是在单个请求中获取大量数据，这可能很慢。

哪种方法“更好”，如果有其他选择，请告诉我。

【问题讨论】：

我认为第一个选项看起来更好，除非你不截断获取的记录我猜你以后会需要它
类似于stackoverflow.com/questions/46603653/mysqli-php-ajax-pagination 在您的 SELECT 语句中使用 LIMIT 来返回结果数（这里您提到 50）。当您的用户想要接下来的 50 条记录时，请执行 AJAX 调用以仅获取接下来的 50 条记录。不要一次加载全部 1X10^6 个结果。您的 2 种方法可以获得整个结果集。只得到你需要的东西。
尼克，你说得有道理。我去做。我想那么第一种方式 + SQL 限制是要走的路

标签： javascript php hide lazy-loading infinite-scroll

【解决方案1】：

我知道这是个老问题，但想发表我的看法：

第一种方式

总是特别喜欢这种数量的行，只请求一定数量的行会更有效率，如果用户想查看更多，例如点击下一页，另一个请求会向服务器发出以获取下一页，响应时间会好很多，如果在返回给用户之前还有其他需要做的处理，也会让客户端更容易操作列表。您还需要确保在数据库查询中应用了限制，否则您会将所有对象加载到内存中，这是无效的。

第二种方式

如果您一次获取 1,000,000 行，用户将不得不等到响应返回，这可能会导致糟糕的用户体验，而且返回的行数会不断增加，响应时间会不断增加，您可能会遇到时间-out 最终，还要考虑在返回之前将所有这些对象加载到服务器的内存中。我看到的这种方法的唯一用例是，如果您有一个不随时间增长的列表，或者您有一定数量的不影响响应时间的项目。

【讨论】：