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

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

之前：

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

之后：

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

这很有效

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

---

您能帮助我吗？

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

在Chrome/Chrome浏览器中，打开开发者工具（alt+cmd/ctrl+I，或右键单击窗口并点击inspect元素），然后单击“网络”选项卡“大小和状态”属性会告诉您资产是否来自浏览器缓存，以及是否向服务器发出了检查资产是否过时的请求

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

因此，如果资源/资源保存在浏览器中，您将始终检查服务器是否过时，从而获得一个304

如果您事先打开开发人员工具，那么只需单击地址栏并按enter键，而不是刷新，您应该会得到一个状态：200 OK size:（来自缓存）

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

---

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

使用开发工具的

网络

选项卡，查看响应是否为

200

vs

304

。谢谢@cookiemonster。@cookiemonster这不完全正确。事实上，理想情况下您需要的是200（来自缓存）响应，如果status列为200，则在Network选项卡下可以看到，如果资产是从浏览器缓存加载的，则size列将显示（来自缓存）。我将在回答中进一步解释。