如何知道图像是从用户的网络缓存中提取还是如何获得准确的加载时间？

Question

我正在使用一个JavaScript脚本,告诉我是否在用户的浏览器缓存中缓存了特定的图像URL.我正在使用它,因为我构建了一系列非缓存图像,这些图像将在完成更重要的过程后单独加载.此脚本专为Google Chrome编写,因此我不需要跨浏览器解决方案.

我当前的函数检查加载图像所花费的时间,如果它小于几毫秒(目前为25毫秒),我认为它是从缓存中提取的.

通过查看Chrome开发人员工具中的资源面板,可以轻松手动查看缓存图像和非缓存图像之间的区别.当悬停加载时间时,Chrome会通过打印如下所示的工具提示来判断文件是否已从缓存中拉出:xx ms Latency, xx ms Download (from cache).

我注意到在某些情况下,延迟时间很长(例如64ms,下载时间仅为2ms)并且使得我的检测功能无用,因为总加载时间超过了我的阈值.不可能增加阈值,因为小的且未缓存的图像也可以在相同的时间内加载.

既然你遇到了我的问题,这就是我的问题:

- 是否有可能以100%准确的方式检查(例如chrome的资源面板)该文件来自缓存？(我想如果该小组这样做,必须有一种方法,但我无法在互联网上找到它)

要么

- 有没有办法将两个延迟(即延迟与下载)分开才能检查真正的下载时间？计算开始加载图像和onload事件之间所花费的时间将返回总时间.

---

感谢您阅读我的问题,即使您没有精确的解决方案,也欢迎提出想法和想法!

(PS:我不是母语为英语的人,所以请不要因为犯错而责怪我!)

盖尔

Answer 1

很抱歉错误地回答了您。

我做了一些测试并发现了以下结果：304 not modified仅当资源过时并由服务器通过If-None-Match/进行验证时才会出现标头If-Modified-Since。当资源仍然新鲜且不需要验证时，返回的状态码为200 Ok。

然而，似乎有一个 Age 标头表明资源正在被缓存。所以我想我可以切换到 PHP 并做类似的事情if status code is 304 or Age header exists then resource is cached。但是如果没有Cache-Control: max-age=xx标题怎么办？一旦资源被缓存并且是新鲜的，是否就会有一个 Age 标头？

周一将进一步调查并在此处更新。