如何判断网页资源是否被缓存？

Question

在JavaScript中，我怎样才能知道一个资源是否已经存在于浏览器缓存中？

我们正在对一部分客户端页面视图进行测试，以便更好地了解用户页面加载的速度。当用户第一次访问我们的站点时，浏览器会缓存一些资源（JS、CSS、图像），因此他们的初始页面加载速度会比后续的快。

现在，这些数据是混合在一起的，因此很难区分初始页面加载和由其他原因导致的后续页面视图的缓慢。我希望有一种跨浏览器的方法来检查缓存是否已经准备好，以便我可以将这两种类型的页面视图分开并单独分析它们。

- William Pietri

Answer 1

你应该使用“传输大小”（TransferSize）：

您应该使用传输大小：

window.performance.getEntriesByName("https://[resource-name].js")[0].transferSize

为了验证它，您可以在Chrome上运行上面的代码...

• 如果浏览器启用了缓存，并且您的资源以正确的cache-control头部加载过，则transferSize应该为0。
• 如果禁用缓存（网络选项卡 -> 禁用缓存）并重新加载，则transferSize应该大于0。

- Andre Pena

---

很遗憾，Safari目前还不支持.transferSize :( - kigiri

Answer 2

没有适用于检查资源是否被缓存的JavaScript API。我认为你能做的最好的事情是检查加载资源所需的时间，并将那些加载时间较短的资源放在一起。

页面顶部：

<script>var startPageLoad = new Date().getTime();</script>

在每个资源上：

<img src="foo.gif" onload="var fooLoadTime = startPageLoad - new Date().getTime()">
<script src="bar.js" onload="var barLoadTime = startPageLoad - new Date().getTime()">

在报告加载时间时：

var fooProbablyCached = fooLoadTime < 200; // Took < 200ms to load foo.gif
var barProbablyCached = barLoadTime < 200; // Took < 200ms to load bar.gif

您可能需要在IE中使用onreadystatechange事件而不是onload。

- Annie

---

谢谢，Annie。这非常有道理。当您混合使用脚本块和加载外部资源时，某些浏览器可能会出现问题，因此这可能会影响并行下载；我会尝试一下看看。 - William Pietri

嗨，William，看起来你需要注意的是紧接着样式表的内联脚本：http://www.browserscope.org/?v=top&category=network（其他并行下载问题都适用于外部脚本）。 - Annie

我的服务器会计数一个变量并将其与Content-MD5头一起发送。客户端脚本将检查Content-MD5头是否存在且比以前大。如果是，响应就不会被缓存。出于安全原因，我会这样做。 - B.F.

缺点：在能够判断是否已缓存之前，您必须等待资源加载完成... - abernier

Answer 3

您需要一个插件来完成此操作。Firebug 可以在您安装它后（适用于 Firefox），在“NET”选项卡上告诉您。JavaScript 本身无法查看浏览器的 HTTP 流量。

- Diodeus - James MacFarlane

---

正如我在问题中提到的，我正在对真实页面视图进行客户端检测。很少有用户会安装Firebug，特别是那些不使用Firefox的用户。 - William Pietri

不喜欢事实并不是对其进行反对票的理由。谢谢。:( - Diodeus - James MacFarlane

你的答案可能在其他问题上还不错，但在这里没有帮助。对我来说，确保最有用的答案出现在页面顶部是使用投票的一个合理方式。 - William Pietri