Стратегия кэширования кеша браузера (вы можете понять это после прочтения)

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

Процесс кеширования браузера выглядит следующим образом

Начать загрузку, разрешение доменного имени,Кэш DNS
Локальный кеш (кэш памяти)
Http-кэш (надежный кеш и кеш согласования)
кеш сервера(кеш CDN)

Кэш DNS

Обычно мы вводим URL, который содержит域名а также端口Вы можете указать уникальный IP-адрес, а затем установить соединение для связи, в то время как域名найтиIP地址Процесс разрешения DNS.

www.dnscache.com (域名) - DNS解析 -> 11.222.33.444 (IP地址)

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

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

Кэш памяти (локальный кеш)

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

Потом кто-то спросит, а когда ресурсы в кеш памяти будут класть?

Ответ заключается в том, что почти все ресурсы сетевых запросов будут автоматически добавлены браузером в кеш памяти в соответствии с соответствующими политиками. Но также из-за двух факторов память, занимаемая браузером, не может расширяться бесконечно, кэш памяти предназначен только для «краткосрочного хранения». Когда объем данных слишком велик, даже если веб-страница не закрыта, кеш все равно будет недействительным.

Механизм кэширования памяти гарантирует, что при наличии на странице двух идентичных запросов (например, двухsrcидентичный<img>,дваhrefидентичный<link>) на самом деле запрашиваются не более одного раза, чтобы избежать потерь.

дисковый кеш (HTTP-кеш)

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

HTTP-кеширование делится на принудительное кэширование и согласованное кэширование.

Принудительное кэширование (также называемое сильным кэшированием)

Для сильного кэширования поля, которые его контролируют:Expiresа такжеCache-Control,вCache-Controlсоотношение приоритетовExpiresвысоко.

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

Cache-Control: max-age=3600 我希望你把这个资源缓存起来，缓存时间是3600秒（1小时）
Expires: Thu, 10 Nov 2020 08:45:11 GMT 到达指定时间过期
Date: Thu, 30 Apr 2020 12:39:56 GMT
Etag:W/"121-171ca289ebf"，(后面协商缓存内容)这个资源的编号是W/"121-171ca289ebf"
Last-Modified:Thu, 30 Apr 2020 08:16:31 GMT，(后面协商缓存内容)这个资源的上一次修改时间

Cache-Controlа также ExpiresЭто содержимое HTTP/1.1 и HTTP/1.0 соответственно.Для совместимости с HTTP/1.0 и HTTP/1.1 мы установим оба поля в реальном проекте.

После того, как браузер получит этот ответ, он сделает следующее

Браузер кэширует тело ответа от этого запроса в локальном файле.
Браузер отмечает метод запроса и путь запроса этого запроса
Время, которое браузер отмечает этот кеш, составляет 3600 секунд.
Браузер записывает время ответа сервера по среднему времени по Гринвичу.2020-04-30 12:39:56

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

Позже, когда клиент снова собирается запросить тот же адрес, он вдруг вспоминает одну вещь: в кеше есть то, что мне нужно?

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

Чтобы определить, действителен ли кеш, нужно пройтиmax-age + Date, получите время истечения и посмотрите, превышает ли время истечения текущее время. Если это так, это означает, что срок действия кеша не истек и он все еще действителен. Если нет, это означает, что кеш недействителен.

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

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

Итак, браузер отправляеткэшированный запрос

Так называемый кэшированный запрос — это не что иное, как добавление следующего заголовка запроса:

If-Modified-Since: Thu, 30 Apr 2020 08:16:31 GMT  亲，你曾经告诉我，这个资源的上一次修改时间是格林威治时间2020-04-30 08:16:31，请问这个资源在这个时间之后有发生变动吗？
If-None-Match: W/"121-171ca289ebf"  亲，你曾经告诉我，这个资源的编号是W/"121-171ca289ebf，请问这个资源的编号发生变动了吗？

Причиной отправки двух сообщений является совместимость с разными серверами, поскольку некоторые серверы распознают толькоIf-Modified-Since, некоторые серверы распознают толькоIf-None-Match, некоторые серверы распознают оба, но в целомIf-None-Match приоритет выше, чемIf-Modified-Since

На данный момент может быть два результата

**Инвалидация кеша:** Затем все очень просто: сервер снова дает нормальный ответ (код ответа200с телом ответа) и может сопровождаться новыми инструкциями кэширования, браузер кэширует новый контент
** Кэш действителен: ** Сервер возвращает перенаправление 304, а заголовок ответа содержит новую инструкцию кэширования, и браузер выполняет соответствующее действие кэширования.

Дополнение (значение ключевого поля)

Cache-Control

В приведенном выше объясненииCache-Controlэто заголовок сообщения, которое сервер отвечает клиенту, который предоставляетmax-ageИспользуется для указания времени кэширования.

Фактически,Cache-ControlВы также можете установить одно или несколько из следующих значений:

public: указывает, что ресурс сервера является общедоступным. Например, есть страничный ресурс, который все видят одинаково. Это значение не имеет большого значения для браузера, но может быть полезным в некоторых сценариях. По принципу «Я говорю тебе, что ты хочешь».httpВ протоколе клиент или сервер часто сообщает другой стороне подробную информацию, а использует ли ее другая сторона, это полностью зависит от него самого.
private: указывает, что ресурс сервера является частным. Например, есть ресурс страницы, который каждый пользователь видит по-своему. Это значение не имеет большого значения для браузера, но может быть полезным в некоторых сценариях. По принципу «Я говорю тебе, что ты хочешь».httpВ протоколе клиент или сервер часто сообщает другой стороне подробную информацию, а использует ли ее другая сторона, это полностью зависит от него самого.
no-cache: сообщите клиенту, что вы можете кэшировать этот ресурс, но ненепосредственныйиспользуй это. После кэширования каждый последующий запрос должен сопровождаться директивой кэширования, чтобы сервер сообщал вам, истек ли срок действия ресурса.
no-store: скажите клиенту не выполнять никакого кэширования для этого ресурса, и каждый последующий запрос будет выполняться как обычный обычный запрос. Если установлено это значение, браузер не будет кэшировать ресурс.
max-age:Больше никогда

Например,Cache-Control: public, max-age=3600Указывает, что это публичный ресурс, кеш 1 час.

Не только в заголовках ответов, но и вhttp1.1версия, также доступная взаголовок запросаПрисоединяйсяCache-Control: no-cache，Это значит сказать серверу: не думайте ни о каком кешировании, дайте мне нормальный результат. с участиемhttp1.0Прагма поля заголовка версии является той же функцией.

expire

существуетhttp1.0версия, черезExpireЗаголовок ответа для указания момента истечения срока действия, например:

Expire: Thu, 30 Apr 2020 23:38:38 GMT

прибытьhttp1.1версия изменена на проходнуюCache-Controlизmax-ageзаписать.

Суммировать

Когда браузер снова посещает уже посещенный ресурс, он делает это:

1. Соответствующая напряженность поля определяется, попал ли кеш в кэш, если попал, кеш используется напрямую.

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

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

4. В противном случае вернуть последний ресурс.