HTML - 如何检查文件（.js 或 .css）是否已从缓存中加载或提取？答案

【问题标题】：HTML - How can I check if a file (.js or .css) was loaded or picked up from the cache?HTML - 如何检查文件（.js 或 .css）是否已从缓存中加载或提取？
【发布时间】：2014-04-09 12:39:14
【问题描述】：

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

之前：

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

之后：

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

这显然奏效了。

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

你能帮帮我吗？

【问题讨论】：

使用你的开发者工具的Network标签，看看响应是200还是304。
谢谢@cookiemonster。
@cookiemonster 这不完全正确。实际上，您理想情况下想要的是 200（来自缓存）响应，如果状态列是 200，您将在“网络”选项卡下看到，如果资产是从浏览器缓存加载的，则大小列将显示（来自缓存） .我将在答案中进一步解释。

标签： javascript html css caching browser

【解决方案1】：

在 Chromium/Chrome 浏览器中打开开发工具（alt + cmd/ctrl + I，或右键单击窗口并点击检查元素），然后单击 Network Tab 它是大小和 Status 属性，告诉您资产是否来自浏览器缓存，以及是否向服务器发出请求以检查资产是否过时。

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

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

如果你事先打开了开发者工具，而不是刷新，只需点击地址栏并回车，你应该会得到一个状态：200 OK size:(from cache) em>。

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

** 注意：如果您在同一浏览器会话期间刷新，较新版本的 Chrome 看起来不再发送强制重新验证标头。相反，您会看到 200: from memory cache。

【讨论】：

【解决方案2】：

从服务器加载资源或从缓存中获取资源是浏览器的职责范围。从客户端代码中，您无法确定实际使用的源（如果您不使用 ajax 动态加载资源）。只有您可以查看开发人员工具（或 Firebug）中的网络选项卡。

【讨论】：