Браузер загружает файлы JS из кэша, но не файлы CSS - PullRequest
Новая
       9

Браузер загружает файлы JS из кэша, но не файлы CSS

0 голосов
/ 06 января 2019

При навигации по моему сайту мой браузер загружает файлы JS из кэша, но не файлы CSS. Это происходит как на локальном сервере, так и на работающем сайте (для меня и, очевидно, для других пользователей, что очевидно, поскольку в журналах в основном загружаются файлы .css).

Я пробовал другие решения ( пример ): я перебираю гиперссылки (не обновляя), и в моих Chrome Devtools не отмечен флажок "Отключить кэш".

Вот начальный запрос (используя CTRL + F5 для жесткого обновления):

enter image description here

Затем переход на эту страницу создает еще один запрос:

enter image description here

(Примечание: во втором запросе не отправляется Cache-Control, что доказывает, что я действительно не обновил)

Как и ожидалось, сервер отвечает 304 Not-Modified для файла .css, но я не понимаю, почему он вообще совершает поездку на сервер (обратите внимание, что файл .js ниже извлекается без запроса сервера). ).

enter image description here

Я полагаю, что вы можете посмотреть на проблему на собственном компьютере, перейдя к https://up.codes. Я использую Chrome 71.0.

Почему файлы CSS не кэшируются?

Ответы [ 4 ]

0 голосов
/ 16 января 2019

@ Аллен обнаружил проблему (заголовок Vary включал cookie и cookie менялся между запросами), но я покажу, как это исправить в случае с Flask для потомков. Вы можете использовать @app.after_request() крючок Flask , чтобы убедиться, что Flask не добавляет 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
0 голосов
/ 15 января 2019

Chrome использует несколько типов кэшей.

Blink (механизм рендеринга, который использует Chrome) использует кэш-память в памяти и кэш-память диска. Он использует этот кэш для изображений, шрифтов и файлов JS. Пока файл этого типа все еще находится в кеше памяти или в файловом кеше, он будет загружаться оттуда и пропускать API-интерфейс WebRequest, это означает, что к серверу не обращаются.

Я не знаю точно, почему CSS-файлы не кэшируются Blink, но по этой причине вы видите HTTP-запрос для CSS-файлов, а не для JS-файлов.

Обратите внимание, что если по какой-то причине js-файл будет удален из кеша памяти и дискового кеша, вы также увидите HTTP-запрос для js-файлов.

0 голосов
/ 16 января 2019

Ваш сервер ответил с другим файлом cookie сеанса при запросе этих файлов CSS, и ваш заголовок был установлен с помощью Vary: Cookie, что заставило браузер отправить запрос снова из-за изменения файла cookie сеанса.

0 голосов
/ 13 января 2019

Проверьте атрибут компиляции вашего web.config, если он: 

<compilation debug=”true”/>

CSS будет постоянно загружаться клиентами при каждом запросе просмотра страницы и не кэшироваться локально в браузере.

Если установлено значение false, ресурс загружается на клиент только один раз и кэшируется там.

Проверьте этот пост: Chrome не будет кэшировать CSS-файлы. .js файлы работают нормально

...