О http-кэшировании вы можете не понимать эти знания

• Введите URL-адрес в адресную строку и нажмите Enter, когда надежный кеш выйдет из строя и когда он будет действителен,вы знаете?
• Что такое кэш диска и кэш памяти? Где он появляется?
• Политика обработки кеша в Firefox и IE такая же, как в Chrome?
• cache-controlизpublic,privateВы знаете, когда его использовать?
• тебе известноETagБывают ли случаи, когда это может быть неприменимо?
• вы знаете заголовок httpVaryЭто как-то связано с кэшированием?

Если вы понимаете вышеперечисленные вопросы, то закройте эту страницу; если вам понравилась эта статья, пожалуйста, поставьте лайк~

Давайте немного оглянемся назад

http header	описывать	Сильный кеш	Согласовать кеш
Pragma	Старая версия механизма локального кэширования, http 1.0 и ниже
Expires	По истечении этого времени срок действия ответа истекает, время является абсолютным и зависит от местного времени.	*
Cache-Control	Сильная стратегия кэшированияCache-Control: public, max-age=31536000, must-revalidate max-ageотносительное время	*
Last-Modified,If-Modified-Since	Время последнего изменения ресурса, в секундах		*
ETag,If-None-Match	Значение идентификатора ресурса, используемое для уникальной идентификации ресурса.		*

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

локальноCache-Control > Expires,Pragmaв не поддержкеCache-Controlэффективен, когда.

Если срок действия локального кеша истек, полагайтесь на согласованный кеш.

ETag > Last-Modified

Код состояния HTTP для сильного кэширования — 200 OK.

Код состояния http для согласования кеша — 304 Not Modified.

Cache-Control

• publicУказывает, что ответ может кэшироваться любым объектом (в том числе: клиентом, отправляющим запрос, прокси-сервером и т. д.).
• privateУказывает, что ответ может кэшироваться только одним пользователем, а не как общий кэш (т. е. прокси-сервер не может кэшировать его). Частный кеш может кэшировать содержимое ответа.
• no-cacheДаже если есть кеш, запрос будет сделан на сервер.
• no-storeПусть клиент не хранит ресурс в кеше.
• max-age=<seconds>Устанавливает максимальный период хранения кеша, по истечении которого кеш считается просроченным (в секундах). а такжеExpiresВместо этого время определяется относительно времени запроса.
• s-maxage=<seconds>покрытиеmax-ageилиExpiresголова, ноТолько для общих кешей (например, индивидуальных прокси), приватный кеш будет игнорироваться

вопросоpublicа такжеprivateразница

перевести на китайский:privateКэширование прокси запрещено. Например, интернет-провайдер может добавить невидимый прокси-сервер между вашим клиентом и Интернетом, который кэширует веб-страницы для уменьшения пропускной способности.cache-control: privateПозже вы можете указать, что прокси-сервер ISP не разрешает кэширование веб-страниц, но разрешает кэширование последнему получателю. при использованииcache-control: publicЭто означает, что любой может кэшировать, поэтому промежуточный прокси будет кэшировать копию, чтобы уменьшить пропускную способность и снизить затраты.

Для содержимого, доступного для всех, например логотипа веб-сайта, используйтеpublicНу и в любом случае риска утечки ключевых данных нет.Попробуйте кэшировать все промежуточные прокси для уменьшения пропускной способности. И если это страница с информацией о пользователе, например, мое имя пользователя, то конечно эта страница не всем полезна, потому что разные люди хотят вернуть разные имена пользователей, на этот разprivateКому-то подойдет, если прокси кеширует эту мою страницу, другие пользователи будут кешировать чужой доступ, что явно неразумно, а ваши личные и приватные данные не должны храниться в недоверенных местах.

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

Отключить кеширование

Cache-Control: no-cache, no-store, must-revalidate

Кешировать статические ресурсы

Cache-Control:public, max-age=86400

ETag, если-совпадение

ETagа такжеIf-None-MatchЧасто используется для работы с согласованными буферами. а такжеETagа такжеIf-MatchМогуИзбегайте «воздушных столкновений».

ETagЗаголовок ответа HTTP — это идентификатор конкретной версии ресурса. Это делает кэширование более эффективным и экономит полосу пропускания, поскольку веб-серверу не нужно отправлять полный ответ, если содержимое не изменилось. И если содержимое изменилось, используйтеETagПомогает предотвратить одновременные обновления ресурсов от перезаписи друг друга ("воздушные столкновения").

При редактировании MDN текущий контент вики хешируется и помещается в ответEtag:

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4

При сохранении изменений на вики-странице (публикации данных) запрос POST будет содержатьETagстоило тогоIf-Matchзаголовок, чтобы проверить наличие последней версии.

If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

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

If-None-MatchЭто заголовок запроса, отправляемый клиентом на сервер, и его значение — это то, что сервер возвращает клиенту.ETag,когдаIf-None-Matchи ресурсы сервера в актуальном состоянииEtagЕсли нет, возвращает последний ресурс и егоEtag.

Last-Modified, If-Modified-Since

Last-Modified,If-Modified-Sinceвремя последнего изменения ресурса.

Last-Modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT

Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT 

Разница между ними заключается в следующем:Last-Modifiedотправляется сервером клиенту,If-Modified-SinceОтправляется с клиента на сервер.

вопрос Last-ModifiedИ механизмыETagМеханизмы и приоритет разница между чем?

Last-ModifiedОн может быть точен только до секунды, поэтому изменения ниже второго уровня не могут быть обнаружены. а такжеETagЛюбые изменения в файле могут быть охарактеризованы до тех пор, пока файл изменяетсяETagизменится. такLast-Modifiedявляется резервным механизмом, имеет меньший приоритет, чемEtag.

запрос клиента сIf-None-MatchНа стороне сервера, если проверка совпадает, возвращается 304, если проверка не совпадает, возвращается 200, а последний ресурс иEtag.

Age

AgeЗаголовок сообщения содержит продолжительность времени в секундах, в течение которого объект сообщения хранится в кэширующем прокси.

AgeЗначение заголовка сообщения обычно близко к 0. Указывает, что этот объект сообщения только что был получен с исходного сервера, другие значения представляют собой разницу между текущим системным временем прокси-сервера и значением общего заголовка сообщения Дата в этом ответном сообщении.

Age: <delta-seconds>

Такие как

age: 1135860

Date

Date— это общий заголовок, содержащий дату и время создания сообщения.

Относится ко времени создания ответа. Когда запрос проходит через прокси-сервер, возвращаемыйDateНе обязательно самый последний, обычно в это время прокси-сервер добавитAgeПоле сообщает, как долго этот ресурс кэшировался.

Date: Wed, 21 Oct 2015 07:28:00 GMT 

Vary

VaryЗаголовок ответа HTTP, который определяет, следует ли использовать кешированный ответ для будущего заголовка запроса или следует запрашивать новый ответ с исходного сервера. Он используется сервером для указания того, какие заголовки следует использовать при выборе представителя ресурса в алгоритме согласования содержимого.

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

сервер, указавVary: Accept-Encoding, сообщая прокси-серверу, что для этого ресурса необходимо кэшировать две версии: сжатую и несжатую, таким образом, старые браузеры и новые браузеры через прокси будут получать несжатую и сжатую версии ресурса соответственно, избегая одновременного использования то же Стыдно за ресурс.

Vary: Accept-Encoding,User-Agent

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

Как заставить браузер не кэшировать статические ресурсы

можно установитьCache-Control

Cache-Control: no-cache, no-store, must-revalidate

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

<link rel="stylesheet" type="text/css" href="../css/style.css?version=1.8.9"/>

Поведение пользователя и кеширование

Пользователь нажимает f5 (ctrl+r), ctrl+f5 и щелкает вперед и назад, чтобы запустить механизм кэширования.

После локального тестирования обнаружено, что есть некоторые расхождения с онлайн-загрузкой, которые записываются следующим образом (сильный кеш действителен, означает, что файл локального кеша используется напрямую, код состояния Chrome — 200, и согласованный кеш действителен означает, что на сервер сделан запрос, и сервер может вернуть 304 без контента или 200 контент. ).

действовать	Сильный кеш	Согласовать кеш
переход по ссылке на страницу	эффективный	эффективный
новое окно	эффективный	эффективный
вперед назад	эффективный	эффективный
Введите в адресной строке	неверныйилиэффективный	эффективный
ctrl+rилиf5	неверный	эффективный
ctrl+f5Принудительное обновление	неверный	неверный

Возврат каретки в адресной строке отличается от такового в Интернете, например, если вы уже находитесь вhttp://localhost:3333/, а затем нажмите Enter после выбора адресной строки, вы обнаружите, что кэша нет.

ноесли не сейчасhttp://localhost:3333/,Напримерhttp://localhost:3333/index.cssилипустая страница, затем введитеhttp://localhost:3333/Enter, тогда он будет прочитан прямо из локального кеша.

Не удивительно, не удивительно

О кеше памяти и кеше диска

Оба типа кеша существуют в Chrome.

предыдущий субтитрПоведение пользователя и кешированиеМы видели Disk Cache, когда браузер считывает кэш, и есть Memory Cache. Глядя на название, также можно понять, Disk Cache — это файловый кеш, считываемый с жесткого диска, а Memory Cache — содержимое, считываемое непосредственно из памяти, и, конечно, последнее быстрее.

Так почему же эти две формы кэширования?

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

вопросКак браузер решает, какой кеш использовать?

Из ЧжихуКак браузер выбирает между «из кеша диска» и «из кеша памяти»?

Фокус! ! О разнице кеша между Chrome, FF и IE

В этой контекстной сети очень мало статей, но после теста я обнаружил, что разница довольно большая.Обработка кэша Chrome значительно отличается от двух других!

Мощный кеш, кеш памяти и кеш диска, упомянутые выше, четко не различаются в FF и IE.Может быть, поэтому Chrome такой быстрый?

Возьмем пример, повторяя запрос несколько разhttps://www.baidu.com/, чтобы увидеть различия между тремя браузерами.

Chrome

FF

IE

В Chrome есть надежный кеш и кеш согласования. Сильный кеш делится на кеш памяти и кеш диска. Этот механизм обработки позволяет максимально использовать кеш, уменьшить количество инициированных запросов и оптимизировать скорость загрузки страниц! !Коды состояния ресурса Chrome все 200, нет 304, а в двух других много 304. В FF и IE, даже если сервер четко указывает, что ресурс должен быть сильно кэширован, напримерCache-Control: max-age=86400, они по-прежнему не будут применять так называемую стратегию сильного кэширования, они по-прежнему отправят запрос на сервер, а сервер вернет 304, сообщая браузеру, что нужно использовать ваши локальные ресурсы! ! !

Откуда вы знаете, что запрос действительно отправлен на прокси или реальный сервер? мы сказали вышеAgeа такжеDate, Возраст представляет собой время на прокси-сервере минус время, когда текущий запрос возвращаетDateвремя, поэтому каждый раз, когда запрос отправляется,Ageувеличится по сравнению с прошлым разом! ! !

Мы Наггетсhttps://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/js/0.81b469df7a0dd87832a4.js~tplv-t2oaga2asx-image.imageУспокаивает в качестве примера. На FF результат является результатом

щетка

DateИзменений нет, что указывает на то, что используются ресурсы ответа одного и того же реального сервера.AgeПоследнее время больше предыдущего, но код состояния — 304, а правило кэширования —cache-control: s-maxage=2592199, max-age=2592199! ! !

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

Зачем использовать Last-Modified в качестве стратегии резервного копирования, если Etag может проверить, изменились ли ресурсы?

В большинстве статей о кэшировании эта проблема также не упоминается.

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

---

Ссылаться на

• Механизм кэширования браузера: сильное кэширование, согласованное кэширование
• Глубокое понимание механизма кэширования браузера
• Механизм кэширования HTTP
• Как браузер выбирает между «из кеша диска» и «из кеша памяти»?
• Анализ механизма кэширования браузера
• Говоря о механизме кеширования браузера http

---

Если вам понравилось, ставьте палец вверх~

Приглашаю всех обратить внимание на мой Nuggets и официальный аккаунт, где регулярно объясняются алгоритмы, TypeScript, React и их экологический исходный код.