浏览器加载从缓存JS文件，而不是CSS文件

Question

当浏览我的网站，我的浏览器从缓存中加载JS文件，而不是CSS文件。发生这种情况都运行在本地服务器和直播网站（我显然给其他用户，这是显而易见的，因为日志显示的大多是.css文件得到加载）。

我尝试过其他的解决方案（example）：我到处点击超链接（不刷新）和我的Chrome Devtools没有“禁用缓存”检查。

下面是（使用CTRL + F5为硬刷新）初始请求：

然后导航回到那个页面创建另一个要求：

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

正如预期的那样，服务器与304未修改的.css文件的响应，但我不明白为什么它使所有一趟服务器（.js文件通知下方没有服务器请求检索）。

我相信你可以看问题的第一手自己的机器上转到https://up.codes。我使用Chrome 71.0。

为什么在CSS文件不被缓存？

Answer 1

你的服务器请求这些CSS文件时，用不同的会话cookie回应，和你的头设置有所不同：饼干，造成浏览器重新发送，因为会话cookie变化的要求。

Answer 2

@Allen发现问题（Vary头包括cookie和cookie被请求之间变化），但我会展示如何解决它的瓶留给后人的情况。您可以使用瓶的@app.after_request() hook以确保当它击中cookie瓶不添加this line：

@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 3

检查出你的web.config的编译属性，如果：

<compilation debug=”true”/> 

CSS将获得由客户在每个网页浏览请求，不断下载，而不是在浏览器内本地缓存。

如果将其设置为false，资源只需下载一次到客户端和缓存的存在。

看看这篇文章：Chrome will not cache CSS files. .js files work fine

Answer 4

Chrome使用多种类型的缓存。

眨眼（即Chrome浏览器使用的渲染引擎）在内存中缓存和磁盘高速缓存使用的。它使用该缓存图像，字体和js文件。只要该类型的文件仍然在内存缓存，否则会从那里被加载并跳过WebRequest的API文件缓存，这意味着没有调用对服务器进行。

我不知道到底为什么CSS文件不被闪烁缓存，但是这就是为什么你看到的CSS文件，而不是为那些JS一个HTTP请求的原因。

请注意，如果由于某种原因，js文件从存储器缓存和磁盘高速缓存逐出你将看到js文件也是一个HTTP请求。