4

在开发我的页面时，我注意到一个一直困扰我的问题：虽然 Firefox（我的通用“开发”浏览器）总是在 CSS 和图像在服务器上发生更改时更新它们，但 Internet Explorer 并不总是这样做。通常，我需要在 IE 中刷新页面，然后它才会向服务器询问更新版本的东西。

据我了解，浏览器不应该至少检查每个请求的所有服务器端对象的时间戳，然后根据需要更新它们客户端吗？有没有办法我可以...不强制，但是..“鼓励”浏览器对某些项目执行此操作？

我在这里遇到的主要问题是我的页面上有一些 JavaScript，这些 JavaScript 依赖于以某种方式初始化的 CSS，反之亦然。当一个更新而另一个不更新时（在 IE 中很常见，当两者都在自己的外部页面中时），它会导致混乱，并且页面上偶尔会出现飞溅的结果。我可以自己处理“刷新页面”的舞蹈以进行开发，但是当我在网站上进行脚本狂潮时，我不想鼓励我的用户“刷新页面或其他”。

任何建议将不胜感激。页面本身更新顺利（它是 PHP），所以最坏的情况是我可以将 CSS 和 JavaScript 吐到页面本身，但这真的很难看，当然我会不惜一切代价避免它。

4

7 回答 7

10

将您的网站设计成客户端只需要获取外部 JavaScript 和 CSS 一次是一种很好的做法。

将外部资源设置为未来 1 年到期。将版本号附加到每个文件名，因此不要style.css使用“”，而是使用“ style-1.2.4.css”，然后当您要更新客户端的 CSS 时，增加版本号。

增加版本号会强制客户端下载更新的文件，因为它被视为完全独立的资源。

于 2009-05-31T15:19:37.270 回答
3

在所有 URL 的末尾添加一点随机查询字符串。它很丑陋，但在开发时它可以工作。例如：

<link rel="stylesheet" type="text/css" href="/mycss.css?foo=<?php echo rand(); ?>"/>

您可以对脚本、背景图像等执行相同操作。（并且不要忘记在您的网站上线时删除这些内容；））

于 2009-05-31T15:15:56.950 回答
3

这只是开发过程中的一个问题，当文件经常更改时。一旦您发布了站点，访问者将获得当前版本，并且缓存机制将或多或少地满足您的需求。

与其修改我的网站的工作方式，我只是养成了在开发过程中刷新之前清除缓存的习惯。正如你所说，在 Firefox 中，这通常不是问题，但如果我需要确定，我使用 Shift+Ctrl+Del，回车（我的清除私人数据设置只选中“缓存”。）在 IE 上，还有旧的 Shift+F5。

当然，正如其他人所提到的，您的易失文件上的随机查询字符串可以为您节省一些击键次数。但请理解，这实际上只是为了您自己的方便，而不是生产现场真正需要的。

于 2009-05-31T15:19:05.337 回答
2

最好将上次更改时间戳作为 GET-data 放在源的末尾 - 这样您就可以确保不会出现任何缓存错误。

完全删除缓存只是愚蠢的，因为它会导致页面变慢。

于 2009-05-31T15:25:32.937 回答
1

如果您使用的是 apache，请在该 css 文件的 .htaccess 中：

<FilesMatch "mycssfile\.css$">
  Header set Cache-Control: "private, pre-check=0, post-check=0, max-age=0"
  Header set Expires: 0
  Header set Pragma: no-cache
</FilesMatch>
于 2009-05-31T15:19:33.323 回答
0

浏览器通常根据服务器告诉它们的指令将页面存储在内部缓存中。不，如果根据上次检查显示文件未过期，则无需重新加载文件。当然，当您点击重新加载时，它们会显式地重新加载主页，但它们在 js 和样式方面的行为可能会有所不同。

正是出于这个原因，我使用具有“开发” -> “禁用缓存”菜单的Safari 进行开发。我敢肯定 Firefox 也有类似的东西。

于 2009-05-31T21:35:20.940 回答
0

我对 DanHerbert 的方法稍作改动。我倾向于为样式表使用相同的名称，但我在查询字符串中附加了一个版本号，以便浏览器在选择添加版本时将文件视为不同的文件。事情仍然会被缓存，但您可以根据自己的选择使其无效。

它比更改文件名更简洁，并且适合作为集中管理的解决方案，尤其是在具有来自四风的大量脚本和样式表的复杂应用程序中。

于 2009-05-31T21:50:39.037 回答