Handing/Displaying 客户端选项卡中的大量数据

Handing/Displaying large amounts of data in tabs on client side

我正在开发一个应用程序,它本质上是:用户选择数据组,在页面中创建一个新选项卡,并从 restful 服务加载数据(可能需要大约 10 秒的时间,数量较大要显示的数据)

我想知道是否有人对处理此类问题或任何示例有任何建议。目前我有三种方法,但 none 看起来很理想:

  1. 将数据存储在 angular 中的选项卡对象中(使得打开新数据和导航非常慢)
  2. 每次选择该选项卡时加载数据(可能需要大约 10 秒,但不会影响任何其他内容)
  3. 在不同的页面上托管数据并通过 iframe 显示,但我决定不这样做,因为当用户选择不同的选项卡时 iframe 会重新加载。

有没有人处理过类似的用例并且对不确定应该走哪条路的人有一些建议?谢谢

在这种情况下,您应该尝试的第一件事就是优化您的请求。

一个好的策略是拆分您的请求。如果需要 10 秒,很可能在 window 中有更多数据可供用户查看。因此,您可以执行多个较小的请求并在它们解析时呈现它们。这样,您的用户将立即看到一些内容,而不会意识到正在加载更多内容。您还应该研究 lazy loading 基本上,只有在您的用户绝对需要时才提出您的请求。

如果这不可能,您可以预先加载选项卡中的所有数据(尽快发出所有请求)但不要立即呈现它以避免让 angular 观看太多而减慢导航速度它的摘要周期中的数据是不可见的。您可以通过在选项卡内容上使用 ng-if 指令(ng-if 从 dom 中删除内容)来执行此操作。但是,这不是最佳选择,因为如果用户速度太快,数据可能还没有准备好。