如何将 json 加载过程逐步减少为多个步骤以改善用户体验？

Question

我使用的网络服务提供来自第三方来源的旅行相关数据，该数据被转换为 JSON 并且用于根据用户的搜索条件制定输出。

如果 Web 服务订阅了多个第三方服务提供商，应用程序会收到数以千计的潜在搜索结果，其中一些 searches.Some 为这些搜索结果创建的 JSON 文件高达 [high as 2-4 MB][1]，这会在尝试加载 json 结果时造成相当大的延迟。

需要整个 json 结果集才能对搜索结果进行进一步的排序和过滤操作 users.Moving 目前不可能对后端进行排序和过滤操作.

对于中小型 JSON 结果集，当前实施效果很好，但大型 JSON 结果集会导致性能下降。

我如何才能将 JSON 加载过程逐步减少为多个步骤以改善用户体验，即使 JSON 结果集非常大？

任何关于我如何克服这个问题的线索都将不胜感激。

Answer 1

我确实找到了一些方法来解决这个问题，所以我也可以 post 对其他可能觉得这个答案有用的人。

Web 分页机制将自动提高系统的响应速度和用户体验，并可能减少页面上的混乱情况。除非保证 returning 结果集非常小，否则任何具有搜索功能的 Web 应用程序都必须具有分页功能。例如，如果结果集少于 30 行，则分页可能是可选的。但是，如果大于 100 行，强烈建议分页，如果大于 500 行，则实际上需要分页。有很多不同的方法来实现分页算法。根据使用的方法，性能和用户体验都会受到影响。

关于将 Json 加载过程逐步取消为多个步骤的一些替代方案

如果 JSON 很大，你总是可以考虑一个 "paging" 比喻，你下载前 x 条记录，然后对服务器的下一个 "pages" 进行后续请求数据。假定可以在请求之间添加额外的服务器记录，我们将不得不仔细考虑该实现，但这可能很容易做到。

另一种提高 JSON 效率的方法是限制 return 在初始请求中输入的数据。例如，第一个请求可以 return 只是标识符或 header 所有记录或记录的合理子集的信息，然后您可以有其他详细信息的后续请求（例如，用户转到详细信息屏幕).

如果 JSON 当前包含任何大数据元素（例如 Base64 编码的二进制数据，如图像或声音文件），则前一点的特定排列是。通过将这些从最初的响应中移除，这将解决许多问题。如果你可以 return 这个二进制数据的 URL，而不是数据本身，那肯定会有助于延迟加载（以及让你能够轻松下载二进制信息而不是 Base64 编码，这是大 33%）。如果您正在处理图像，您可能还想考虑缩略图与大图像的想法，特别是在 lazy-loading 模型中处理大图像。

如果采用第一种方式.....

如果采用目前开发场景下似乎更可行的第一种方式，您首先需要更改您的网络搜索结果处理后端代码，以便在响应请求时只传递 n 条记录，从 at 开始一个特定的记录号。您可能还需要 return 服务器上的记录总数，这样您就可以为用户提供一些视觉提示，告诉他们有多少内容需要滚动。

其次，您需要更新您的网络应用程序以支持此模型。因此，在您的 UI 中，当您滚动浏览结果时，您可能希望您的用户界面通过显示

来响应滚动事件

(a) 如果您已经获取了实际结果；或者 (b) 一些 UI 直观地指示正在检索有问题的记录，然后从服务器异步请求信息。

您可以在后台继续下载和解析 JSON，同时将初始数据呈现给用户。这将同时产生大多数人与 "lazy loading"（即在向用户呈现结果之前无需等待所有内容）和 "eager loading"（即它将下载下一条记录，以便他们当用户去那里时已经为用户准备好了）。

第一种方法要遵循的一般实施步骤

算出合并过程完成后总共有多少行数据。
检索前n条记录；
发送对后续 n 条记录的请求，并在后台重复此过程，直到收到完整的结果集。
如果用户滚动到一条记录，如果你有它，你会显示它，但如果没有，提供视觉提示，表明你将异步地为他们获取该数据。
当数据合并时 JSON 更新 UI，如果合适的话。
如果在 Web 端应用了任何过滤器和排序选项，则应将其禁用，直到收到完整的结果集。

生成页面的一般实施步骤 links

选择检索结果集并遍历结果集的最佳方法后，应用程序需要创建实际页面 links 供用户单击。下面是一个通用函数 pseudo-code，它应该适用于任何 server-side 技术。此逻辑应驻留在您的应用程序中，并将与 database-driven 和 middle-tier 分页算法一起使用。

该函数取 thee(3)参数和returns HTML表示pagelinks.The参数分别是查询文本、起始位置行数、结果集总行数。该算法足够聪明，可以根据用户在导航路径中的位置生成适当的 link。

注意：我设置默认每页50行，一页window设置为10。这意味着只有10（或更少）页links 将对用户可见。

private String getSearchLinks(String query, int start, int total) {
// assuming that initial page = 1, total = 0, and start is 0

   String result = "";
   int start = 0;

   if (total == 0) { return "";    // no links }

   Int page_size = 50;    // number of rows per page
   //page window - number of visible pagers per page
   Int window = 10;


   int pages = ceil(total / page_size );
   result = "Pages:";

   int current_page = (start / page_size ) + 1;
   //numeric value of current page ex. if start is 51 : 51/50 =
   // 1 + 1 = 2

   Int left_link_count = ((current_page - 1) > (window / 2))
      ? (window / 2 - 1) : (current_page - 1);
   Int pageNo = current_page - left_link_count;

   if (pageNo > 1) {    // show first page and if there are more
                           // links on the left
      result += "1 .. ";
      result += "«";
   }

   for (int i = 0; i < window-1; i++) {
      if (pageNo > pages) {
         break;
      }
      else if (pageNo == current_page) {
         result += "" + pageNo + "";
      }
      else {
         result += "pageNo";
      }
      pageNo++;
   }    // end for

   if ((pageNo - 1) < pages) {
      result += "»";
   }

   result += "
Showing"+((start  > total)?total+1:start+1)+
             " - "+(((start + 50)>total)?total:(start + 50))+"
             of Total:"+total;

   return result;

}

此逻辑不关心结果集的可视部分是如何生成的。无论是在数据库端还是在应用服务器端，这个算法只需要"total"个结果（第一次检索后可以per-cached），以及指标（"start") 包含用户正在查看的最后一页上的第一个行号。如果用户位于初始页面 window 之后的页面（例如，第 20 页），该算法还会显示第一页 link，并正确说明行数不足的结果集10 页。（例如，只有 5 页）主 "for loop" 生成 link 并正确计算下一页的 "start" 参数。查询字符串和总计始终是相同的值。

注意事项

在使用内部和外部数据的门户中不可避免的性能开销，因为系统将不得不等到所有外部酒店信息都被完全接收并且与当地酒店详细信息合并和排序。只有这样我们才会能够知道确切的结果计数。
确定需要多少额外请求会有点如果使用每页的标准结果计数，则会简化。
此更改将为用户提供快速且统一的页面加载所有搜索操作的时间，它将填充第一次搜索的最重要结果块。\
额外的页面请求可以通过异步处理请求。
不仅要酒店数量，发送的内容也要检查并优化性能提升。
生成的 JSON object 中类似酒店数量的一些实例尺寸因第三方供应商而异也订阅了
一旦接收到连续的 JSON 消息，这些 JSON 块将需要合并。在合并之前，用户可能需要通知的新结果可用，如果 he/she 希望合并新结果或使用现有的主要结果集。

有用的资源：*

Implementing search result pagination in a web application

How big is too big for JSON?

如何将 json 加载过程逐步减少为多个步骤以改善用户体验？

How to phase out the json loading process to multiple steps to achieve improved user experience?

javascript

java

pagination

json

lazy-evaluation