使用?version=XXX刷新缓存中的CSS文件

Refresh CSS file in cache with ?version=XXX

本文关键字：CSS 文件 缓存 刷新 version XXX 使用      更新时间：2023-09-26

为了刷新缓存中的CSS文件，我经常使用file. CSS ?version = DDMMYYYY技巧。但是，我对这种方法有一个疑问。

我在一个旧的外联网上工作。所有页面都使用相同的CSS文件。外部网没有任何模板文件，这个css包含在外部网的每个页面中。我需要为所有外部网页面刷新这个css文件。

我的问题是:我想使用file。css?登录页面上的version=DDMMYYYY技巧。其他页面仍然包含file.css(不包含?version部分)

如果用户进入登录页面，他将收到新版本的css文件。但是在其他页面上使用哪个版本呢?是旧版本(file.css)还是新版本(file.css?version=DDMMYYYY) ?

换句话说，当用户进入登录页面时，哪些文件将在他的缓存中:

  • file.css和file.css?version = DDMMYYYY
  • 只有file.css，更新到新版本

我很抱歉提出这个初学者的问题，但我自己测试起来有些困难。

谢谢你的帮助!

当文件被缓存时，它将包含完整的url，包括?和它之后的东西。缓存头由服务器提供，并由浏览器执行。

基本上

file.css吗?version = DDMMYYYY
和
file.css

是两个独立的浏览器文件，没有任何连接。

我给你的建议是在所有页面上一致使用新url

这将不起作用，它们将被不同地缓存，尽管file.css和file.css?version=DDMMYYYY在文件系统中是相同的文件，但它们是不同的uri，服务器响应可能完全不同…因此，file.css可以从缓存中加载旧文件，同时您可以使用file.css?version=DDMMYYYY获得正确的文件。

防止这种情况的一种方法是完全禁用缓存，这会导致css文件在每次加载页面时下载，但会给你即时更新，或者你可以设置缓存在短时间内过期，如10分钟，2小时，所以它将每10分钟/2小时下载一次…

如果你使用的apache是htaccess，你可以这样做来禁用缓存:

<filesMatch ".(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

在我的项目中，我也使用?version方法来强制浏览器获得新版本的CSS文件。我建议使用filemtime()代替?version=DDMMYYYY。

的例子:

<link rel="stylesheet" href="css/custom.css?<?php=filemtime('css/custom.css')?>" type="text/css" media="screen" />

函数filemtime()获取文件修改时间，这样当CSS文件被更改时浏览器将获得新版本的CSS。如果文件没有更改，则时间保持不变，浏览器使用文件的缓存版本。

相关文章：