如何检查客户端是否从缓存加载资源？

Question

是否有可能使用JavaScript确定已加载的Web资源，例如CSS、JScript、图像，甚至HTML本身是来自缓存还是非缓存？

我正在尝试在我的开发模式下直接在每个页面上创建一个简单的报告，以避免每次都打开Google Chrome调试工具。

- Bertie

---

链接到https://dev59.com/bnM_5IYBdhLWcg3w3nRs。 - Sen Jacob

Answer 1

虽然没有直接的方法可以使用JavaScript来解决这个问题，但我们可以使用windows.performance JavaScript API来使用一个不太正当的解决方案。下面是一个示例：

var fileToLookup = "http://sample.com/img/loader.png";
var isCached = Boolean(_.filter(window.performance.getEntries(),function(a){ return a.duration > 0 && a.name == fileToLookup }).length) 

在这里，我们正在迭代页面引用的资源并按持续时间进行过滤。如果一个资源花费了> 0ms的时间，我们就认为它没有被缓存。再次强调，这不是绝对可靠的方法。

- Sriram

---

我在我的网站上执行 window.performance.getEntriesByName("resource.js")[0].duration，即使是带有正确的 cache-control 标头的资源，持续时间始终大于 0。我的意思是，它们应该被缓存。 - Andre Pena

例如，您可以在Stackoverflow上尝试使用以下代码：window.performance.getEntriesByName("https://www.google-analytics.com/analytics.js")[0].duration。它不是零。 - Andre Pena

我想你应该只使用 transferSize。请查看我的答案。 - Andre Pena

@AndrePena 当存在CORS限制且不允许读取值时，transferSize也可以为零。 - Tushar Shahi

Answer 2

有许多解决方案可以防止浏览器缓存资源，例如：

1. 在文件名中添加版本号（对程序员来说是简单的方式，而不是系统管理员）
2. 修改Apache ETags

您可以在文件名后面添加资源版本号。每次修改媒体文件（图像/JS/CSS）时，都要更新资源版本。

<?php $resourceVer = '201404151859'; ?>
<script src='scripts/main.js?v=<?=$resourceVer?>'></script>
<link rel='stylesheet' href='style/main.css?v=<?=$resourceVer?>' />

目标：?v=201404151859是伪造的浏览器，有不同的main.js文档，main.js?v=201404151859。

- Allen Chak

---

虽然您的回答包含了事实信息，但它并没有回答所提出的问题。它“强制”下载资源，而不是“报告”它们是否从缓存中加载。我给您的回答打-1分。 - enhzflep