Тщательно понимать интерфейсное кэширование

HTTP JavaScript
Тщательно понимать интерфейсное кэширование

внешний кеш

Фронтенд-кеширование — это распространенная тема, и ее часто используют в качестве источника знаний на фронтенд-интервью. Сегодня мы снова подведем итоги.

Классификация

Интерфейсный кеш делится на сильный кеш и кеш согласования.

Сильный кеш

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

  • Expires

Заголовок ответа, представляющий время истечения срока действия ресурса. стандартное время в формате GMT.

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

Преимущества использования Expires strong cache:

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

Недостатки использования сильного кеша Expires

  • По истечении срока действия кеша сервер снова запросит сервер независимо от того, изменился ли файл.

  • Время истечения кеша — это конкретное время, которое зависит от времени клиента.Если время указано неточное или кеш изменен, это также повлияет на кеш.

  • Cache-Control

Заголовки запроса/ответа, поля управления кешем для точного управления политикой кеша.

Чтобы сделать строгое кэширование более точным, в HTTP 1.1 добавлено поле Cache-Control. Cache-Control может фигурировать как в заголовке запроса, так и в заголовке ответа, и разные его значения представляют разное значение, разберем его подробно.

Параметры сервера Cache-Control:

  • max-age: сколько секунд действительно, это относительное время, поэтому оно более точное, чем конкретное время Expires.
  • s-maxage: используется для указания действительного времени кеша на сервере кеша (таком как CDN кеша, прокси-сервер кеша) и действителен только для общедоступного кеша.
  • no-cache: не используйте локальный сильный кеш. Необходимо использовать согласование кэша.
  • no-store: Напрямую запретить браузеру кешировать данные.Каждый раз, когда пользователь запрашивает ресурс, на сервер будет отправляться запрос, и каждый раз будет загружаться весь ресурс.
  • общедоступный: может кэшироваться всеми пользователями, включая конечных пользователей и промежуточные прокси-серверы.
  • private: может кэшироваться только браузером конечного пользователя и не позволяет кэшировать промежуточные прокси-серверы кэширования по умолчанию.

Параметры клиента Cache-Control:

  • max-stale: 5 означает, что когда клиент получает кеш с прокси-сервера, не имеет значения, даже если срок действия кеша прокси истекает, пока время истечения находится в пределах 5 секунд, его все еще можно получить от прокси.
  • min-fresh: 5 означает, что кеш прокси нуждается в определенной степени свежести. Не ждите, пока истечет срок действия кеша, чтобы получить его. Вы должны получить его за 5 секунд до истечения срока действия, иначе вы не сможете его получить. .
  • Поле only-if-cached добавляется, чтобы указать, что клиент будет принимать только кеш прокси, но не ответ от исходного сервера. Если кэш прокси-сервера недействителен, 504 (время ожидания шлюза) будет возвращено напрямую.

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

В кэше согласования в основном есть четыре поля заголовка. Они используются в комбинации. If-Modified-Since и Last-Modified представляют собой группу, а Etag и If-None-Match представляют собой группу. Когда они существуют одновременно, На основе Etag и If-None-Match. При попадании в кеш согласования сервер вернет код состояния HTTP 304, что позволит клиенту прочитать файл непосредственно из локального кеша.

  • If-Modified-Since

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

  • Last-Modified

Заголовок ответа, время последней модификации ресурса, сообщается сервером браузеру.

  • Etag

Заголовок ответа, идентификатор ресурса, сообщается сервером браузеру.

  • If-None-Match

Заголовок запроса, идентификатор кэшированного ресурса, сообщается браузером серверу. Фактически это значение Etag, возвращенное первым сервером доступа.

If-Modified-Since и Last-Modified

Когда клиент запрашивает сервер в первый раз, сервер возвращает заголовок ответа Last-Modified, что соответствует стандартному времени. Когда клиент запрашивает сервер, он выводит поле заголовка запроса If-Modified-Since, и значением этого поля является значение Last-Modified, возвращаемое сервером. После того, как сервер получит запрос, он сравнит, совпадают ли два значения. Если они одинаковы, они вернут 304 и позволят клиенту прочитать из кеша. Если они разные, они вернут новый файл клиенту и обновить значение поля заголовка ответа Last-Modified.

Преимущества использования If-Modified-Since и Last-Modified:

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

Недостатки использования If-Modified-Since и Last-Modified:

  • Срок действия Last-Modified может быть точным только до секунды. Если файл изменен и получен в ту же секунду, клиент не может получить последний файл.

Etags и If-None-Match

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

Когда клиент запрашивает сервер в первый раз, сервер возвращает заголовок ответа Etag. Когда клиент запрашивает сервер, он выводит поле заголовка запроса If-None-Match, а значение этого поля является значением Etag, возвращаемым сервером. После того, как сервер получит запрос, он сравнит, совпадают ли два значения, и если они совпадают, он вернет 304 и позволит клиенту прочитать его из кеша.Если они не совпадают, он вернет новый файл клиенту и обновит значение поля заголовка ответа Etag.

Преимущества использования Etag и If-None-Match:

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

расширять

проблема инвалидации кеша

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

старый план

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

<script src="http://randy.js?version=1.1.1> </script>

новый план

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

pragma

pragma — это старый продукт, от которого постепенно отказываются. Некоторые веб-сайты по-прежнему сохраняют это поле для обратной совместимости. Когда значение pragma равно no-cache, это означает, что кеш отключен. Приоритетом является pragma > cache-control > expires.

блок-схема

С этой блок-схемой вы можете понять более четко.

конфигурация кэша

Если мы используем Nginx в качестве веб-сервера, мы можем настроить его следующим образом.

location / {

  # 其它配置
  ...

  if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
    #非html缓存1个月
    add_header Cache-Control "public, max-age=2592000";
  }

  if ($request_filename ~* ^.*[.](html|htm)$) {
    #html文件使用协商缓存
    add_header Cache-Control "public, no-cache";
  }
}

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

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

В соответствии с расположением кеша мы можем разделить его на три категории: кеш памяти, кеш диска и Service Worker, Мы можем увидеть окончательный метод обработки запроса в столбце Сеть -> Размер инструментов разработчика Chrome: если это размер (сколько K, сколько M и т. д.) означает, что это сетевой запрос, иначе он будет указанfrom memory cache,from disk cache,from ServiceWorkerЭто означает попадание в кеш.

  • Кэш памяти — это кеш в памяти (в отличие от дискового кеша, который является кешем на жестком диске). Согласно здравому смыслу операционной системы: сначала прочитайте память, затем прочитайте жесткий диск.

微信截图_20220119110918.png

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

微信截图_20220119110855.png

  • Вышеупомянутая стратегия кэширования и действия кэширования/чтения/аннулирования определяются браузером Мы можем только установить определенные поля в заголовке ответа, чтобы сообщить браузеру, но не управлять ими самостоятельно. Сервисная работа дает нам еще один более гибкий и прямой способ работы. Мы можем найти Service Workers из приложения Chrome. Этот кеш является постоянным, то есть, когда вы закрываете TAB или браузер, он все равно будет там при следующем открытии (а вот кеш памяти — нет). Существует две ситуации, которые могут привести к очистке ресурсов в этом кэше: Вызов API вручную.cache.delete(resource)Или емкость превышает лимит и полностью опустошается браузером.

постскриптум

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

Категории