Информация заголовка HTTP
Во-первых, давайте посмотрим на производительность информации заголовка HTTP по разнице между поведением запроса и кешем ресурсов при запросе ресурса:
Первый запрос ресурса:
Обновление страницы - срок действия кеша ресурсов не истек:
Обновление страницы — срок действия кеша ресурса истек — ресурс не изменился:
Обновление страницы - срок действия кеша ресурса истек - ресурс изменен:
При повторном запросе ресурса - срок действия кеша не истек:
стратегия кэширования
Когда браузер запрашивает файл ресурсов, он по умолчанию кэширует файл ресурсов локально для повторного использования, что увеличивает скорость загрузки веб-страницы.
Кэш ресурсов браузера делится наfrom disk cacheа такжеfrom memory cacheдве категории. При первом доступе к веб-странице файлы ресурсов кэшируются в памяти, а также сохраняют копию на локальном диске. Когда пользователь обновляет страницу, если срок действия кэшированного ресурса не истек, он считывается и загружается непосредственно из памяти. Когда пользователь закрывает страницу, ресурсы, кэшированные в памяти текущей страницы, очищаются. Когда пользователь снова посещает страницу, если срок действия кэша файла ресурсов не истек, он будет загружен с локального диска и снова кэширован в памяти.
Сервер доступен через заголовки ответаexpiresа такжеcache-controlУстановите действительное время истечения срока действия, когда браузер снова запрашивает ресурс, он определяет, истек ли срок действия локального кеша:
- Если он не истекает, то читать напрямую из локального кеша, http-запрос генерироваться не будет, этоСильный кеш.
- Если он истек, браузер повторно запросит ресурс с сервера, что часто сопровождаетсяобнаружение кеша.
expires
Это продукт HTTP 1.0, который относится к заголовкам ответов и использует строку даты и времени в формате UTC для указания времени истечения срока действия ресурса.
использоватьexpiresУстановленное время истечения срока действия основано на времени сервера, оно может не совпадать со временем браузера, а также влияют разные часовые пояса.
cache-control
Это продукт HTTP 1.1, который относится к заголовкам ответов и предоставляет более подробные стратегии кэширования, которые можно использовать в сочетании с запятыми в соответствии с тремя различными свойствами:
- Не использовать кеш:
cache-control: no-store/no-cache/must-revalidate; - Это частный кеш:
cache-control：public/private; - Установить время истечения:
cache-control: max-age/s-maxage;
Не использовать кеш:
-
must-revalidate: если срок действия локального кэша ресурсов не истек, используйте локальный кэш; когда срок действия локального кэша ресурсов истек, требуется обнаружение кэша (значение по умолчанию). -
no-cache: Обнаружение кэша требуется независимо от того, истек ли срок действия локального кэша ресурсов. -
no-store: отключить кеширование ресурсов браузером и переходить на сервер для повторной загрузки каждый раз, когда запрашивается ресурс.
Это частный кеш:
-
public: общедоступный кеш, что означает, что и браузер, и прокси-сервер могут устанавливать кеш (по умолчанию). -
private: Частный кеш, только кеш настроек браузера.
Установить время истечения:
-
max-age:использоватьcache-control: max-age=60Форма указывает, что срок действия локально кэшированного ресурса истечет через xx секунд, в секундах, будет перезаписан.Expiresпараметр. -
s-maxage: Используйте так жеmax-age, действителен при общедоступных настройках, действителен для общих кэшей (прокси-серверов).
использоватьmax-ageПреимущество заключается в том, что установленное время истечения срока действия является временем относительно браузера, на которое не влияет несогласованное время между сервером и браузером, а также разные часовые пояса.
эвристический кэш
Когда последнее модифицированное поле включено в заголовки ответа файла ресурсов, но оно отсутствуетexpiresа такжеcache-controlПоле, используемое для указания времени истечения срока действия кеша ресурсов. В это время браузер будет использовать эвристический кеш для подтверждения времени истечения срока действия кеша ресурсов:
Браузер будетdateа такжеlast-modified10% разницы во времени между ними используется как время истечения кэша ресурсов.
обнаружение кеша
Когда браузер снова запрашивает ресурсы с сервера, если исходные заголовки ответа существуют.last-modifiedилиetagинформация, то она будет передана в заголовках запросаif-modified-sinceа такжеif-none-matchПринесите предыдущую информацию на сервер для тестирования. Если ресурс сервера не изменился по отношению к локальному кешу ресурсов, будет возвращен код состояния 304, указывающий, что ресурс не был обновлен, и браузер будет использовать локальный кеш ресурсов, которыйСогласовать кеш.
Если нет исходных заголовков ответаlast-modifiedа такжеetagинформация, файл ресурсов будет повторно загружен с сервера.
последнее изменение и если изменено с тех пор
Оба эти поля являются артефактами HTTP 1.0.
-
last-modified: относится к заголовкам ответа, указывая время последнего изменения ресурса. -
if-modified-since: относится к заголовкам запросов и используется для определения того, был ли ресурс на стороне сервера изменен после времени доставки.Если модификаций нет, сервер вернет код состояния 304, чтобы позволить браузеру использовать кеш ресурсов.
etags и if-none-match
Это продукт версии HTTP 1.1.
-
etag: относится к заголовкам ответов, представляющим собой уникальный идентификатор ресурса, сгенерированный сервером. -
if-none-match: относится к заголовкам запросов и используется для определения того, не соответствует ли ресурс сервера переданному идентификатору. Если он соответствует, это означает, что файл ресурсов не был изменен, и сервер вернет код состояния 304, чтобы разрешить браузеру использовать кеш ресурсов. будет охватыватьif-modified-sinceпараметр.
Используйте etag, чтобы определить, был ли изменен файл ресурсов на стороне сервера, в основном по следующим соображениям:
-
last-modifiedТочность может быть только до секунды, а некоторые ресурсы сервера могут изменяться несколько раз за 1 секунду. - Некоторые файлы ресурсов сервера автоматически генерируются через равные промежутки времени, но содержимое файлов не изменилось.
поведение пользователя
Стратегия кэширования браузера также связана с поведением пользователя:
- Когда пользователь нажимает Enter в адресной строке URL-адреса для доступа к веб-странице, действуют как надежный кэш, так и кэш согласования.
- Как надежное, так и согласованное кэширование работают, когда пользователь щелкает гиперссылку со страницы для доступа к веб-странице.
- Когда пользователь нажимает F5 для обновления, сильный кеш становится недействительным, но согласованный кеш срабатывает. Однако в браузере Firefox и надежный кэш, и кэш согласования недействительны.
- Когда пользователь нажимает Ctrl+F5 для принудительного обновления, и сильный кеш, и согласованный кеш становятся недействительными, и браузер повторно загружает файл ресурсов на сервер.
демонстрационный тест
Чтобы полностью понять стратегию кэширования браузера, вот простая серверная среда, созданная с использованием http-модуля node для предварительного просмотра производительности кэша браузера путем самостоятельной настройки заголовков ответов. нажмитеЗагрузите пакет ресурсов.
После загрузки пакета ресурсов разархивируйте его самостоятельно, а затем используйтеnpm installкоманда для установки зависимостей черезnode serverЗапустите файл server.js в каталоге, чтобы запустить локальный сервер, который автоматически откроет файл в каталоге с помощью браузера по умолчанию./pages/index/index.htmlстраница.
После этого вы можете отредактировать четыре поля http, участвующих в кеше браузера, в коде, показанном на следующем рисунке файла конфигурации cache.json, сохранить его после изменения и принудительно обновить страницу браузера:
ИЗМЕНИТЬ ПРИМЕЧАНИЕ:
- Установка для соответствующего поля значения false означает, что соответствующее поле http не установлено;
- В качестве значения поля Cache-Control укажите поддерживаемую им комбинацию политик;
- В качестве значения поля «Истекает» введите число в секундах;
- Для значений полей Etag и Last-modified установите значение true;
Справочные ресурсы
- Тщательное понимание механизмов кэширования браузера
- Просмотр кэша HTTP через браузер
- Анализ механизма кэширования браузера
- Тщательно понимать механизм кэширования Http — метод трехфакторной декомпозиции, основанный на стратегии кэширования.
- Оптимизация веб-производительности: тщательное исследование без кэширования и обязательной повторной проверки
- Думая о механизме кеша браузера, сгенерированном memoryCache и diskCache