问题

Question

问题

如何在单页应用中管理大量已过滤，已排序，分页的数据，这些应用也必须在资源有限的设备上运行（例如，移动设备）？

更具体地说;我有一个1000多个地理编码的地方信息对象的数据集，它被过滤到地图视口中包含的数据集。由于移动设备的内存限制，我无法缓存整个数据集。但是，由于移动设备上的网络连接速度较慢，我希望最小化HTTP请求。

最大缓存和最小网络请求组合的最佳策略是什么？

一些上下文

我正在为澳大利亚潜在的大型（1000+）信息数据集构建地图分割视图：

+----------------------------------------+-----------------------------+
|                                        |             +----------+    |
|                                        |    Sort By: |Suburb |\/|    |
|                                        |             +----------+    |
|                                        |+---------------------------+|
|                _,__        .:          ||                           ||
|               <*  /        | \         ||  Blah Blah                ||
|           .-./     |.     :  :,        ||                           ||
|          /           '-._/     \_      ||  Zoom Zip                 ||
|         /                '       \     ||                           ||
|       .'                         *:    |+---------------------------+|
|    .-'                             ;   |+---------------------------+|
|    |                               |   ||                           ||
|    \                              /    ||  Bing Bong                ||
|     |                            /     ||                           ||
|      \*        __.--._          /      ||  Banana for scale         ||
|       \     _.'       \:.       |      ||                           ||
|       >__,-'             \_/*_.-'      |+---------------------------+|
|                                        |+---------------------------+|
|                            :--,        ||                           ||
|                             '/         ||  Whoopty Doo              ||
|                                        ||                           ||
+----------------------------------------+-----------------------------+

驾驶要求是：

必须使用旧/慢移动/平板电脑以及现代桌面。
必须能够滚动右侧列表中的整个数据集。
必须能够通过移动/缩放地图来过滤列表。
必须能够更改排序顺序（按位置，名称，ID等）。

我尝试过什么

我经历了几次迭代处理app *中的数据：

迭代1（天真）

将整个数据列表加载到内存中并立即渲染。

由于列表中的每个项目可能包含大量数据（采用JSON格式），因此移动设备上的内存限制会出现问题。

在一次加载整个列表时，还有其他考虑因素会重载DOM（浏览器中的渲染时间使应用程序无法使用）。

迭代2（延迟加载）

实施延迟加载的无限滚动（a-la Twitter / Facebook）。

这样做＆＃34;页面＆＃34;在一个时间（一个页面约30项），我们解决了初始内存需求，但滚动到目前为止，我们再次在移动设备上达到了极限。

现在手机上还有一个网络要求 - 遗憾的是，GPRS / EDGE速度在澳大利亚仍然很常见，而且非常糟糕。

迭代3（数据卸载）

从内存/ DOM中卸载旧数据以保持移动快速

可以使用空占位符替换旧DOM元素（以保持滚动的可供性），并且可以从内存中删除列表中的关联项。这解决了DOM限制问题。

但是，如果用户向上滚动列表，我们现在已经加倍了网络负载。即;没有缓存的数据了。

迭代4（缓存和懒惰卸载）

缓存X旧结果的数量（其中X可以由设备的内存功能确定），以FIFO为基础卸载。

所以我们的缓存现在可以保持温暖，滚动回来应该是一个没有网络请求的即时加载。

但是如果用户改变过滤器/分类标准怎么办？单个缓存不再有效，因为列表中的结果可能需要重新过滤并重新排序才能显示。

由于数据集是延迟加载的，因此应用程序没有完整的数据集来正确执行过滤和排序，因此需要HTTP请求。

最糟糕的情况是用户稍微平移地图。 1-2个项目可能会从一侧掉落，而2-3可能会在另一侧添加。现在，我们不是重新使用任何可能缓存的数据，而是通过网络请求不必要地重新加载。

迭代5（增量结果）

通过请求的已知id列表，只接收结果的增量

这样可以节省通过网络下载的数据。但是，可能会导致大量数据 up 发送，因此API可以执行增量。

迭代6（已知范围）

永远不要重新请求属于已知范围的数据

范围可以是可见边界框的子集（想想空间分区），也可以是＆＃34;页面＆＃34;滚动等时的30个结果

这解决了网络流量过大（上下）的问题，但我担心存储已知范围所需的元数据也可能达到移动设备的内存限制。

迭代7（降级功能）

删除整个列表必须可滚动的要求。

通过删除此要求，我们可以将显示的结果限制为最大值，例如50-100，并且当我们在设备上运行时，坚持使用迭代1（朴素）方法检测到能力有限。

问题（再次）