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

时间:2019-01-06 03:49:16

标签: google-chrome http browser-cache cache-control

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

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

这是初始请求(使用CTRL + F5进行硬刷新):

enter image description here

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

enter image description here

(注意:第二个请求中没有发送Cache-Control,证明我确实没有刷新)

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

enter image description here

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

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

4 个答案:

答案 0 :(得分:2)

@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

答案 1 :(得分:1)

检出您的web.config的编译属性,如果它是:

<compilation debug=”true”/> 

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

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

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

答案 2 :(得分:1)

Chrome使用多种类型的缓存。

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

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

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

答案 3 :(得分:1)

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