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

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).

这样做一个"页面"(页面大约是30个项目),我们解决了初始内存需求,但是在滚动到目前为止我们再次在移动设备上达到了极限.

现在移动网络也有网络要求 - 遗憾的是,GPRS/EDGE速度在澳大利亚仍然很常见,而且非常糟糕.

迭代3(数据卸载)

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

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

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

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

• 缓存X个旧结果(其中X可以由设备的存储器功能确定),以FIFO为基础卸载.

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

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

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

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

迭代5(增量结果)

• id使用请求传递已知s 的列表,并仅接收结果的增量

这样可以节省通过线路下载的数据.但是,可能会导致大量数据通过线路发送,因此API可以执行增量.

迭代6(已知范围)

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

范围可以是可见边界框的子集(想想空间分区),或滚动时的30个结果的"页面"等.

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

迭代7(降级功能)

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

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

---

问题(再次)

如何在单页面应用程序中管理大量已过滤,已排序,分页的数据,这些应用程序还必须在资源受限的设备(例如,移动设备)上运行？

---

*注意:我已经通过使用基于当前缩放级别的聚类技术找出了地图上数据的渲染,所以这不是问题

Answer 1

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