Javascript 如何判断网页资源何时被缓存？

JavaScript中有没有一种方法可以让我判断资源是否已经在浏览器缓存中

我们正在检测客户端页面视图的一小部分，以便我们能够获得关于用户页面加载速度的更好数据。用户第一次访问我们的站点时，浏览器会缓存大量资源（JS、CSS、图像），因此他们的初始页面浏览速度会比后续页面浏览速度慢

---

目前，这些数据是混合在一起的，因此很难区分初始页面加载和后续页面查看，因为其他原因，它们的速度很慢。我想要一种跨浏览器的方式来检查缓存是否已经启动，这样我就可以分离这两种页面视图并分别进行分析。

您需要一个插件来完成这项工作。一旦你安装了它（对于Firefox），你可以在“网络”选项卡上告诉你。JavaScript本身无法查看浏览器的HTTP流量。

没有用于检查资源是否缓存的JavaScript API。我认为最好的办法是检查加载资源所花的时间，并将加载时间较短的资源放在一起

在页面顶部：

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

var startPageLoad=new Date（）.getTime（）；

关于每个资源：

<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

var fooproblycached=whooloadtime<200；//加载foo.gif所用时间<200ms
var barProbablyCached=barLoadTime<200；//加载bar.gif所用时间<200ms

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

要验证它，您可以在Chrome上运行上面的行

• 如果浏览器已启用缓存，并且您的资源先前已加载适当的

  缓存控制

  标题，

  传输大小

  应为0
• 如果禁用缓存（网络选项卡->禁用缓存）并重新加载，

  transferSize

  应该大于0

---

正如我在问题中提到的，我正在对真实的页面视图进行客户端检测。我不太可能让我们的很多用户安装Firebug，尤其是那些不使用Firefox的用户。不喜欢真相并不是投反对票的理由。谢谢（你对另一个问题的回答可能很好，但在这里没有帮助。确保最有用的答案在页面顶部对我来说似乎是合理的使用上下投票。谢谢，安妮。这很有道理。当你混合使用脚本块和加载外部资源时，某些浏览器会很奇怪，因此这可能会影响并行下载。）您好，William，看看browserscope，看起来您需要注意的是一个样式表，后面紧跟着一个内联脚本：（其他并行下载问题都适用于外部脚本）。我的服务器计算一个变量并将其与Content-MD5头一起发送。客户端脚本将检查Content-MD5头是否存在并且是否大于以前的值。如果存在，则响应不会被缓存。出于安全原因，我会这样做。缺点：您必须等待加载ressource，然后才能说出它是缓存的还是not…不幸的是，safari还不支持

。transferSize

：(

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