Chrome开发工具显示高缓存存储利用率

Question

我正在分析我们在网站上实施的服务工作者和缓存存储。

通过这个过程，我发现网站使用的缓存存储量很大。

我添加到缓存存储的文件的累积大小不超过5-6 MB。但是在chrome dev工具中，它显示了大约130 MB个存储空间。

chrome - v 63。
OS - osx

在隐身模式下，它会显示高达100 MB的使用率，从而导致Quota Exceeded error。

即使在从Chrome设置中清除浏览数据并重新加载网页（带宽速度 - 1MBps）之后，仅在4-5秒之后，存储使用显示为130 MB，这实际上是不可能的，因为

1）如上所述，我添加到缓存的实际数据大小为5-6 MB。

2）即使它以某种方式获得130 MB（我也不知道如何），考虑到我的带宽限制，下载130 MB是不可能的。

这可能是什么问题？ 为什么它会显示如此高的缓存存储空间？

Answer 1

这个问题是Chrome shows high cache storage use的重复，在被关闭之前，我将在此处留下可见性的答案。关闭后随时删除。

另请参阅limitations of opaque responses。

TL; DR

每个不透明的响应（在未启用CORS时向远程源发出的请求的结果），甚至是100字节的GIF，平均也要花费7MB of cache。

解决方案包括在crossorigin="anonymous"和script标签中添加img，并删除{ mode: 'no-cors' }。