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 dev tools showing high cache storage utilisation
2. Service Worker issues
3. https://bugs.chromium.org/p/chromium/issues/detail?id=795134

Answer 1

对于OSM磁贴，高缓存使用来自不透明请求。

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

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

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