对于 PWA (Progressive Web App)，具有后端数据的页面通常需要分页来展示数据。在处理大数据量分页时，遇到的问题包括：如何在效率和可靠性之间取得平衡，如何在分页中保持用户的浏览状态，以及如何处理用户取消分页请求等等。本文将深入探讨这些问题并提供解决方案。
分页方案
最常见的分页方式是数据查询期间懒加载，这意味着当用户滚动到页面底部时，应用程序将被提示加载更多数据以使得滚动加载可用。在 PWA 中，我们可以使用 Intersection Observer API 实现这一行为。以下是一个简单的示例代码：
-- -------------------- ---- -------
--- ------- - -
----- -----
----------- ------
---------- ---
--
--- -------- - --------- --------- -- -
--------------------- -- -
-- ---------------------- -
-- ------
---------------------------------
-
---
--
--- -------- - --- ------------------------------ ---------
--- ------ - ---------------------------------------------
-------------------------此处 pagination-marker 是一个占位符元素，用于指示 Intersection Observer 何时观察到滚动到底部。一旦我们识别到这种情况，我们就会触发加载新数据的代码逻辑并将观察器从占位符元素中移除，以便继续监听后续的滚动位置。
分页状态管理
在分页过程中，我们需要使用户的浏览状态得以保持。例如，当一个用户滚动到某页时，他们应该直接看到上次浏览时的信息，而不是回到第一页。为了实现这一点，我们可以将分页位置保存在每一个 URL 中。在这样做之前，我们需要确保每一页的 URL 是正确的并且互不重复，例如：
Page 1: https://example.com/data Page 2: https://example.com/data?p=2 Page 3: https://example.com/data?p=3 ...
在拥有正确的 URL 之后，我们可以尝试将滚动位置存储在 URL 参数中。当用户转到下一页时，滚动位置将被记录并添加到 URL 中。此外，我们还应该为用户提供一个链接或按钮来直接转到某一页，并将滚动位置设置为用户上次浏览的位置，以提供良好的用户体验。
以下是一个例子：
-- -------------------- ---- -------
--- ----------------- - ---------- -- -
--- ----------- - --- ----------------------------------------
-------------------- ------------------
--- ------ - ---------------------------------- - --- - -----------------------
------------------------------- --- --------
-
--- ----------------- - -- -- -
--- ----------- - --- ----------------------------------------
--- -------------- - ------------------------------ -- --
------ ---------------
-在这段代码中，我们通过获取和设置 URL 参数来记录和恢复滚动位置。这些位置可以在 window.scroll 中使用。
取消分页请求
用户可能会通过快速滚动或在加载数据时切换到其它页面来取消分页请求。这些情况下，我们需要确保正在下载的数据及时中止以避免影响服务器性能和网络性能。
以下是一个示例代码片段，用于取消 AJAX 请求：
-- -------------------- ---- -------
--- --- - --- -----------------
--------------- ----------------
---------- - ---------- -
-- ----------- --- ---- -
---------------------------
-
--
----------- - ---------- -
------------------- ------- --- -----------
--
-----------
-- --------- ---- -- --- ----
------------当用户中止 AJAX 请求并滚动到新页面时，xhr.abort() 将被调用，中止正在进行的数据下载请求。
总结
本文探讨了在 PWA 中如何处理大数据量分页，并提供了解决方案。通过使用 Intersection Observer API 和 URL 参数记录滚动位置，我们可以实现可靠的浏览状态管理。同时，我们还需要注意到当用户取消分页请求时，我们必须确保及时中止 AJAX 请求以避免影响服务器性能和网络性能。这些解决方案将有助于优化 PWA 中的分页性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf301ab5eee0b52569b17a