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

Кэширование браузера nginx и PHP

Кэшируются изображения стили CSS и Javascript. Реализуется кэширование за счет добавления заголовка Cache-control.

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

Кэширование браузера nginx (параметры, отвечающие за кэширование в конфигурационном файле)

В конфигурационном файле Nginx кэширование JS/CSS включается следующим образом:

server {

...

location ~* ^.+\.(js|css)$ {

expires max;

}

...

}

expires max говорит о том, что TTL устанавливается в бесконечность и в случае если файлы на сервере будут изменены клиент об этом никогда не узнает поскольку повторный запрос отправлен не будет.

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

Обычно в конфиге сервера устанавливается именно значение expires max, затем в приложении при подключении css и js файлов определяются их версии, которые должны меняться каждый раз при обновлении содержимого.

Указание заголовков, задающих кэширование на уровне приложения

<link href="/styles.css?r2" type="text/css" />

<script type="text/javascript" src="/scripts.js?r3">

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

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

Дополнительный заголовок HTTP Expires указывает дату и время, когда браузер должен обновить кэш (заголовки можно использовать совместно, Expires при использовании обоих заголовков имеет меньшее значение):

Expires: Thu, 31 Dec 2017 14:00:00 GMT

Оба заголовка могут быть заданы в программном коде на уровне приложения.

Включение кэширования в РНР

Большая часть веб-проектов пишутся на языке РНР, в РНР HTTP заголовки Cache-control и Expires задаются следующим образом:

<?

header("Cache-control: public");

header("Expires: " . gmdate("D, d M Y H:i:s", time() + 7*24*60*60) . "GMT");

Время в HTTP-заголовке всегда задается по Гринвичу (GMT). Чтобы header Expires корректно отрабатывал HTTP время должно в точности совпадать с временем, установленным на сервере.

Expires в примере задает время истечения срока жизни кэша на стороне браузера пользователя равное текущему HTTP времени + 7 дней, 24 часа, 60 минут и 60 секунд

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

Также применяются другие инструкции:

no-cache - устанавливает запрет на кэширование запроса

max-age - определяет время, на которое данные будут кэшироваться - значение задается в секундах max-age=[секунды]

s-maxage - аналогичен предыдущему, применяется к общему кэшу (браузерному + прокси)

no-store - указывает кэшу не сохранять копию содержимого

must-revalidate - передает сообщение о необходимости обновления кэша в обязательном порядке при поступлении новой информации

proxy-revalidate - аналогичен предыдущему, применяется к прокси

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