在 Chrome 中刷新后网站不加载 CSS

Posted 2023-02-22

【中文标题】在 Chrome 中刷新后网站不加载 CSS

【英文标题】：Website not loading CSS after refresh in Chrome

【发布时间】：2013-04-04 07:15:04

【问题描述】：

所以有这个网站-> http://www.raudsilla.ee

此问题仅在 Chrome 中出现 - 每当您按下刷新时，页面都会丢失其 CSS。奇怪的是，如果您查看刷新前后的代码，它们看起来完全一样。再说一次，只发生在 chrome 中。

我已经尝试了很多事情，到目前为止没有运气... 我现在不想排除任何事情，所以任何帮助表示赞赏。

【问题讨论】：

您是否使用过 Firebug/Fiddler 来查看 HTTP 请求？如果没有，请执行此操作以确保成功请求并加载文件。

你知道你正在下载一个 3MB 的 PNG 文件吗？随便问问。

尝试一一删除插件。我认为你有一些 javascript 在刷新后会阻止 css 的加载。

【参考方案1】：

浏览器正在输出 javascript 错误，如果您检查代码，您在加载脚本之前调用 jQuery 的文档准备就绪，正如它所说，“$ 未定义”。

修复现有的javascript错误后，它应该可以正确加载。

【讨论】：

我修复了这个东西，但它仍然坏掉了。还有其他想法吗？

【参考方案2】：

我在我们自己的一个网站上看到了同样的行为，并开始寻找原因。我现在唯一能得出的结论是，它是由样式表的 Mime 类型引起的。这个结论得到了我们这边的行为的支持。

更新： Chrome 似乎可以通过三种方式加载 CSS 文件：

作为一个新请求，没有可用的缓存版本，我们的服务器返回HTTP 200 OK，内容类型为text/css。这很好用。 来自缓存，无需咨询服务器。 Chrome 已经缓存了内容类型text/css。这很好用。 作为具有可用缓存版本的请求。我们的服务器返回HTTP 304 Not Modified，内容类型为text/plain。这不起作用。

【讨论】：

还有：productforums.google.com/forum/?fromgroups=#!topic/chrome/…

【参考方案3】：

经过一些疯狂的测试，我通过添加“？”找到了解决方案到 url css 文件。

示例：href="../_css/setup_system.css?" type="text/css"

【讨论】：

今天我在朋友的 Windows PC 上运行在本地主机上的一个非常简单的网页上遇到了同样奇怪的问题（css 不刷新）。这 ”？”解决方案修复了它。解决方案的一个很好的解释（强制停止缓存）在这里：csswizardry.com/2019/03/cache-control-for-civilians。但是我仍然对为什么会发生缓存感到困惑。经过大约 20 年的 Web 开发，我以前从未见过这种情况发生。防火墙/卡巴斯基安全软件是否会强制在文件名后不使用查询字符时发生缓存？

【参考方案4】：

site.css 未在 Chrome 中加载。我添加了？在 CSS url 中，我的样式开始出现。

【参考方案5】：

Shift + Refresh 解决了这个问题，所以它一定是缓存问题。 附言。该网站需要很长时间才能加载，考虑优化？

【讨论】：

这个设计很严格 :) 还有其他想法吗？

【参考方案6】：

禁用添加块并刷新，如果网站加载正确，请检查插件

【参考方案7】：

打开控制台（ctrl + shift + c），然后打开网络面板并检查禁用缓存按钮。