1. 介绍
在开发和部署网页时，经常会修改一些 JavaScript（JS）和层叠样式表（CSS）文件。然而，由于浏览器的缓存机制，有时候新的更改可能不会立即生效，而是继续使用旧的缓存文件，导致页面的显示不符合预期。
为了解决这个问题，我们可以通过在文件名或文件的 URL 中添加一个版本号或时间戳来确保每次更新后都能正确地加载新文件。本文将介绍如何使用 HTML 页面自动清理 JS 和 CSS 文件的缓存，以确保用户在访问网页时总是获取最新的文件。
2. 添加版本号
一种常见的方法是在文件名中添加版本号，每次更新文件时递增版本号。这样，当用户请求页面时，浏览器会根据文件名中的版本号来判断是否需要使用缓存的文件还是重新下载新文件。
2.1 HTML 中添加版本号
在 HTML 文件中，可以使用以下代码来引用 JS 和 CSS 文件：
<link rel="stylesheet" type="text/css" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>
上述代码中的 v=1.0 表示此文件的版本号为 1.0。每次更新文件时，只需要将版本号递增即可。
2.2 服务器配置
假设网站是托管在 Apache 服务器上的，我们可以通过修改服务器的配置文件来实现自动添加版本号。
打开 Apache 的配置文件 httpd.conf，找到以下行：
AddType application/x-httpd-php .php
在该行后面添加以下代码：
FileETag MTime Size这会告诉服务器根据文件的修改时间和大小来生成一个唯一的 ETag 值。当文件发生更改时，ETag 值也会随之更改，从而迫使浏览器重新下载新文件。
注意：如果网站使用其他服务器软件（如 Nginx），则需要查找相应服务器的配置方法来实现相同的功能。
3. 时间戳
除了使用版本号外，还可以通过在文件 URL 中添加时间戳来清除缓存。时间戳是一个唯一的字符串，每次更新文件时都会生成一个新的时间戳。
3.1 HTML 中添加时间戳
在 HTML 文件中，可以使用以下代码来引用 JS 和 CSS 文件：
<link rel="stylesheet" type="text/css" href="styles.css?t=1234567890">
<script src="script.js?t=1234567890"></script>
上述代码中的 t=1234567890 表示此文件的时间戳为 1234567890。每次更新文件时，只需要生成一个新的时间戳即可。
3.2 服务器配置
与添加版本号的服务器配置方法类似，可以在 Apache 的配置文件中添加以下代码：
FileETag MTime Size4. 缓存控制
除了在引用文件时添加版本号或时间戳，还可以使用缓存控制标头来告诉浏览器如何处理文件的缓存。可以在服务器的响应头中添加以下标头：
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
上述代码会告诉浏览器不对文件进行缓存，并要求每次都从服务器重新获取文件。
5. 结论
在开发和部署网页时，确保用户能够获取最新版本的 JS 和 CSS 文件非常重要。通过添加版本号或时间戳以及设置合适的缓存控制标头，可以有效地清除文件缓存，并确保用户在访问网页时总是获取最新的文件。
综上所述，本文介绍了如何在 HTML 页面中自动清理 JS 和 CSS 文件的缓存。希望本文对您有所帮助，谢谢阅读！