导航网站时,我的浏览器正在从缓存中加载JS文件,而不是CSS文件。在本地服务器和实时站点上都会发生这种情况(对我来说,显然对其他用户也是如此,这很明显,因为日志显示大多数.css文件正在加载)。
我尝试了其他解决方案(example):我在超链接上单击(不刷新),并且我的Chrome Devtools没有选中“禁用缓存”。
这是初始请求(使用CTRL + F5进行硬刷新):
然后导航回该页面将创建另一个请求:
(注意:第二个请求中没有发送Cache-Control
,证明我确实没有刷新)
正如预期的那样,服务器会为.css文件回复304 Not-Modified,但我根本不明白为什么它会去服务器(请注意,在没有服务器请求的情况下,.js文件下面的内容会被检索到) )。
我相信您可以通过https://up.codes直接在自己的计算机上查看问题。我正在使用Chrome 71.0。
为什么CSS文件没有被缓存?
答案 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,则资源仅下载到客户端一次并缓存在客户端。
答案 2 :(得分:1)
Chrome使用多种类型的缓存。
Blink(Chrome使用的渲染引擎)使用内存中缓存和磁盘缓存。它使用此缓存来存储图像,字体和js文件。 只要该类型的文件仍在内存缓存中,或者文件缓存将从该缓存中加载并跳过WebRequest API,就意味着不会对服务器进行任何调用。
我不知道Blink为何不缓存css文件,但这就是为什么您看到对css文件而不是js文件的HTTP请求的原因。
请注意,如果由于某种原因从内存缓存和磁盘缓存中驱逐了js文件,您也会看到针对js文件的HTTP请求。
答案 3 :(得分:1)
您的服务器在请求这些CSS文件时响应了不同的会话cookie,并且您的标头设置为Vary:Cookie,由于会话cookie的更改,浏览器再次发送了请求。