Понимание кэширования с точки зрения внешнего интерфейса

HTTP JavaScript

Существует множество концепций кэширования.Главной темой этого обсуждения является Http-кеш во внешнем кеше.

Что с кешем

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

Процесс повторения запроса

Ниже представлена ​​блок-схема повторного запроса:

重复请求

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

Процесс чтения кэша

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

缓存读取

Как включить HTTP-кеш и настроить его — ключ к этому обсуждению.

тип кэша

Браузеры имеют следующие общие поля:

  1. expires: установить время истечения срока действия кеша
  2. частный: клиент может кэшировать
  3. общедоступный: и клиент, и прокси-сервер кэшируются
  4. max-age=xxx: кешированный контент истечет через xxx секунд
  5. без кеша: необходимо использовать кеш сравнения для проверки кешированных данных
  6. no-store: весь контент не будет кэшироваться, принудительный кеш, кеш сравнения не будет запускаться
  7. last-modified: когда содержимое было изменено в последний раз
  8. Etag: специальный идентификатор файла.

Принудительный кеш и согласование кеша

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

Буквально, способ принудительного кеша прост и груб, даваяcacheУстанавливается время истечения срока действия, по истечении которого срок действия кеша истекает, и его необходимо повторно запрашивать. в вышеуказанных поляхexpiresа такжеcache-controlсерединаmax-ageВсе принудительно кешируются.

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

Принудительный кеш имеет приоритет над согласованным кешем

Принудительно кэшировать

expires

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

Expires: Fri, 04 Jan 2019 12:00:00 GMT

Этот метод прост и понятен, напрямую устанавливая абсолютное время (текущее время + время кэширования). Но есть и скрытые опасности, например, текущее время браузера может быть изменено, а абсолютное время, установленное истекает после изменения, является относительно неточным.cacheМогут быть случаи, когда он не истекает в течение длительного времени или истекает в ближайшее время.

cache-control: max-age

чтобы решитьexpiresСуществующие проблемы, поднятые в версии Http1.1cache-control: max-age, что то же самое, чтоexpiresИдея кэширования одинакова, оба устанавливают время истечения срока действия, разницаmax-ageПараметр определяет, через какое время после начала относительного времени кэширования на него не влияет неточность даты.

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

Согласовать кеш

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

last-modify

last-modify сообщает клиенту, когда ресурс был изменен в последний раз,

Last-Modified: Wed, 02 Jan 2019 03:06:03 GMT

Браузер записывает это значение вif-modify-sinceВ (браузер автоматически записывает информацию о поле) при следующем запросе того же ресурса он будет таким же, как тот, который вернул сервер.last-modifyСравните, если они равны, это означает, что он не был изменен и отвечает 304, в противном случае это означает, что он был изменен, и он отвечает кодом состояния 200 и возвращает данные.

last-modifyОбновление выполняется за секунды, если частота обновления меньше этой единицы, то этот способ не подходит.

ETag

ETag — это специальный идентификатор ресурса.

Etag: W/"e563df87b65299122770e0a84ada084f"

После успешного запроса ресурса он вернетETagдепозитif-none-matchВ поле (информация этого поля автоматически записывается браузером) также передается на сервер при запросе ресурса.Сервер запрашивает, обновился ли ресурс, соответствующий коду.Если обновления нет, он возвращает статус 304, а обновление возвращает 200 и повторный запрос.

Вот небольшой пример запроса обновлений книги:

После того, как информация о книге будет запрошена, повторите запрос, серверETagЗапрос узнает, что ресурс не был обновлен, и возвращается код состояния 304.

书籍信息(旧)

Обновите информацию о возвращаемых данных, повторите запрос, верните код состояния 200 и повторите запрос:

书籍信息(新)

Как видно из возвращенных заголовков запроса, при повторном запросе браузер автоматически отправляетIf-Modified-Sinceа такжеIf-None-MatchДва поля, браузер по этим двум полям (If-None-Matchприоритет больше, чемIf-Modified-Since), чтобы определить, был ли изменен ресурс.

image

Как рассчитывается ETag

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

приоритет кеша

В соответствии с приведенным выше сравнением преимуществ и недостатков можно установить следующий порядок приоритетов:

Cache-Control > Expires > ETag > Last-Modified

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

缓存的判断流程

Источник изображения:Подробное объяснение механизма кэширования браузера

Где хранится кеш

disk cache

disk cacheДля кэша, хранящегося на жестком диске, ресурсы, хранящиеся на жестком диске, относительно стабильны и не исчезнут при закрытии вкладки или браузера.Его можно использовать для хранения больших ресурсов, которые необходимо использовать в течение длительного времени.

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

memory cache

memory cacheТо есть кеш хранится в памяти, содержимое в памяти будет освобождаться при закрытии вкладки.

Когда статус интерфейса возвращает 304, ресурс по умолчанию сохраняется вmemory cache, когда страница закрыта, повторное открытие требует другого запроса.

Разница между этими двумя методами хранения может относиться котвечать

When you visit a URL in Chrome, the HTML and the other assets(like images) on the page are stored locally in a memory and a disk cache. Chrome will use the memory cache first because it is much faster, but it will also store the page in a disk cache in case you quit your browser or it crashes, because the disk cache is persistent.

Когда вы посещаете URL-адрес в Chrome, HTML и другие ресурсы (например, изображения) на странице сохраняются локально в памяти и кеше диска. Chrome сначала будет использовать кеш памяти, потому что это намного быстрее, но он также будет хранить страницы в кеше диска на случай, если вы закроете браузер или произойдет сбой, потому что кеш диска является постоянным.

Почему некоторые ресурсы иногда поступают из кеша диска, а иногда из кеша памяти

Принцип кэша L3

  1. Сначала перейдите в память, если она есть, загрузите ее напрямую
  2. Если памяти нет, выберите жесткий диск, чтобы получить ее, если есть, загрузите ее напрямую.
  3. Если жесткого диска нет, то сделать сетевой запрос
  4. Загруженные ресурсы кешируются на жесткий диск и в память, и следующий запрос может быть быстро получен из памяти

Почему некоторые коды состояния запроса возвращают 200, а некоторые возвращают 304

200 from memory cache

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

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

200 from disk cache

Не обращаться к серверу, читать кеш напрямую, читать кеш с диска, и когда процесс закрывается, данные все еще существуют.

Этот метод также может кэшировать только производные ресурсы.

304 Not Modified

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

Мятное приложение

Возьмем простенький 🌰, возьмем в качестве объекта обсуждения страницу группы похудения Mint и проверим ситуацию с загрузкой ресурсов:

薄荷图片缓存

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

薄荷图片缓存2

Когда мы не закрываем страницу, ресурсы в памяти всегда есть, а когда мы снова открываем ее, память освобождается.

Кэширование CDN

Стратегия кэширования пограничного узла CDN различается у разных поставщиков услуг, но обычно следует стандартному протоколу http.Время кэширования данных пограничного узла CDN задается в поле Cache-control: max-age в заголовке ответа http.

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

Как правильно применять кеширование

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

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

Широкая реклама

Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.

Добро пожаловать, чтобы обсудить, поставить лайк и перейти 。◕‿◕。~