如何强制浏览器刷新缓存的 CSS 文件？

强制刷新缓存的 CSS 数据

更新网站 CSS 时会出现一个挑战：缓存了之前 CSS 的浏览器将不会收到版本更新，导致渲染问题。要解决此问题，可以采用多种方法强制浏览器获取并使用新的 CSS：

文件名或查询字符串修改：

• 文件名：将 CSS 文件的名称更改为不同但有意义的名称版本。
• 查询字符串： 将随机或特定于版本的参数附加到 CSS 文件的 URL。

HTTP 标头优化：

• 设置 HTTP 标头，例如 Cache-Control: no-cache 或 Expires： 0 覆盖浏览器缓存。

基于观察的缓存行为：

• 浏览器可以缓存带有过期标头的静态文件名，而随机查询字符串从未缓存。

参数和示例：

• 查询字符串（随机）：附加随机参数以强制执行新请求。

  <link href="style.css?v=[Random Value]" />

  登录后复制

• 查询字符串(Versioned): 附上版本号以表明更新CSS。

  <link href="style.css?v=2.1" />

  登录后复制

• 文件名修改：将 CSS 文件重命名为新版本。

  <link href="v2-style.css" />

  登录后复制

其他注意事项:

• 文件重命名为优于查询字符串修改，因为它不会影响缓存行为。
• 应始终设置 HTTP 标头以最大限度地发挥缓存优势。
• 浏览器和 Web 服务器行为可能会有所不同，从而导致意外结果。

以上是如何强制浏览器刷新缓存的 CSS 文件？的详细内容。更多信息请关注PHP中文网其他相关文章！