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

Question

在浏览我的站点时，我的浏览器从缓存中加载 JS 文件，而不是 CSS 文件。这在运行本地服务器和实时站点上都会发生（对我和显然对其他用户来说，这是显而易见的，因为日志显示大部分 .css 文件正在加载）。

我尝试了其他解决方案 (example)：我正在点击超链接（不刷新）并且我的 Chrome Devtools 没有 "Disable Cache" 检查。

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

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

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

正如预期的那样，服务器为 .css 文件返回 304 Not-Modified 响应，但我完全不明白它为什么要访问服务器（请注意 .js 文件下方无需服务器请求即可检索）。

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

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

Answer 1

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

<compilation debug=”true”/>

CSS 客户端会在每次网页浏览请求时持续下载，而不是在浏览器本地缓存。

如果设置为 false，资源只下载一次到客户端并缓存在那里。

看看这个 post：

Answer 2

Chrome 使用多种类型的缓存。

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

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

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

Answer 3

您的服务器在请求这些 css 文件时使用不同的 session cookie 进行响应，并且您的 header 设置了 Vary: Cookie，导致浏览器再次发送请求，因为session cookie 更改。

Answer 4

@Allen 发现了问题（Vary header 包括 cookie 并且 cookie 在请求之间发生了变化），但我将展示如何修复它Flask 的案例供后人参考。你可以使用 Flask 的 @app.after_request() hook to make sure Flask does not add cookie when it hits 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

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

Browser loads JS files from cache, but not CSS files

google-chrome

http

cache-control

browser-cache