服务工作人员从缓存服务时速度变慢

时间:2018-03-07 19:40:24

标签: service-worker html5-appcache

我有一些资源需要缓存并以最快的速度提供给我的应用。

当我使用appcache时,我获得了很好的服务速度,但我被一个appcache困住了。

所以我用服务工作者替换了它。

然后我尝试了最简单的策略,只需在安装时缓存静态资产,并在获取时从缓存中提供它们。

当我查看chrome的网络面板时,我很高兴看到我的服务人员正在运行,但是 - 加载时间非常糟糕,每个资源加载时间加倍。

所以我开始考虑其他策略,here你可以找到很多策略,缓存和网络竞赛听起来很有趣,但我被数据使用所阻止。

所以我尝试了不同的东西,我试图积极地将资源缓存在服务工作者的记忆中。每当我的服务工作者启动并运行时,它就会从缓存中汇集相关资源,并将响应对象保存在内存中以供以后使用。当它获得匹配的提取时,它只响应内存响应的克隆。

这个策略被证明是最快的,这是我做的比较:

caching speed comparison

所以我的问题很模糊,因为我对服务工作者的理解仍然很模糊......

这一切都有意义,我可以将静态资源缓存保存在内存中吗? 臃肿的内存使用情况如何呢?这有什么负面影响吗?例如 - 浏览器可能会更频繁地关闭内存消耗较高的服务工作者。

1 个答案:

答案 0 :(得分:2)

由于(至少)两个原因,您不能依赖将Response个对象保留在服务工作者的内存中,然后直接与它们一起响应:

  • 服务工作者的生命周期很短,每次服务工作者重新启动时,服务工作者全局范围内的所有内容都为cleared
  • 您只能阅读一次Response对象的正文。使用fetch对象响应Response请求将导致其正文被读取。因此,如果您在清除服务工作者的全局范围之前有两个同一URL请求,则第二次使用Response将失败。 (您可以通过致电clone()上的Response并使用克隆回复fetch事件来解决此问题,但之后又会引入额外的开销。)

如果您发现将服务工作人员的回复显着放慢回到您的网页,我会花些时间深入了解您的服务工作者代码实际上是什么样的 - 以及客户端页面上的代码看起来像。如果您的客户端页面的主JavaScript线程被锁定(例如由于重量级的JavaScript操作需要一段时间才能完成而且永远不会产生),这可能会导致延迟从服务工作者获取响应到客户端页面。

分享有关您如何实施基于缓存的服务工作者的更多详细信息将是一个良好的开端。