javascript - 如何检查资源是否从客户端的缓存加载？

Question

是否可以确定加载的 Web 资源(如 css、jscript、图像，甚至 html 本身)来自缓存还是未使用 javascript？

我正在尝试直接在我在开发模式下访问的每个页面上创建关于这些加载资源的简单报告，以避免每次都打开我的 google chrome 调试工具。

Answer 1

虽然没有使用 javascript 的直接方法来解决这个问题，但我们可以使用 windows.performance javascript API 使用一个肮脏的解决方法。下面给出的例子

var fileToLookup = "http://sample.com/img/loader.png";
var isCached = Boolean(_.filter(window.performance.getEntries(),function(a){ return a.duration > 0 && a.name == fileToLookup }).length) 

这里我们迭代页面引用的资源并按持续时间过滤。如果资源占用 > 0 毫秒，我们假设未缓存。再次， 这不是万无一失的方法 .