浏览器从缓存中加载JS文件，但不加载CSS文件

Question

导航网站时，我的浏览器正在从缓存中加载JS文件，而不是CSS文件。在本地服务器和实时站点上都会发生这种情况（对我来说，显然对其他用户也是如此，这很明显，因为日志显示大多数.css文件正在加载）。

我尝试了其他解决方案（example）：我在超链接上单击（不刷新），并且我的Chrome Devtools没有选中“禁用缓存”。

这是初始请求（使用CTRL + F5进行硬刷新）：

然后导航回该页面将创建另一个请求：

（注意：第二个请求中没有发送Cache-Control，证明我确实没有刷新）

正如预期的那样，服务器会为.css文件回复304 Not-Modified，但我根本不明白为什么它会去服务器（请注意，在没有服务器请求的情况下，.js文件下面的内容会被检索到） ）。

我相信您可以通过https://up.codes直接在自己的计算机上查看问题。我正在使用Chrome 71.0。

为什么CSS文件没有被缓存？

Answer 1

@Allen发现了问题（Vary标头中包含cookie，而cookie在请求之间有所变化），但我将展示如何针对Flask后代解决此问题。您可以使用Flask的@app.after_request() hook来确保Flask在命中this line时不会添加cookie：

@app.after_request
def add_header(response):
    url = request.url
    if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or
        '.gif' in url) :
        # Flask adds to the header `Vary: cookie` meaning the client should 
        # re-download the asset if the cookie changed.  If you look at the Flask
        # source code that comes next after the below return, it will add 
        # `Vary: cookie` if and only if session.accessed is true.
        session.accessed = False
    return response

Answer 2

检出您的web.config的编译属性，如果它是：

<compilation debug=”true”/> 

客户端会在每次浏览量请求中不断下载CSS，而不会在浏览器中本地缓存它们。

如果将其设置为false，则资源仅下载到客户端一次并缓存在客户端。

查看此帖子：Chrome will not cache CSS files. .js files work fine

Answer 3

Chrome使用多种类型的缓存。

Blink（Chrome使用的渲染引擎）使用内存中缓存和磁盘缓存。它使用此缓存来存储图像，字体和js文件。 只要该类型的文件仍在内存缓存中，或者文件缓存将从该缓存中加载并跳过WebRequest API，就意味着不会对服务器进行任何调用。

我不知道Blink为何不缓存css文件，但这就是为什么您看到对css文件而不是js文件的HTTP请求的原因。

请注意，如果由于某种原因从内存缓存和磁盘缓存中驱逐了js文件，您也会看到针对js文件的HTTP请求。

Answer 4

您的服务器在请求这些CSS文件时响应了不同的会话cookie，并且您的标头设置为Vary：Cookie，由于会话cookie的更改，浏览器再次发送了请求。