Web 开发的延迟加载和性能

Question

假设我想在博客上延迟加载 cmets，这样一开始只显示 10 个最新的 cmets，下一批 10 个在滚动时延迟加载。

选项 A：在页面加载时从服务器发送整个结果数组，并在客户端一次处理 10 个渲染。

选项 B：在页面加载时加载 10 个，并根据需要再发送 10 个 ajax 请求。

假设对象的数量可以达到 40,000 - 在页面加载时向客户端发送这么大的 json 数组是否可以？

我认为权衡是：使用选项 A，您可以最大限度地减少访问数据库的次数，但您可能会向客户端发送过多的数据（40,000 条记录的 json 数组 ≅ 7mb），这对于移动用户来说并不理想。使用选项 B，您可能访问数据库的次数过多。

在这方面有最佳实践吗？也许在中间的某个地方妥协？也就是说，向客户端急切加载 200 个对象，最初只渲染 10 个，然后再渲染 10 个，直到用完 200 个对象，然后根据需要从服务器延迟加载？想看看其他人是如何解决这个问题的。

Answer 1

有点选项 B。 如果您使用 Node.js 或类似技术，您可以在服务器中创建一个专用的 api 端点，这非常容易。您只需要在即将到达页面末尾后调用一个 scrollfire 事件。您可以使用下一个 10 或 20 个元素的索引来 ping 服务器以获得所需的数据。 这里的关键是估计您调用的数据的大小和类型。也是数据库的体系结构。如果您的数据库经过精心设计，即使扩展到数千个并行用户，您也不会面临任何性能问题。

Answer 2

我会完全按照你的建议进行小幅摊销改进。

首先，您预加载 200 个项目并将它们以 10 个为一组进行渲染。当加载的推荐达到一半时，您将预加载下一个 200。

根据您的任务，您可以更进一步并动态计算下一个 cmets 批次的大小。如果用户阅读速度较慢，则将批量大小减小到 100。如果用户滚动速度快，则批量增加到 1000。