Анализ HTTP-кеша

Эта статья воспроизводится на

Глубокое понимание механизма кэширования браузера

Почему HTTP-кеш сбивает с толку

Обратите внимание на каштаны:

Объяснить применение кэш-заголовка Cache-Control в сервисе на основе протокола http.

1. Частные кеши браузера и общие кеши прокси

Буферизация не очень проста для понимания, информация в Интернете относительно расплывчата, например:Private browser cachesа такжеShared proxy caches.

浏览器缓存的服务架构可能是这样的：浏览器（Cache）<=>服务器。
代理服务器缓存架构可能是这样的：浏览器 <=> CDN（Cache）<=>源服务器。

Различные кэши HTTP решают разные проблемы и используют сценарии. Лично я понимаю, что кеширование браузера в основном для того, чтобы избежать ненужных запросов и большого количества сетевых передач, в то время как кеширование прокси-сервера в основном для того, чтобы сделать сервисы ближе к пользователям и более эффективными (конечно, оно также решает запросы и сетевые передачи).

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

2. Правильно понять инструкцию Cache-Control

Эта команда является общим полем заголовка, что означает, что эта команда может использоваться как команда запроса и ответа.В то же время эта команда также имеет несколько параметров, таких как ее параметры.max-age = 0Что он представляет в директивах запроса и ответа? Это должно быть ясно при понимании.

3. Дальнейшее понимание инструкции Cache-Control

Оно имеет три значения:

(1) Можно ли кэшировать (для ответа)

private：表示它只应该存在与浏览器缓存。
public：表示它可以缓存在浏览器或者 CDN 上。
no-cache：这个词很迷惑，不是代表不能使用缓存，而是代表在使用前必须到服务器上确认。
no-store：表示不允许被缓存。

(2) Как долго кэшировать (для ответа)

max-age= 秒，告知浏览器这个缓存的有效时间多少。

(3) повторная проверка (для ответа это проверка условия)

must-revalidate：
表示浏览器必须检查服务器，确认本地缓存是否有效，这个参数和请求参数 max-age = 0 有些类似。

Эта команда визуально сообщает браузеру, можете ли вы кэшировать этот объект, как долго объект кэшируется и нужно ли подтверждать это каждый раз, когда вы используете кэш.

Картинка описывает это очень четко:

• Разрешает ли этот ресурс кэширование?
• Нужно ли клиенту проверять сервер каждый раз, когда он использует кеш?
• Является ли этот кэш общедоступным или частным?
• Сколько времени занимает кэш?
• Что такое идентификатор ресурса (Etag)?

4. Сравнение Expires и Cache-Control

На самом деле между ними нет большой разницы. Разница в том, что Expires является продуктом http1.0, а Cache-Control — продуктом http1.1. более высокий приоритет, чем Expires, в некоторых случаях HTTP1 не поддерживается. .1 среда, Expires вступит в игру. Так что Expires на самом деле устаревший продукт, и его существование на данном этапе — это просто способ написания совместимости.

5. Буфер переговоров

Согласование кэширования — это процесс, в котором браузер инициирует запрос к серверу с идентификатором кеша после принудительного отказа кеша, и сервер решает, использовать ли кеш на основе идентификатора кеша. Есть два основных случая:

• Кэш согласования вступает в силу, возвращает 304 и не изменен

• Кэш согласования вступает в силу, возвращает 200 и результат запроса

Согласованное кэширование может быть достигнуто путем установки двух HTTP-заголовков: Last-Modified и ETag.

1.Last-Modified и If-Modified-Since

Когда браузер обращается к ресурсу в первый раз, а сервер возвращает ресурс,response headerдобавлено вLast-ModifiedЗаголовок, значение - время последней модификации этого ресурса на сервере, браузер кэширует файл и заголовок после его получения

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

В следующий раз, когда браузер запрашивает этот ресурс, браузер обнаруживает, чтоLast-Modifiedэтоheader, так что добавьIf-Modified-SinceЭтот заголовок, значениеLast-ModifiedЗначение в ; сервер снова получает этот запрос ресурса и будетIf-Modified-SinceЗначение in сравнивается со временем последней модификации этого ресурса на сервере. Если изменений нет, возвращаем 304 и пустое тело ответа и читаем прямо из кеша.If-Modified-SinceВремя меньше, чем время последней модификации этого ресурса на сервере, что указывает на то, что файл был обновлен, поэтому верните новый файл ресурсов и 200

Но у Last-Modified есть некоторые недостатки:

Если файл кеша открыт локально, даже если файл не изменен, это все равно вызоветLast-ModifiedИзменено, сервер не может попасть в кеш и отправляет тот же ресурс Поскольку Last-Modified может быть подсчитан только в секундах, если файл изменяется в незаметное время, сервер будет думать, что ресурс все еще используется, и не будет возвращать правильный ресурс.

Поскольку вопрос о том, недостаточно ли кэша, определяется на основе времени модификации файла, можно ли определить стратегию кэширования непосредственно на основе того, было ли изменено содержимое файла? так вHTTP / 1.1ПоявилсяETagа такжеIf-None-Match

2. ETag и If-None-Match

Etag – это уникальный идентификатор (генерируемый сервером) текущего файла ресурсов, который возвращается, когда сервер отвечает на запрос. Пока ресурс изменяется, Etag будет создаваться повторно. В следующий раз, когда браузер загрузит ресурс и отправит запрос на сервер, он поместит значение Etag, возвращенное в прошлый раз, в If-None-Match в заголовке запроса.Серверу нужно только сравнить отправленное If-None-Match. клиентом со своим собственным сервером.Если ETag ресурса непротиворечив, можно судить о том, был ли ресурс изменен по отношению к клиенту. Если сервер обнаружит, что ETag не совпадает, он напрямую отправит новый ресурс (включая новый ETag) клиенту в виде обычного возвращаемого пакета GET 200; если ETag непротиворечив, он напрямую вернет 304 на уведомить клиента напрямую. Просто используйте локальный кеш.

3. Сравнение между ними:

• Во-первых, Etag лучше, чем Last-Modified, с точки зрения точности.

Единицей времени Last-Modified являются секунды.Если файл изменяется несколько раз в течение 1 секунды, то их Last-Modified на самом деле не отражает модификацию, но Etag будет меняться каждый раз, чтобы обеспечить точность; если он сбалансирован по нагрузке Last-Modified, сгенерированный каждым сервером, также может быть несогласованным.

• Во-вторых, по производительности Etag уступает Last-Modified, ведь Last-Modified нужно только записывать время, а Etag нужен сервер для вычисления хеш-значения по алгоритму.
• В-третьих, с точки зрения приоритета проверка сервера отдает приоритет Etag.

6. Механизм кэширования

Как правило, существует два типа стратегий кэширования браузера: сильное кэширование и согласованное кэширование. Если срок действия кеша истекает, мы можем использовать согласованный кеш для решения проблемы. Согласование кеша требует запроса и возвращает 304, если кеш действителен.

Семь, фактическая стратегия кэширования приложений сцены

часто меняющиеся ресурсы

Cache-Control: no-cache

Для частых переменных ресурсов сначала нужно использовать cache-control: no-cache, чтобы браузер каждый раз запрашивал сервер, а затем сотрудничать с ETAG или Last-Modified, чтобы убедиться, что ресурс действителен. Такой подход не экономит количество запросов, но позволяет значительно уменьшить размер данных ответа.

Редко меняющийся ресурс

Cache-Control: max-age=31536000

Обычно при работе с такими ресурсами, давая имCache-Controlнастроить большойmax-age=31536000(один год), чтобы последующие запросы того же URL-адреса браузером попадали в принудительный кеш.

Для того, чтобы решить проблему обновления, вам необходимо добавить в имя файла (или путь)hash, номер версии и другие динамические символы, а затем измените динамические символы, чтобы достичь цели изменения ссылочного URL-адреса и аннулировать предыдущий обязательный кеш (фактически, он не аннулируется сразу, но больше не используется) . Библиотеки классов, доступные в Интернете (например, jquery-3.3.1.min.js, lodash.min.js и т. д.), используют этот шаблон.

8. Влияние поведения пользователя на кеш браузера

Так называемое влияние поведения пользователя в кэш-памяти браузера относится к пользователю, когда браузер работает, что запускает политику кэширования. Есть три вида:

• Откройте веб-страницу и введите адрес в адресную строку: Проверьте, есть ли совпадение в кеше диска. Используйте, если доступно; отправьте сетевой запрос, если нет.

• Обычный сброс (F5): поскольку вкладка не закрыта, кеш памяти доступен и будет использоваться первым (если он совпадает). Второй — дисковый кеш.

• Принудительное обновление (Ctrl + F5): Браузер не использует кеш, поэтому все заголовки запросов отправляются с Cache-control: no-cache (для совместимости Pragma: no-cache), сервер напрямую возвращает 200 и последние содержание.