首页 >web前端 >css教程 >如何强制刷新缓存的 CSS 数据:查询字符串与文件重命名?

如何强制刷新缓存的 CSS 数据:查询字符串与文件重命名?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-08 04:37:01656浏览

How to Force a Refresh of Cached CSS Data: Query String vs. File Renaming?

如何强制刷新缓存的 CSS 数据

更新网站的 CSS 时,浏览器可能会继续缓存过时的版本,从而导致渲染问题。本文探讨了强制刷新缓存 CSS 的几种方法。

TL;DR

要解决缓存问题,请考虑以下选项:

  • 修改文件名或查询字符串
  • 实现每个版本仅发生一次的更改
  • 优先于查询字符串更改进行文件重命名
  • 设置最佳 HTTP 标头以最大化缓存优势

深入分析

我们想要实现什么?
理想的缓存行为包括在第一次请求新资源时获取新资源并检索它此后,它会从本地缓存中删除,直至过期。

观察到的缓存行为
为了了解浏览器的缓存行为,表格总结了各种场景及其观察到的结果。

Type Cache Headers Observed Result
Static filename Expiration 1 Year Taken from cache
Static filename Expire immediately Never caches
Static filename None HTTP 304 (not modified)
Static query string Expiration 1 Year HTTP 304 (not modified)
Static query string Expire immediately HTTP 304 (not modified)
Static query string None HTTP 304 (not modified)
Random query string Expiration 1 Year Never caches
Random query string Expire immediately Never caches
Random query string None Never caches
类型

缓存标头

观察到的结果 th> 静态文件名 有效期 1 年 从缓存中获取 静态文件名 立即过期 从不缓存 静态文件名 无 HTTP 304(未修改) 静态查询字符串 过期 1 年 HTTP 304(未修改)已修改) 静态查询字符串 立即过期 HTTP 304(未修改) 静态查询字符串 无 HTTP 304(未修改) 随机查询字符串 过期 1 年 从不缓存 随机查询字符串 立即过期 从不缓存 随机查询字符串 无 从不缓存
解决方案选项

查询字符串
将随机参数附加到 CSS URL 会强制发出新的 HTTP 200 请求,但仅限于初次遇到时。后续请求可能仍会返回 304。

路径修改
创建新路径提供了更永久的解决方案。您可以自动执行使用版本号或其他标识符重写路径的过程。

文件重命名
另一种方法是在每个版本中重命名 CSS 文件,以确保新的请求当 HTML 中引用更新的路径时。

结论通过实施建议的技术,您可以强制刷新缓存的 CSS 数据并确保您的用户收到最多的内容-最新的 CSS 更新,而不影响缓存的优势。

以上是如何强制刷新缓存的 CSS 数据:查询字符串与文件重命名?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn