GPT每日面试题—如何解决html、css、js等静态资源的缓存问题

充分利用ChatGPT的优势，帮助我们快速准备前端面试。今日问题：如何解决html、css、js等静态资源的缓存问题？

Q：如何解决html、css、js等静态资源的缓存问题，比如A用户正在用我的网站，我发布更新了网站内容，A用户即使刷新了浏览器也无法看到最新更新的内容

A：解决静态资源缓存问题可以通过以下几种方式：

公众号：Code程序人生，个人网站：https://creatorblog.cn

1. 文件版本控制：为每个静态资源文件添加版本号或时间戳作为查询参数，确保每次更新文件内容时，URL 都会变化，迫使浏览器重新请求新的文件。

<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>

或者可以使用构建工具自动添加版本号。

2. 设置缓存控制头：在服务器端配置静态资源的缓存控制头，通过设置 Cache-Control 和 Expires 头来控制缓存的有效期。

在 Apache 服务器上，可以通过 .htaccess 文件添加以下规则：

# 设置缓存有效期为一周
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>

在 Nginx 服务器上，可以通过配置文件添加类似的规则：

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
    expires 7d;
}

3. 使用服务端资源指纹：生成静态资源的哈希指纹，并将其嵌入到文件名或路径中，以保证每次文件内容变化时 URL 都会改变。

<link rel="stylesheet" href="styles.a1b2c3.css">
<script src="script.a1b2c3.js"></script>

4. 手动清除浏览器缓存：如果用户遇到缓存问题，可以通过手动清除浏览器缓存来获取最新的静态资源文件。通常，组合使用以上方法可以有效地解决静态资源缓存问题。