javascript - 在资源有限的浏览器(移动)中管理大型数据集的缓存

Question

问题

如何在单页应用程序中管理大量过滤、排序、分页的数据，该应用程序也必须在资源有限的设备(例如移动设备)上运行？

进一步来说;我有一个包含 1000 多个地理编码位置信息对象的数据集，这些对象被过滤到 map 视口(viewport)中包含的那些对象。由于移动设备上的内存限制，我无法缓存整个数据集。但是，由于移动设备上的网络连接速度较慢，我想尽量减少 HTTP 请求。

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

一些上下文

我正在为澳大利亚潜在的大型(1000+)信息数据集构建 map 拆分 View :

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

驾驶要求是:

必须在旧/慢速移动/平板电脑以及现代台式机上工作。

必须能够滚动浏览右侧列表中的整个数据集。

必须能够通过移动/缩放 map 来过滤列表。

必须能够更改排序顺序(按位置、名称、ID 等)。

我试过的

我经历了几次处理应用程序中数据的迭代*:

迭代 1(天真)

将整个数据列表加载到内存中并一次性渲染。

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

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

迭代 2(延迟加载)

实现延迟加载的无限滚动(a-la Twitter/Facebook)。

一次做一个“页面”(其中一个页面大约有 30 个项目)，我们解决了初始内存需求，但是在滚动到这里之后，我们再次在移动设备上达到了限制。

现在对移动设备也有网络要求——不幸的是，GPRS/EDGE 速度在澳大利亚仍然很普遍，而且真的很糟糕。

迭代 3(数据卸载)

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

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

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

迭代 4(缓存和延迟卸载)

缓存 X 数量的旧结果(其中 X 可以由设备的内存容量决定)，在 FIFO 基础上卸载。

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

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

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

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

迭代 5(增量结果)

传递已知列表id s 与请求，并且只接收结果的增量

这可以保存通过网络下载的数据。但是，可能会导致大量数据通过线路发送，因此 API 可以执行增量。

迭代 6(已知范围)

永远不要重新请求落在已知范围内的数据

范围可以是可见边界框的子集(想想空间分区)，也可以是滚动时包含 30 个结果的“页面”等。

这样就解决了网络流量(上下)过多的问题，但恐怕存储已知范围所需的元数据在移动设备上也可能达到内存限制。

迭代 7(降级功能)

取消整个列表必须可滚动的要求。

通过取消此要求，我们可以将显示的结果限制为最大值，例如 50-100，并坚持使用 迭代 1(天真)当我们在检测到功能受限的设备上运行时的方法。

问题(再次)

如何在单页应用程序中管理大量过滤、排序、分页的数据，该应用程序也必须在资源有限的设备(例如移动设备)上运行？

* 注意:我已经通过基于当前缩放级别的聚类技术计算了 map 上数据的渲染，所以这不是问题

Answer 1

您最好的选择是以非常不同的方式实现它。我通常做的是采用分层方法。在您的情况下，也许您应该按州，然后按城市等设置第一个聚合层。这样您就不会一次加载数百个数据点，顺便说一下，这不是您的用户想要的:它们通常是寻找特定的或聚合的数据 - 但永远不要寻找成千上万的结果来手动浏览。