Question

说我有一个网络应用程序。我添加了一些功能，这些功能需要添加到我的Web服务器上的一些现有CSS文件。我将新功能和CSS添加部署到我的服务器，它们运行良好。访问该网站的用户可能会在他们的浏览器中缓存CSS，这意味着新功能看起来很破碎/怪异，直到他们手动刷新页面或其缓存过期。如果我的服务器和用户之间有一个缓存服务器，问题可能会更糟，在这种情况下，即使是手动刷新也无济于事（我不认为）。

有没有一种常见的方法可以避免这种情况？

编辑：我在ASP.NET 4.0上运行。

Answer 1

您可以在css请求的末尾添加任意名称值对，它就像没有缓存一样。例如：

<link media="all" href="myhomepage.css?sid=1" type="text/css" rel="stylesheet">

进行更改时，请更改sid值。

Answer 2

我在Apache中使用以下PHP：

function cssInclude($file) {
    $fileMTime = filemtime($_SERVER['DOCUMENT_ROOT']."/media/css/".$file.".css");
    return "<link rel=\"stylesheet\" href=\"/media/css/{$file}.{$fileMTime}.css\"
}

然后在我的<head>：

<?= cssInclude("style"); ?>

然后在我的.htaccess中：

RewriteEngine on
RewriteRule ^media/(js|css|img|font)/(.+)\.(\d+)\.(js|css|png|jpg|gif)$ /media/$1/$2.$4 [L]

基本上它的作用是使链接有时间。最初我是在CSS之后使用？来完成的，就像style.css?12313123一样，但发现有些代理没有缓存，因为他们认为它是动态的，使它变慢（例如我的工作搞砸了）。

通过将其写为style.123123123.css，只要它被修改，它就好像是一个新文件，并且缓存工作正常。

你会注意到，在我的.htaccess中，我也允许自己为不同的目录，以及一些不同的文件格式 - 根据需要自定义它。

当然，这意味着您正在从文件系统中读取内容，但如果您有一个缓存层，那么每次更新只会执行一次。

Answer 3

当然我不知道你的设置，因为你没有提到它，但假设你有像Tomcat这样的serlet容器，我会建议你看一下Jawr。它的目的来自网站：'Jawr是Javascript和CSS的可调包装解决方案......'

它可以比你要求的更多，但它也完全自动地实现了@ scrappedcola的想法。客户端将看到一个URL，其中包含内容的哈希值（类似scripts_A5F68E2.js），其中缓存属性设置为永久。每次内容更改时，名称也会更改，因此客户端将重新加载脚本。

Answer 4

首先，通常的做法是将版本附加到您加载的资源中。这可以通过版本参数或使用yawr等框架来完成。

如果您更喜欢第一个并使用版本控制，那么将vcs修订版字符串用作版本可能也不错 - 或者 - 如果您执行发布周期，则使用可能与您的更改最佳匹配的版本。

在PHP或Python中，您可以生成包含版本字符串的文件，并在所有必需文件中引用它。使用Java或.NET，您可能希望有一个已编译的工件。

我不会粘贴您的设置缺失的示例代码。

如何在不遭受缓存CSS问题的情况下更新Web应用程序？

4 个答案: