У меня работает сервер Node. Я регистрирую каждый запрос, который получает сервер. Когда я набираю URL в моем браузере, я вижу некоторые странные поведения.

Иногда все файлы загружаются, и страница загружается просто отлично. В других случаях запрашиваются только текстовые файлы (.js , .css т.д.), А медиа-файлы (.jpeg , .png) никогда даже не запрашиваются с моего сервера.

Что может заставить браузер время от времени запрашивать медиа-файлы, но часть времени игнорировать их?

1 ответ1

0

Это не проблема, это ожидаемое поведение. Современные браузеры очень агрессивны в том, как они кэшируют изображения. А в случае Chrome он будет сохранять содержимое веб-страницы - изображения и внешние файлы - до истечения срока действия кэша или его очистки вручную.

Кэширование контента в Chrome.

Чтобы увидеть это поведение в действии, загрузите свою страницу в Chrome и следите за журналами вашего Node-приложения. Теперь, после загрузки страницы, откройте ее в веб-инспекторе в Chrome, щелкнув правой кнопкой мыши и нажав «Проверить», и перейдите на вкладку «Сеть». Смотрите скриншот ниже для справки. Один из параметров на вкладке «Сеть» помечен как «Отключить кэш».

Если вы установите этот флажок, а затем перезагрузите страницу, теперь в журналах должны отображаться все элементы страницы, которые загружаются повторно. Эта опция в инспекторе является инструментом веб-разработчика для случаев, когда кэширование мешает больше, чем помогает. FWIW, подобная опция существует в Safari.

Веб-инспектор в Chrome и вкладка «Сеть» с опцией «Отключить кэш».

Заголовки контроля кэша веб-сервера.

Другой вариант - посмотреть, какие заголовки отправляет ваш веб-сервер, используя опцию curl -I из командной строки. Просто получите URL-адрес изображения или элемента с веб-страницы и просмотрите заголовки с помощью параметра curl -I в командной строке.

Например, предположим, что у вас есть изображение с именем test.png на сервере с именем example.com вы можете запустить эту команду, чтобы просмотреть заголовки, отправляемые веб-сервером при обработке запроса на test.png:

curl -I http://example.com/test.png

Или - чтобы увидеть реальные заголовки - давайте проверим заголовки, которые отправляются при доступе к логотипу Google с помощью этого метода:

curl -I curl -I https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Возвращаемые заголовки, которые я вижу:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 13504
Date: Mon, 01 Jan 2018 02:59:24 GMT
Expires: Mon, 01 Jan 2018 02:59:24 GMT
Cache-Control: private, max-age=31536000
Last-Modified: Thu, 08 Dec 2016 01:00:57 GMT
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Alt-Svc: hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"

Обратите внимание, что заголовок Cache-Control и его max-age значение 31536000. Вы знаете, что это означает 31536000? Это число в секундах, и это эквивалентно 1 году. Так что серверы Google говорят, что мы должны браузер кэшировать это изображение в течение 1 года, прежде чем проверять новое.

Я предполагаю, что любое приложение Node, которое вы запускаете, также должно иметь какой-то аналогичный параметр Cache-Control и если вы хотите видеть более частые загрузки контента, вам следует уменьшить этот параметр Cache-Control . Но обычно это следует делать только для целей разработки и тестирования; для производственного сервера использование кэша браузера - отличная вещь. И получение правильного баланса для потребностей приложения - наука внутри себя.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .