2 站到底都缓存了些什么东西

无意间想起之前看到的关于 2 站缓存占用的问题，就去浏览器存储占用查看了下。占用 2G 多些，是所有网站占用最多的。一些 2 友反馈说是大多是图片缓存。我就打算研究下 2 站到底缓存了多少图片，能有 2 个 G，我记得之前占用最多有过 5G。

折腾过程简单总结下：
先是删除了 2 站的全部缓存占用，然后刷新下。网站会先预缓存大概 37M 的资源。再次刷新一下，好家伙，直接缓存占用直接到了 900M。注意看，这里有两个 cookie 占用，一个是 453M，另外一个也是 453M（已分区）。

可是图片缓存就只有 60 条，大多是表情图片，大小也就 10K 多些，gif 动图也才 1M 多。而且全部加一起实际占用也就 20M 左右。

看到缓存图片的 Response type 显示为 opaque，就问了 AI，发现了问题所在。

为避免跨网域信息泄露，在用于计算存储空间配额限制的不透明响应的大小中添加了大量填充。这会影响 navigator.storage API 报告存储空间配额的方式。

此内边距因浏览器而异，但对于 Chrome 来说，任何一个缓存的不透明响应在占用的总存储空间中所占的最小大小为大约 7 MB。

这样算的话，60 个图片缓存每个 7M，大概 400 多 M。再加上预缓存的占用，总共占用 450M，和存储统计用量 480M 大体符合。

但是为什么 Chrome 网站存储占用统计是 900 多 M，并且是两条占用相同。接下来我又反复测试，终于发现了新的线索。

当把Cookie里面的cf_clearance删除后，Chrome 网站存储占用里面的已分区那条就消失了。网站存储占用统计减半，而 DevTools 里的缓存占用不变。所以这个可能是 Chrome 对缓存数据的统计问题导致的。至于具体是什么原因，就交给站长吧。

所以折腾一圈下来发现，实际缓存占用就是预缓存的 30M 加上图片缓存的 20M，结果浏览器却统计成了 900 多 M。大家都错怪 Jimmy 了，不用再维权了哈哈。不过还是可以优化下缓存的机制。

参考资料：
1.建议改善一下缓存逻辑
2.2libra 已经变成我存储占用最大的网站了
3. what-limitations-apply-to-opaque-responses
4. caching-resources-during-runtime