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

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) 

这里我们正在迭代页面引用的资源，并按持续时间进行过滤。如果资源占用的时间> 0ms，则假定资源未缓存。同样，这不是万无一失的方法。

Answer 2

您应使用TransferSize：

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

[要验证，您可以在Chrome上运行它。如果在浏览器上启用了缓存，并且您的资源先前已使用正确的cache-control标头加载，则transferSize应该为0。如果禁用缓存（“网络”选项卡->禁用缓存），则会看到真实的transferSize。

Answer 3

有许多解决方案可以防止浏览器缓存资源，例如：

1. 文件名中的版本号（对于程序员来说是简单的方式，而不是系统管理员）
2. 修改Apache ETags

您可以在文件名后添加资源版本号。每次修改媒体文件（Images / JS / CSS）时，您都会更新资源版本。

<?php $resourceVer = '201404151859'; ?>
<script src='scripts/main.js?v=<?=$resourceVer?>'></script>
<link rel='stylesheet' href='style/main.css?v=<?=$resourceVer?>' />

目标：？v = 201404151859是假的，浏览器中存在main.js的不同文档，main.js？v = 201404151859