javascript - HTML - 如何检查文件(.js 或 .css)是否已加载或从缓存中获取？

Question

首先，我需要一种方法来强制浏览器始终加载 .css 和 .js 文件。我通过在文件中添加后缀解决了这个问题:

之前:

<script type="text/javascript" src="file.js"></script>

之后:

<script type="text/javascript" src="file.js?v=1"></script>

这显然奏效了。

现在，我需要知道这是否真的有效。当然，我可以编辑文件并检查浏览器中的更改，但我需要一种更具体的方法，例如浏览器中显示“从缓存加载文件”/“从文件夹加载新文件”的选项。

你能帮帮我吗？

Answer 1

在 Chromium/Chrome 浏览器中打开开发人员工具(alt + cmd/ctrl + I，或右键单击窗口并点击检查元素)，然后单击网络选项卡它是大小Status 属性告诉您 Assets 是否来自浏览器缓存，以及是否向服务器发出了检查 Assets 是否过时的请求。

人们可能将 304 误认为是浏览器缓存的理想选择的原因是，如果您通过刷新发送请求来检查响应，浏览器会添加一个 header ，强制对服务器进行检查。

因此，如果 Assets /资源保存在您的浏览器中，您将始终检查服务器是否过时并因此获得 304。

如果您事先打开了开发者工具，那么点击地址栏并按回车键而不是刷新，您应该得到一个状态:200 OK 大小:(来自缓存).

如果出于任何原因您没有看到带有大小的列，请右键单击该窗口并从属性列表中选择它。

** 注意:如果您在同一浏览器 session 期间刷新，较新版本的 Chrome 看起来不再发送强制重新验证 header 。相反，您会看到 200: 来自内存缓存。