Как работает кеш браузера?

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

Что такое кеш браузера?

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

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

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

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

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

Заголовки кэширования браузера

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

Кэш-контроль

Заголовок Cache-control был представлен в HTTP/1.1 и считается самой современной реализацией. Есть несколько различных значений, которые вы можете использовать, в зависимости от того, как вы хотите, чтобы браузеры вели себя. Делая его достаточно универсальным. Ниже приведен список директив Cache-Control:

• Без кеша
  Указывает вашему веб-браузеру не обращаться к кешу сразу, а проверять содержимое на сервере. Если он свежий, то его можно подавать из тайника.
• Нет магазина
  Указывает браузеру не кэшировать содержимое каким-либо образом. Он в основном используется при работе с конфиденциальными данными или с данными, которые часто меняются.
• Общественный
  Помечает контент как общедоступный, что означает, что он может кэшироваться браузером и любыми посредниками (например, прокси-серверами и т. д.).
• Частный
  Используется для пометки содержимого как частного, что означает, что его может кэшировать только браузер, а не промежуточные прокси-серверы и тому подобное. Обычно это относится к пользовательским данным.
• Максимальный возраст
  Max-age представляет максимальное время в секундах, в течение которого контент может оставаться в кеше браузера, прежде чем клиенту потребуется его повторная проверка. В отличие от заголовка Expires, который мы вскоре рассмотрим, max-age определяет относительное значение в секундах с момента кэширования содержимого, а не абсолютную дату истечения срока действия.
• S-максаж
  Это похоже на max-age, но используется только для промежуточных кешей.
• Обязательна повторная проверка
  Заставляет браузер перепроверять контент каждый раз, когда он ему нужен, вместо того, чтобы просто обслуживать его непосредственно из кеша браузера.
  Это удобно в случае прерывания сети.
• Прокси-повторная проверка
  Аналогично обязательной повторной проверке, но применяется только к промежуточным кэшам.
• без преобразования
  Указывает браузеру никоим образом не преобразовывать содержимое, полученное с сервера (обычно сжатие и т. д.).

Этаг

Заголовок ответа Etag используется для идентификации конкретного ресурса. Каждый раз, когда изменяется определенный ресурс, создается новый Etag. Таким образом экономится полоса пропускания, поскольку веб-серверу не нужно давать полный ответ, если Etag не изменился. Следовательно, заголовок Etag включен по умолчанию в Nginx и Apache, а значения Etag генерируются автоматически, поэтому вам не нужно ничего указывать.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

Истекает

Это было введено в HTTP/1.0 и определяет конкретную дату в будущем, когда контент будет считаться устаревшим. По сути, это дата «годен до» для контента. Например, Срок действия истекает: четверг, 25 мая 2017 г., 12:30:00 по Гринвичу.

Прагма

Это несколько устаревший заголовок HTTP/1.0, который в основном используется для обратной совместимости. Вставка Pragma: no-cache заставит ваш браузер вести себя аналогично Cache-Control: no-cache .

Как реализовать политику кэширования на вашем сайте

Есть два способа реализовать политику кэширования на вашем веб-сайте. Во-первых, определить заголовки ответа кэширования в конфигурации веб-сервера. Во-вторых, сделать это непосредственно в PHP. Ниже приведены примеры двух самых популярных веб-серверов, Apache2 и Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Как видите, это довольно просто. В первом примере мы используем директиву FileMatch apache2 для сопоставления с определенным набором типов файлов (.ico, .pdf и т. д.) и делаем их общедоступными с максимальным возрастом 84600 секунд. Во втором мы снова сопоставляем определенные типы файлов, используя директиву местоположения nginx, и включаем максимальный возраст 365 дней. Мы также определяем их как «общедоступные», используя предложение добавления заголовка.

PHP

Если вы хотите добавить заголовки ответов непосредственно в свой код, просто используйте команду заголовка PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Как проверить, работает ли

Вы можете легко проверить, чтобы увидеть правила кэширования браузера, используя, например, веб-консоль Firefox или инструменты разработчика Chrome:

1. Нажмите на значок гамбургера в правом верхнем углу.
2. Выберите «Дополнительные инструменты» > «Инструменты разработчика».
3. Введите свой URL-адрес в адресную строку и нажмите Enter.

Вы должны увидеть список запросов по мере загрузки вашего URL. Выберите ресурс, нажав на него. Проверьте заголовки ответа справа, особенно код состояния. Он печатает HTTP-код 200, но в скобках указывает, что он из кеша памяти.

Это означает, что ресурс загружался автоматически из локального хранилища кеша, а не запрашивался с сервера.

В тех случаях, когда у вас есть пункт «обязательная повторная проверка» в заголовке Cache-Control, код состояния будет 304 (не изменено). Это означает, что ваш браузер повторно проверил ресурс на сервере, и сервер ответил, что содержимое не изменилось, поэтому его можно обслуживать из кеша браузера.

Перейдите к отключению кеша, установив флажок «Отключить кеш» и нажав «Обновить».

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

Вывод

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