Question

我正在使用node.js创建一个应用程序，并且有一些用一个css文件设置样式的html页面。单击主页上的链接（到子页面）并在新选项卡中打开它后，一切似乎都很好。但是，在我按下ctrl + F12并打开控制台之后，css样式以某种方式'停止工作'，这意味着：

元素未设置样式，即使html中“元素”标签中有style.css的链接标记
在网络选项卡中，我只能看到那里列有状态304的style.css文件（所有其他js文件都没有，即使JS脚本有效）
当我返回主页时，css样式也不可见（它们在新标签打开之前，现在在Netwok中处于304状态）。刷新后，样式会返回（状态200）。
刷新子页面后，一切都很好，打开控制台不对样式执行任何操作（“网络”选项卡显示所有文件，包括状态为200的style.css）。关闭/再次打开控制台后，一切都还可以。
如果我不刷新子项，当我改变窗口大小时，样式会“回来”（虽然不是立即，但是在一秒之后）。否则只有html与js脚本工作。

这仅在Chrome（版本53.0.2785.101）中发生，仅在首次打开控制台后才会发生。我不知道为什么会发生这种情况。请帮忙！

Answer 1

好的，我设法解决了这个问题。这个问题似乎是Chrome bug，例如在这里讨论： https://bugs.chromium.org/p/chromium/issues/detail?id=647151 https://bugs.chromium.org/p/chromium/issues/detail?id=648023

我不确定我的解决方案是否完美，但它现在似乎有效。我刚在server.js中添加了一个选项到express.static（我使用的是Express JS）：

app.use(express.static('public', {maxAge: '5d'}));

我想max-age属性在这里至关重要 - 它在Cache-Control http标头中指定（在单击给定文件后，您可以在网络选项卡的Dev Tools控制台中看到这一点）。找到第一个链接中提到的此解决方案。如果我看到更多问题，我会更新这个答案。对不起，我无法详细解释这个问题。

编辑：这个解决方案有一个主要缺陷：当我编辑我的文件时，浏览器仍会加载旧版本。因此，当我希望看到文件中的更改时，我关闭了这个max-age属性。如果有人有更好的解决方法，请分享。

Answer 2

尝试在Chrome中清除缓存，然后重新启动Chrome并重试。（304响应标头不一定是错误。它只是意味着浏览器应该从缓存加载资源。基本上浏览器说＆＃34;嘿，我可以使用你上次给我的CSS文件的相同副本吗？，或者它已经改变了？＆＃34;并且服务器说＆＃34;它没有改变，继续使用你拥有的副本＆＃34; AKA 304）

如果这不能解决问题，您可以查看ETags

打开控制台

2 个答案: