javascript - 通过 ajax 在后台预加载多个大型数据集？

Question

我正在开发一个完全在一个页面中的 Web 应用程序，它基于在网格中显示一堆表格数据。数据库中大约有 30 个不同的表，用户可以随时请求其中的任何一个以网格形式显示在他们的屏幕上。大多数(但不是全部)这些表的行数都少于 1000 行。这些网格的数据正在通过 ajax 调用和加载。

现在，我显示登录屏幕并立即预加载一些主表，因此当用户输入他们的用户名和密码时，它正在加载初始网格。这确实增加了用户体验，因为他们在单击查看其中一个数据网格后不必等待 ajax 调用。因此，我正在考虑更进一步。

我正在考虑进行 ajax 调用以在后台加载所有 30 个表。除非需要，否则它们不会被添加到 dom 中，而是添加到数组中。不利的是，我不知道用户是否会在他们的 session 中使用这些表的一半，但他们使用的那些通常会根据用户请求立即显示并创造更好的用户体验。

所以，我的问题是，通过 ajax 调用在数组中存储 30 个完整的数据表(大多数情况下每个表大约 50 到 1000 行)是个好主意吗？如果是这样，最好的方法是什么？性能(请记住，我只是将它们放在数组中，而不是在预加载后将它们添加到 dom 中)？以下哪项是最好的方法:

1. 在页面加载时为每个表进行 30 次 ajax 调用
2. 在返回所有表的页面加载时进行 1 次 ajax 调用
3. 在页面加载时进行 5 次 ajax 调用，每次调用返回 6 个表格
4. 倾斜 ajax 调用，这样我就可以调用一些，然后在它们完成后，再调用一些
5. 其他一些方法...

Answer 1

我建议在一次调用中加载主表，然后在另一次调用中加载其余表。主要问题是，如果您将任何东西一起批处理，那么在整个 AJAX 请求完成之前，这些信息都不会对应用程序可用。因此，如果您在一次调用中加载所有内容，这可能需要一段时间，并且当用户完成登录时主表不会准备好。