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

У вас есть два варианта. Либо вы можете понять реализацию и использовать конфигурацию, либо сразу перейти к настройке. Перейдите к части 2, если вы хотите взглянуть только на конфигурации.

Что такое кеш браузера?

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

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

Кеш браузера против HTTP-кеша

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

Почему кеш браузера?

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

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

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

Как реализован кеш браузера

Кэш браузера реализован между Javascript на стороне клиента и сервером. Мы можем рассматривать его как систему между Javascript на стороне клиента и сервером. И Клиент, и Сервер могут управлять кэшированием ресурсов. Он в основном ориентирован на клиентскую сторону с небольшими настройками или без них и некоторыми настройками на стороне сервера.

Заголовки запросов и заголовки ответов

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

Терминология в HTTP-кешировании

Есть несколько ключевых терминов, которые используются при объяснении кеша браузера. Их понимание поможет понять спецификацию, а также следующие примеры.

Свежесть

Ответ считается свежим в кеше браузера, если кеш имеет заголовок, определяющий возраст (max-age, expires), кешированный ответ в кеше браузера считается свежим до тех пор, пока это время не будет передано. Это может быть определено как клиентом, так и сервером.

Устаревший кеш

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

Проверка

Есть несколько способов проверить устаревший кеш. Чтобы правильно проверить устаревший кеш, сервер должен поддерживать определенные операции. Два основных метода:

  • Last-Modified-Date - Браузер сохранит метку времени (отправленную сервером) вместе с ресурсом. Он отправит это на сервер, когда кеш устарел. Сервер отправит 304 с пустым телом, если ресурс не был изменен после этой отметки времени, а кеш браузера отправит клиенту кешированный ответ. Если сервер ответил 200 с телом ответа, то новый ресурс будет кэширован с новой меткой времени и отправит обновленный ресурс клиенту.
  • Etag - Браузер будет хранить хэш (отправленный сервером) с ресурсом. Он отправит это значение на сервер, когда кеш устарел. Сервер отправит 304 с пустым телом, если новый хэш ресурса такой же, и кеш браузера отправит кешированный ответ клиенту. Если сервер ответил 200 с телом ответа, то новый ресурс ресурса будет кэширован с новым хешем и отправит обновленный ресурс клиенту.

Кэширование заголовков

Я перечислю только наиболее часто используемые заголовки. Полный список можно найти на

Заголовки ответа

Это должно быть установлено сервером. В обычном случае их необходимо установить, чтобы активировать кеш браузера.

  • Cache-Control —Это директива, объясняющая, как управляется кеш. Общие значения, которые он может принимать при использовании в качестве заголовка ответа:
Cache-Control: max-age=<seconds> // Sets the max age for the cache
Cache-Control: immutable // Sets the max age to infinity 
Cache-Control: no-cache   // This is setting max-age = 0. 
Cache-Control: no-store   // This is disabling browser cache
  • Last-Modified - это директива, которая устанавливает отметку времени для повторной проверки устаревшего кеша. Это не будет использоваться, если кеш еще свежий. Реализация кэша браузера сохранит это в кешированном ответе и отправит его на сервер, когда кеш устарел, как параметр заголовка с именем If-Modified-Since. Дата должна быть в том же формате по Гринвичу.
  • Etag - это директива, которая устанавливает хэш для повторной проверки устаревшего кеша. Это не будет использоваться, если кеш еще свежий. Реализация кэша браузера сохранит это в кешированном ответе и отправит его на сервер, когда кеш устарел, как параметр заголовка с именем If-None-Match.
  • Vary - Это интересный заголовок. Это скажет, что кеш браузера не только просматривает ответ, но и заголовки. Это полезно, например, если у вас есть несколько версий ресурсов для разных устройств или несколько пользователей будут использовать приложение в одном браузере, а одна конечная точка возвращает разные результаты в зависимости от пользователя. (Это очень распространенный случай в типичном веб-приложении)

Заголовки запроса

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

  • Cache-Control - это директива, объясняющая, как управляется кеш. Общие значения, которые это может принимать, когда клиент устанавливает это:
Cache-Control: max-age=<seconds>  // Sets the max age for the cache
Cache-Control: no-cache   // This is setting max-age = 0. 
Cache-Control: no-store   // This is disabling browser cache
  • If-Modified-Since - это заменит заголовок Last-Modified кеша браузера. В большинстве случаев это не требуется.
  • If-None-Match - это заменит заголовок Etag кеша браузера. В большинстве случаев это не требуется.

Для возможных / распространенных конфигураций с использованием HTTP-кеша следите за частью 2.