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

Question

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

我们正在对一小部分客户端页面浏览量进行检测，以便我们可以更好地了解用户的页面加载速度。用户第一次访问我们的网站时，浏览器会缓存一些资源(JS、CSS、图像)，因此他们的初始页面浏览量会比后续页面慢。

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

Answer 1

你应该使用 TransferSize :

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

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

• 如果浏览器启用了缓存，并且您的资源之前已使用正确的 cache-control header 加载，则 transferSize 应为 0。
• 如果禁用缓存(网络选项卡 -> 禁用缓存)并重新加载，transferSize 应 > 0。