显示高缓存存储利用率的Chrome dev工具

Question

我分析了我们在网站上实现的服务人员和缓存存储。

在整个过程中，我发现网站使用的缓存存储量很大。

我要添加到缓存存储中的文件的累积大小不超过5-6MB。但是在chrome工具中，它显示了大约使用的131 MB存储。

操作系统X上的Chrome 63。

​

​

在隐名模式下，它的使用率与100 MB一样高，从而导致了Quota Exceeded error。

即使清除了chrome设置中的浏览数据，并重新加载了网页(带宽速度-1 1MBps)，4-5秒后，存储空间的使用仍然显示为130 MB，这实际上是不可能的，因为

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

2)即使它以某种方式获得130 MB (我不知道如何下载)，但鉴于我的带宽限制，下载130 MB是不可能的。

这里可能有什么问题？为什么它显示出如此高的缓存存储使用率？

Answer 1

这个问题是Chrome显示高速缓存存储的使用的重复，在它被关闭之前，我将在这里留下一个可见性的答案。请随时在结束后删除。

另见不透明反应的局限性。

TL;DR

每个不透明的响应(在没有启用CORS时向远程原点发出请求的结果)，甚至是一个100字节的GIF，都采用平均7MB缓存。

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