使用浏览器缓存进行增量更新

Question

客户端(AngularJS应用程序)从服务器获取相当大的列表.这些列表可能有数百或数千个元素,这可能意味着几兆字节未压缩(并且一些用户(管理员)获得更多数据).

我不打算让客户端得到部分结果,因为排序和过滤不应该打扰服务器.

压缩工作正常(大约10倍),因为列表不经常更改304 NOT MODIFIED,也有很多帮助.但是缺少另一个重要的优化:

由于列表的典型更改相当小(例如,修改两个元素并添加新元素),因此传输更改只是一个好主意.我想知道如何正确地做到这一点.

喜欢的东西GET /offer/123/items应该总是返回所有项目的报价号123,对不对？这里可以使用压缩和304,但没有增量更新.像GET /offer/123/items?since=1495765733听起来像是要走的路,但是浏览器缓存不会被使用:

• 或者没有任何改变,答案是空的(缓存它是没有意义的)
• 或者某些东西已经改变了,客户端更新了它的状态,并且从不再要求自1495765733以来的更改(并且缓存它更没意义)

显然,当使用"since"查询时,不会为"资源"缓存任何内容(原始查询只使用一次或根本不使用).

所以我不能依赖浏览器缓存,我只能使用localStorage或者sessionStorage,它有一些缺点:

• 它被限制在几兆字节(浏览器HTTP缓存可能会更大并自动处理)
• 当我达到极限时,我必须实施一些替换策略
• 浏览器缓存存储了我没有得到的压缩数据(我必须重新压缩它们)
• 它不适用于用户(管理员)获取更大的列表,因为即使单个列表可能已经超出限制
• 它在注销时被清空(客户的要求)

鉴于HTML 5和HTTP 2.0,这是非常令人不满意的.我错过了什么？

是否可以将浏览器HTTP缓存与增量更新一起使用？

Answer 1

我认为您缺少一件事：简而言之，标题。我认为你可以做的并且符合（大多数）你的要求的是：

• 首先GET /offer/123/items是正常进行，没有什么特别的。
• 后续请求GET /offer/123/items将带有标头发送Fetched-At: 1495765733，指示您的服务器何时发送初始请求。

从现在开始，有两种可能的情况。

• 要么不做任何改变，发送304即可。
• 但是，如果发生更改，请返回新项目，因为之前发送的时间戳具有标头，但请Cache-Control: no-cache从您的响应中设置 a。

这使您可以进行增量更新，并缓存初始兆字节大小的元素。

但仍然有一个缺点，即缓存仅执行一次，它不会缓存更新。你说你的列表不经常更新，所以它可能已经对你有用，但如果你真的想进一步推动这一点，我可以再想一件事。

收到增量更新后，您可以在后台触发另一个不带标头的请求Fetched-At，您的应用程序根本不会使用该标头，而只会更新您的 http 缓存。从性能角度来说，它不应该像听起来那么糟糕，因为您的框架不会使用新框架更新其数据（并可能触发重新渲染），唯一值得注意的缺点是网络和内存消耗。在移动设备上这可能会出现问题，但听起来并不像是一个打算在移动设备上显示的应用程序。

_{我绝对不知道你的用例，只会把它扔在那里，但你真的确定做某种分页不起作用吗？对于普通人来说，兆字节的数据听起来需要大量显示和处理；）}