Question

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

我们正在检测客户端页面视图的一小部分，以便我们可以获得有关为用户加载页面的速度的更好数据。用户第一次到达我们的网站时，浏览器会缓存许多资源（JS，CSS，图像），因此他们的初始网页浏览速度将比后续浏览器慢。

现在，这些数据混合在一起，因此很难说出后续网页浏览中的初始页面加载由于其他原因而变慢。我喜欢一种跨浏览器的方式来检查缓存是否已经准备就绪，这样我就可以将两种分页视图分开并分别进行分析。

Answer 1

没有用于检查资源是否被缓存的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。

Answer 2

您应该使用TransferSize：

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

要进行验证，您可以在Chrome上运行以上代码...

如果浏览器已启用缓存，并且您的资源先前已使用正确的cache-control标头加载，则transferSize应该为0。
如果您禁用缓存（“网络”标签->禁用缓存）并重新加载，则transferSize应该大于0。

Answer 3

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

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

3 个答案: