google-chrome - Chrome 显示高缓存存储使用率

Question

我一直在分析复杂应用程序的缓存存储使用情况，当我意识到存储的具有一定内容长度的图像或脚本N实际上占用5N-10N了缓存存储空间。

考虑这个示例：我通过服务工作者从 OpenStreetMap 请求图像并将其存储在缓存中。缓存中仅存储一张图像。Chrome 版本是最新版本（版本 65.0.3325.146（官方构建）（64 位））。

这是刷新后缓存存储的视图：

这是清除缓存选项卡的视图：

因此，问题在于具有6.4KB实际大小的图像占用13.8MB了缓存存储空间。我错过了什么吗？

可以在https://googlechrome.github.io/samples/service-worker/basic/上看到实时示例- 少于几乎占用缓存存储 10KB的脚本。50KB

所以，问题是：当文件通过服务工作者缓存时，它们占用的空间怎么会显着增加？我同意实际请求比实际响应更重要，但不是10 倍。

可能有用的链接：

1. 显示高缓存存储利用率的 Chrome 开发工具
2. 服务工作者问题
3. https://bugs.chromium.org/p/chromium/issues/detail?id=795134

Answer 1

在 OSM 切片的情况下，高速缓存使用率来自不透明的请求。

当您缓存来自另一个域的内容时，您只能缓存它而不能以任何方式查看内容。这使得请求不透明。您不能摆弄代码中的内容，只能缓存它，它是一个黑匣子。为了避免信息泄漏，浏览器在缓存资源时会实现填充。因此，据报道 100kb 的图像占用 7mb 的缓存，实际报告的大小因浏览器而异。

这仅意味着您将能够在 SW 逻辑中缓存更少的不透明请求，然后才会引发超出配额的异常。所有缓存的请求——即使实际上非常小——在缓存中占用大量（填充的）空间以避免信息泄漏。

在第二种情况下，我认为这是一个错误。