Мы все знаем, что кэширование страниц может помочь уменьшить запросы и оптимизировать страницы. Однако в моей карьере в передней работе я всегда думал, что фронт-конец просто пишет страницы и писать взаимодействия, и это было уже здорово. Такое безнабильное мышление заставило мою будущую работу быть узким местом. Как человек, у вас должен быть мечта, иначе он отличается от соленой рыбы. Недавно я говорил о оптимизации передней части. Оказывается, что эффективное кэширование страниц значительно улучшит скорость отклика. Я также синтезировал несколько статей, которые я видел и говорил о моих взглядах. Это должно быть учебное примечание. Пожалуйста, простите меня, если что-то не так. Без дальнейшего ADO давайте допустимся до бизнеса.
механизм кэширования
Кэш делится на серверную часть (серверная сторона, такая как Nginx, Apache) и клиентскую часть (клиентская сторона, такая как веб-браузер).
на стороне сервера медленноХранилище далее делится на кеш прокси-сервера и кеш обратного прокси-сервера (также называемый кешем шлюза, например обратный прокси-сервер Nginx, Squid и т. д.), по сути, широко используемый CDN также является кешем на стороне сервера, цель которого пусть пользовательские запросы идут «Ярлыки», а все статические ресурсы кэша, такие как изображения и файлы.
кеш браузераСуществует два механизма управления: метатеги HTML и заголовки HTTP.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Функция приведенного выше кода состоит в том, чтобы сообщить браузеру, что текущая страница не кэшируется, и при каждом посещении необходимо обращаться к серверу, чтобы получить ее. Он прост в использовании, но поддерживается только некоторыми браузерами и не поддерживается всеми кеширующими прокси-серверами, поскольку прокси-сервер сам не анализирует содержимое HTML.
1. Кэш сервера
Что такое Etag?Что такое Last-Modified?Подождите, что это за чертовщина, я раньше обалдел, когда увидел это.
Прежде всего, мы должны сначала посмотреть на некоторые связанные с кешем заголовки cache-control, if-none-match, if-modified-since, Etag, expires, last-modified в соответствии с заголовком http-запроса и заголовком ответа.
Кэш заголовка запроса, связанный с:
кеш-контроль:
Его инструкции кеширования обычно используются в предыдущем разделе со следующими значениями no-cache, no-store и max-age; поговорим о них отдельно
без кеша:
На первый взгляд это означает, что «содержимое данных не кэшируется», но фактические данные кэшируются локально, но каждый раз, когда делается запрос, он обходит кеш и напрямую запрашивает последние ресурсы с сервера, потому что интерпретация браузера отличается. ,
Например, после того, как мы установили no-cache в ie, хотя запрос не будет использовать кеш напрямую, он также будет использовать кешированные данные и данные сервера для определения согласованности (то есть есть шанс, что кеш будет использоваться),
В firefox полностью игнорируется наличие no-cache Подробное объяснение см. в no-store;
нет магазина:
Указывает кэшу не сохранять ответную часть этого запроса. По сравнению с no-cache, одно не кешировать, другое не хранить кеш, само собой разумеется, что эта настройка более грубая и напрямую отключает кеш,
Однако конкретная реализация сильно различается в разных браузерах.Как правило, это поле не используется для его прямой установки.Однако для предотвращения злонамеренного изменения кеша с помощью пути к хранилищу и утечки информации устанавливается параметр no-store.
В конце концов, его полезность, реализовать кеширование в firefox через Сохранить как, чтобы сохранить файл в локальную кэшированную копию, прямое использование его no-cache недопустимо, если в сочетании со словами no-store settings вы можете играть с без-кэшем тот же эффект;
То есть: контроль кеша: без кеша, без хранилища, может гарантировать, что в версии, поддерживающей http1.1, основные браузеры нажимают Enter и обратно для обновления без кеша;
Кроме того, Pragma: no-cache может быть настроен для совместимости с версией 1.0 (но для предотвращения обнаружения согласованности в случае, если нам лучше добавить содержимое обнаружения согласованности, есть несколько способов, как показано ниже);
максимальный возраст:
Например, Cache-control: max-age=3; это означает, что тот же запрос, отправленный в течение 3 секунд после успешного запроса, не пойдет на сервер для повторного запроса, а будет использовать локальный кеш; аналогично, если мы установим max-age=0, это означает, что кеш будет удален немедленно Отправить запрос напрямую на сервер
Обнаружение согласованности делится на два способа: 1. Проверить, не истек ли срок действия, и проверить, обновлен ли ресурс;
если-нет-совпадения:
Это поле используется вместе с eTag в ответе, чтобы указать, был ли объект обновлен или изменен; когда клиент отправляет запрос в первый раз, ответное сообщение будет содержать поле Etag, которое указывает статус ресурса, и значение также изменится при изменении ресурса (клиенту все равно, как генерируется значение)
Затем кеш сохраняет поле.Когда кеш уже существует во второй раз, при просмотре локального кеша присвоит значение полю if-none-match и отправит его на сервер.Сервер сравнит отправленное значение с текущим состоянием.
Если значение такое же, ответьте 304, чтобы использовать кэшированные данные, если значение изменится, отправьте последние данные клиенту, чтобы заменить существующие кэшированные данные, и верните статус 200;
if-modified-since:
Это поле используется в сочетании с полем last-modified, что аналогично описанному выше принципу.Отвечающий сначала возвращает поле времени последнего изменения.При повторном запросе заголовок запроса извлечет поле последнего изменения в кэше и назначит это к if-modified-, так как,
Отправьте его на сервер, и сервер оценит, истекло ли время.Если оно не истекло, он вернет 304, чтобы сообщить клиенту использовать кешированные данные.Если оно истекло, он вернет последнее изменение и вернуть 200;
Кэш заголовка ответа, связанный с:
Этаг:
Как я уже говорил ранее, он используется в сочетании с if-none-match и генерирует хеш-строку (аналогичную результату после MD5 или SHA1) на основе содержимого сущности, которая может идентифицировать состояние ресурса. При изменении отправки ресурса меняется и ETag.
Основная цель использования Etag — решение проблем, которые не могут быть решены по времени: например, файл часто модифицируется (модифицируется в течение секунд), поэтому невозможно судить, обновляется ли он по времени; а модификация время изменилось, но содержимое не изменилось (надо думать, что файл не обновляется. меняется)
истекает:
Указывает время истечения кэша.Например: expires:Mon 30 Dec 2011 11:01:19 GMT, что совпадает с max-age в cache-control, но после обнаружения max-age значение будет перезаписано и заменено на максимальный возраст;
last-modified:
Указывает время последней модификации файла;
Кроме того, в заголовке стороны ответа также есть условия для содержимого кеша, что примерно совпадает с запросом.Если что-то не упомянуто, вы можете добавить.
Использовать кеш:
По умолчанию браузеры используют кешированные данные,
В случае обновления f5 браузер отправляет на сервер проверку согласованности, чтобы проверить, следует ли использовать кеш, и браузер напрямую нажимает Enter, чтобы указать, что прямой кеш приложения не нужно отправлять на сервер для проверки; поэтому мы будем следить за обновлением f5, чтобы объяснить реализацию использования кеша:
Вообще говоря, внешний интерфейс по умолчанию использует кеш.По умолчанию сервер и внешний интерфейс будут использовать кешированные данные, либо в соответствии с etag, либо в соответствии с max-age, либо в соответствии с expires.Разные реализации в зависимости от разных серверов. ;
На практике большинство из них не нужно реализовывать вручную, а в некоторых случаях, когда мы не уверены, следует ли использовать кеш, мы можем вручную вмешаться, чтобы принудительно использовать кешированные данные:
Например, если статический файл содержит html или изображения, нам нужно использовать кэширование для повышения скорости обработки.
метод первый:
Настройте его максимальный возраст или истекает, чтобы установить его, чтобы установить его истекшее значение после текущего года. Это использует файл в кэше каждый раз, когда вы проверяете это. Например, в .htaccess
<IfModule mod_headers.c>
<FilesMatch ".(gif|jpg|jpeg|png|ico)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
Способ второй:
Внешний интерфейс устанавливает if-modified-since, чтобы установить время последнего изменения больше, чем текущая дата,
Способ третий:
Сторона сервера оценивает совпадение по etag и использует кеш в соответствии с фактическим бизнесом;
Последние два метода относятся к слабым заголовкам кеша и требуют потери http-соединений, поэтому рекомендуется использовать первый метод;
Отключить кеширование:
метод первый:
Вы можете указать в метатеге
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
Способ второй:
Вы также можете динамически установитьRequestHeader, не заставляя кеш устанавливать комбинацию следующим образом:
cache-control='no-cache,no-store'
pragma='no-cache'
if-modified-since=0;
Способ третий:
Инициатор устанавливает if-modified-since на определенное время, которое истекло, что может быть несколько лет или десятилетий назад.
Способ четвертый:
Сервер устанавливает срок действия Expires на определенное время, например, header("Expires: Mon, 26 Jul 1997 05:00:00 GMT") в php;
В реальной разработке, если требуется определение согласованности, попробуйте сотрудничать с Etag и last-Modified для сравнения, а затем вернитесь к использованию кеша или новых данных; это немного на стороне сервера, поэтому я не буду повторяться.
Способ пятый:
Добавить случайное число или метку времени после URL += «&random=» + Math.random() Этот метод часто используется в js и php.Принцип заключается в том, что URL каждого запроса отличается, поэтому соответствующие данные не могут быть найдено в кеше, автоматически отправится на сервер для поиска последних ресурсов;
2. Кэш браузера
Кэш браузера — это механизм оптимизации для сохранения данных на стороне браузера для быстрого чтения или предотвращения повторных запросов ресурсов.Эффективное использование кеша позволяет избежать повторных сетевых запросов, а браузер может быстро считывать локальные данные и в целом ускорить отображение веб-страниц для пользователей. . Существует много типов механизмов кэширования на стороне браузера, откройте режим отладки браузера -> ресурсы с левой стороны.8. Механизмы кэширования браузера.
Вышеупомянутый механизм кэширования js имеет соответствующие API для работы, пожалуйста, проверьте сами. На самом деле все вышеперечисленное скопировано и вставлено мной, потому что в то время эти статьи придавали мне силы. Для получения подробной информации перейдите по следующей ссылке
1,Подробное объяснение HTTP-кэша, записанного во внешний интерфейс
2,Внедрение девяти механизмов кэширования на стороне браузера
3.HTTP-кеширование повышает производительность