предисловие

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

Кэш CDN

См. метафору изображения для сравнения CDN.

10 лет назад не было агентства по продаже билетов на поезд, а о 12306.cn и говорить было невозможно. В то время билеты на поезд можно было купить только в кассах вокзала, а в маленьком районе, где я жил, не было доступа к поездам. Все билеты на поезд нужно было покупать на вокзале в городе. от окружного центра до города туда и обратно было 4 часа езды - пустая трата жизни. Потом было хорошо.Появились пункты продажи билетов на поезда в небольших уездах,и даже в городах.Железные билеты можно купить прямо в пунктах продажи,что намного удобнее.Горожане больше не должны работать в какой-то момент выстроились в очередь, чтобы купить билеты.

CDN можно понимать как точки продажи билетов на поезд, распределенные в каждом округе или поселке.Когда пользователи просматривают веб-сайт, CDN выбирает ближайший к пользователю пограничный узел CDN, чтобы ответить на запрос пользователя, чтобы запрос пользователей Hainan Mobile будет Он не пройдет весь путь до сервера в компьютерном зале Beijing Telecom (при условии, что исходная станция развернута в компьютерном зале Beijing Telecom).

Перед подключением CDN пользователь использует браузер для доступа к службе, процесс взаимного взаимодействия показан ниже.

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

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

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

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

Для некоторых веб-сайтов с большим количеством пользователей, если все пользователи будут обращаться к серверу для запроса данных, сервер быстро выйдет из строя, и пользователи в разных сетях и разных регионах будут запрашивать разные скорости сервера. Для повышения скорости доступа этих пользователей в CDN предлагается новая сетевая архитектура, то есть создавать несколько ближайших к сети пользователей пограничных серверов, а затем кэшировать файлы на этих пограничных серверах (узлах), что и является кэшированием CDN. .

Преимущества CDN очевидны: (1) узлы CDN решают проблему межоператорского и межрегионального доступа, а задержка доступа значительно сокращается; (2) большинство запросов выполняется на граничных узлах CDN, и CDN играет роль в маневрировании, уменьшая нагрузку на исходную станцию.

Что касается кэширования CDN, после того, как локальный кеш браузера недействителен, браузер будет начать запрос к узлу кромки CDN. Аналогично кэшированию браузера, узлы кромки CDN также имеют механизм кэширования. Стратегии кэширования кэширования узла CDN варьируются с различными поставщиками услуг, но обычно следуют стандартным протокол HTTP-стандартным, и установите время кэшированного узла CDN Edge Node через контроль Cache: Max-Age-Age в заголовке ответа HTTP.

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

Сброс кеша CND

Пограничный узел CDN прозрачен для разработчика. По сравнению с принудительным обновлением браузера Ctrl+F5 для аннулирования локального кеша браузера, разработчик может очистить кеш пограничного узла CDN через интерфейс «обновления кеша», предоставляемый поставщиком услуг CDN. , цель. Таким образом, после обновления данных разработчик может использовать функцию «обновления кеша», чтобы принудительно истечь срок действия кеша данных на узле CDN, чтобы гарантировать, что клиент может извлекать самые последние данные при доступе.

кеш браузера

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

Куда идут кешированные ресурсы?

Вам может быть интересно, браузер хранит ресурсы, так где же он хранит ресурсы?

memory cache

MemoryCache, как следует из названия, кэширует ресурсы в памяти, и не требует повторной загрузки ресурсов при ожидании следующего доступа, а получает их непосредственно из памяти. Webkit уже поддерживает memoryCache. В настоящее время ресурсы Webkit делятся на две категории: одна — основные ресурсы, такие как HTML-страницы или загружаемые элементы, а другая — производные ресурсы, такие как изображения или ссылки на скрипты, встроенные в HTML-страницы, соответствующие двум классам в коде. : MainResourceLoader и SubresourceLoader . Хотя Webkit поддерживает memoryCache, он предназначен только для производных ресурсов.Его соответствующий класс — CachedResource, который используется для сохранения исходных данных (таких как CSS, JS и т. д.) и данных декодированного изображения.

disk cache

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

|memory cache | disk cache

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

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

Принцип трехуровневого кэша (приоритет доступа к кэшу)

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

1. Cache-control: max-age

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

На этом этапе вам нужно только установить Cache-Control в заголовке HTTP, возвращаемом файлом, на:

Кэш-контроль: max-age=31536000. Хотя он не изменился в течение 50 лет, стандарт предусматривает, что значение максимального возраста не может превышать один год, а поскольку оно указано в секундах, значение равно 31536000.

Например, этот адрес скрипта 50-летней давности — www.haorooms.com/never-expire.js, тогда каждый раз, когда пользователь запрашивает этот адрес, браузер будет делать запрос уже не на сервер, а напрямую с локального из кеша браузера. Пока не пройдет год или пользователь вручную не очистит кеш.

Но что, если однажды в году вы обнаружите, что содержание сценария необходимо изменить? Очень просто, просто измените имя файла запроса, например, never-expire-v2.js.

Управление кешем: max-age может управлять временем кеша. Как показано ниже:

Максимальный возраст измеряется в секундах, например:

Cache-Control:max-age=645672

Срок действия указанной страницы истекает через 645672 секунды (7,47 дня).

Примечание. Контроль кеша — это функция http1.1, которая может более точно управлять кешем.

В дополнение к максимальному возрасту, описанному выше, Cache-control содержит такую информацию, как:

без кеша: не читать кеш файлов, запрос кеша на веб-сервер, чтобы проверить, используется ли свежий, свежий кеш no-store: это поле очень важно, оно представляет данные, временно хранящиеся на жестком диске, не только-если-кешируются: это означает использование кеша клиента, это обычно используется, когда нет сети, когда у клиента есть кеш max-stale: до тех пор, пока время буфера (max-stale) не превышает заданный период времени, может загружаться с помощью must-revalidate мы можем использовать сеть без условий: роли и те же, но более строгие каждый запрос.проверьте как кеш, так и исходный файл сервера, договоренность об использовании кеширования, несоответствия. s-maxage с maxage, покрывающим maxage, истекает, но только для общего кеша, в приватном кеш игнорируется. общедоступный показанный ответ может быть любым объектом (клиент отправляет запрос, прокси-сервер и т.д.) кеша. частный указывает, что ответ может быть только кеш одного пользователя (возможно, пользователя операционной системы, пользователя браузера), не является общим, не может быть кешем прокси-сервера.

2. Expires

Это поле является спецификацией http1.0, а его значением является строка времени в формате абсолютного времени по Гринвичу, например Expires:Mon,18 Oct 2066 23:59:59 GMT. Это время представляет собой время аннулирования ресурса. До этого времени происходит попадание в кеш. Этот метод имеет очевидный недостаток: поскольку время инвалидации является абсолютным временем, при большой разнице во времени между сервером и клиентом это приведет к путанице в кеше.

Примечание. Expires — это функция http1.0, более ранняя, чем Cache-control, поэтому в ней есть некоторые дефекты. Поскольку время аннулирования является абсолютным временем, когда локальное время клиента изменяется и разница во времени между сервером и клиентом становится больше, кэш будет перепутан. Например, время сервера — 19 апреля 2018 г., а исходное время клиента — 10 апреля 2018 г., но я вручную изменил время клиента на 20 апреля 2018 г., поэтому после того, как время сервера и время клиента различаются, аннулирование кеша, это не правильно.

Вышеупомянутые два кеша следуют принципу трехуровневого кеша.Cache-Control и Expires можно включить одновременно или любой из них можно включить в конфигурации сервера.При одновременном включении Cache-Control имеет высокий приоритет.

3. Кэш согласования Last-Modified 304

Чтобы уведомить браузер о текущей версии файла, сервер отправляет метку времени последнего изменения, например:

Last-Modified:Tue, 06 Jan 2018 08:26:32 GMT

Как показано ниже:

Если это кеш согласования 304, шаги проверки следующие:

Браузер: Эй, мне нужен файл jquery.min.js, если он был изменен после Last-Modified:Tue, 06 января 2018 г., 08:26:32 по Гринвичу, пришлите его мне.

Сервер: (проверьте время модификации файла)

Сервер: Эй, этот файл не менялся с тех пор, у вас уже есть последняя версия.

Браузер: Отлично, тогда я покажу это пользователю.

4. ETag

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

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

Браузер: Эй, мне нужен файл main.css haorooms, соответствует ли он строке "61213-1762a-50bf790757204"
Сервер: (проверьте ETag...)
Сервер: Привет, моя версия здесь тоже "61213-1762a-50bf790757204", у тебя уже последняя версия
Браузер: хорошо, тогда вы можете использовать локальный кеш