javascript - 前端监控针对静态资源加载时间采集，PerformanceResourceTiming有办法知道资源是否是通过协商缓存加载的吗？

Question

除了deliveryType外，有兼容性更好的方案了解是否是通过缓存加载的吗

Answer 1

用 responseStatus 属性:

const observer = new PerformanceObserver((list) => {  list.getEntries().forEach((entry) => {    if (entry.responseStatus === 304) {      console.log(`${entry.name} was loaded from cache`);    }  });});observer.observe({ type: "resource", buffered: true });

或者用 transferSize 属性可以用来检查本地缓存有没有命中，如果 transferSize 的值为 0，就表示资源是从缓存加载的，不是从网络加载的

Answer 2

PerformanceResourceTiming API 可以提供关于网页上每个资源加载时间的信息，包括是否从缓存中加载资源。但是，它并不能直接告诉你资源是否通过协商缓存（Negotiated Cache）加载的。

协商缓存是通过服务器和客户端之间协商决定是否使用缓存的一种机制。在 HTTP/1.1 协议中，服务器和客户端会首先通过 "Pragma" 和 "Cache-Control" 头字段进行协商。

要了解一个资源是否通过协商缓存加载的，需要分析 HTTP 头字段。PerformanceResourceTiming 的 initiatorType 可以告诉你请求是怎样开始的，可以用来推测资源是否从缓存中加载。例如，如果 initiatorType 是 "from_cache"，那么资源很可能是从缓存中加载的。但是这并不是绝对的，因为 "from_cache" 也可以表示资源是由浏览器缓存而不是协商缓存加载的。

在实践中，要想准确了解资源是否通过协商缓存加载的，最好的方式可能还是通过服务器日志或者使用网络监视工具（如 Chrome 的开发者工具）来查看具体的 HTTP 头字段。

另外，要注意的是，不是所有的浏览器都支持 PerformanceResourceTiming API，你可能需要检查你的目标浏览器是否支持这个 API。在某些情况下，你可能需要使用 polyfill 或者其他替代方案。