![](https://habrastorage.org/webt/g1/n3/ou/g1n3ou0kugfon0ruqtm_s8qtjgo.jpeg)
Если вы покупали молоко в магазине, вы сможете понять, как работает кэширование на стороне сервера и на стороне браузера.
Если вы — активный пользователь Интернета (а это, скорее всего, именно так), вы постоянно используете кэширование, но можете и не знать «закулисье»: когда и как оно работает.
С точки зрения разработчика, кэширование упрощает создание высокопроизводительных веб-приложений и веб-серверов: не нужно постоянно оптимизировать перегруженные тысячами запросов серверы — вы просто внедряете протоколы кэширования, и жить становится намного проще.
При кэшировании время загрузки страницы снижается с 2 секунд до 1 секунды… что не очень впечатляет, верно? Но без него не обойтись, когда приходится обрабатывать запросы от большого числа пользователей.
Использовав кэширование в одном из своих веб-приложений, я понял, что просто пройтись по терминам — не лучший способ объяснить этот подход. Мне пришло в голову, что хорошей аналогией будет путь молока от фермы до холодильника.
Чтобы понять мое объяснение, нужно немного знать об основах работы веб-серверов. Приступим!
Переведено в Alconost
Как бы выглядел Интернет без кэширования?
Прежде чем мы перейдем к кэшированию, давайте поразмышляем, как Интернет выглядел бы без него. Представьте на мгновение, что вы живете в XVIII–XIX вв. в сельской местности. У вас есть ферма, но нет холодильника. Вы держите несколько коров, но их молоко быстро портится, и поэтому получить с этого выгоду очень сложно.
Кстати, кое-где у людей до сих пор нет холодильников: они либо выпивают свежее молоко сразу, либо смешивают его с зерном и дают забродить — интересный подход, правда?
В общем, вам хотелось бы продавать молоко другим жителям деревни. Но им придется выпивать его очень быстро. Допустим, одна корова может давать десять литров молока в день. Это значит, что если на ферму за молоком вдруг придет слишком много людей, вам придется попросить их вернуться на следующий день.
![](https://habrastorage.org/getpro/habr/post_images/576/bc0/840/576bc0840350454bab067fda50047048.png)
И это не тот случай, когда можно просто завести еще пару коров и расшириться, ведь у вас ограничена покупательская база: молоко покупают только жители одной деревни. Поэтому есть вполне определенные пределы.
![](https://habrastorage.org/getpro/habr/post_images/33a/8bf/1ef/33a8bf1efe0c7d3844dcc47992763ff1.png)
Без кэширования вас ограничивает вычислительная мощность серверов. Кэширование используется для загрузки таких статических ресурсов, как:
- изображения,
- CSS,
- статические HTML-файлы,
- JavaScript-файлы.
По умолчанию для каждого входящего запроса сервер должен отправлять новый ответ. Но запрос на загрузку страницы может фактически означать четыре отдельных запроса — по одному на каждую из категорий выше. Если учесть, что файлы изображений обычно довольно объемные, то большое число пользователей изо всех уголков мира легко перегрузят ваши серверы, и страницы будут загружаться дольше.
![](https://habrastorage.org/getpro/habr/post_images/008/e26/924/008e2692490ff8fe8d94d4b373c8e60e.png)
В идеале нагрузку на серверы хотелось бы уменьшить, каким-то образом сохраняя ответы на распространенные запросы. Серверу не придется обрабатывать каждый новый отдельный запрос — ответ будет получен из кэша. Конечно, всегда можно раскошелиться и добавить еще серверов, но это может привести к неконтролируемому росту расходов.
Кэширование на стороне сервера
Вернемся к нашим коровам. Знаете, что облегчило бы работу нашей молочной фермы?
Магазин с холодильником!
Жителям больше не нужно будет приходить на ферму и сразу же выпивать молоко, ведь его можно будет спокойно хранить в течение нескольких недель.
Магазин снимает нагрузку с фермы: теперь коров не нужно тревожить для каждого покупателя. Удовлетворением спроса занимается магазин, а вам остается лишь ежедневно доить своих буренок. И еще один плюс: покупать хранящееся в холодильнике молоко теперь смогут и жители окрестных деревень.
![](https://habrastorage.org/getpro/habr/post_images/a1a/385/13f/a1a38513fdecf151232b0df353cd4d9f.png)
![](https://habrastorage.org/getpro/habr/post_images/4b1/793/a88/4b1793a88037c9e7078ea85230e2d915.png)
Кэш на стороне сервера будет, подобно магазину, обрабатывать популярные запросы и доставлять контент намного быстрее и надежнее.
На картинке выше изображен кэширующий прокси-сервер: он хранит статические файлы, которые используются для ответа на распространенные запросы. Этот сервер перехватывает такие запросы и быстро дает ответ, что позволяет снять соответствующую нагрузку с основных веб-серверов.
К этому моменту у вас, возможно, уже есть вопросы:
- Как определить «популярный» запрос?
- Как долго ответы хранятся в кэше прокси-сервера?
Чтобы это объяснить, понадобится более подробное руководство по настройке кэширования, но сейчас нам важно знать об одной важной концепции — свежесть. На кэширующем прокси-сервере будут разные файлы, кэшированные в разное время, и ему нужно решить, нужно ли еще выдавать эти файлы. Это будет зависеть от политики кэширования.
Что тоже напоминает хранение молока в магазине. Директору магазина нужно решить, как долго молоко будет лежать, прежде чем его выбросят. Кэширующие прокси-серверы измеряют эффективность своей работы по проценту попадания в кэш — доли контента, который можно выдать через кэширующий сервер.
Сеть доставки контента
Итак, у нас есть один продуктовый магазин, продающий ваше молоко. Уже неплохо, но жители могут покупать молоко только в одном местном магазине, и вряд ли кто-то приедет за ним издалека. Чтобы расширить производство, нужно продавать молоко в большем числе магазинов.
Итак, вы начинаете развозить молоко в другие магазины и таким образом удовлетворяете спрос в гораздо более обширном географическом регионе. Это похоже на сеть доставки контента (CDN) — расположенные по всему миру прокси-серверы (такие, как рассмотренные выше).
Как конечному пользователю вам может казаться, что высокоскоростной интернет позволяет очень быстро загружать большинство сайтов. Однако в первую очередь это возможно благодаря использованию CDN для быстрой доставки статических файлов.
Если вы находитесь в Англии и пытаетесь загрузить файл, кэшированный на сервере в Хабаровске, ответ придет с некоторой задержкой: на прохождение по тысячам километров кабелей сигналу понадобится время. Поэтому локальный кэширующий прокси-сервер в Великобритании позволит загружать сайт быстрее.
![](https://habrastorage.org/getpro/habr/post_images/97c/30f/4e6/97c30f4e69dcfb47c096bf6ec0f9fd82.png)
![](https://habrastorage.org/getpro/habr/post_images/13f/e13/f58/13fe13f581fa22e7761da2be7f8f990b.png)
Таким образом, ваши серверы могут отправить копию статических ресурсов на каждый из прокси-серверов в сети CDN, с тем чтобы те обрабатывали локальные запросы, пока ресурсы не перестанут быть «свежими». Популярные поставщики услуг CDN — Rackspace, Akamai и Amazon Web Services.
Кэширование на стороне браузера
Итак, теперь люди со всей страны (и даже мира) могут принести домой холодное молоко, произведенное на вашей ферме. Осталась одна проблема: они не могут хранить молоко дома, поэтому после покупки приходится быстро выпивать его, а за новой порцией снова отправляться в магазин. Получается, что такая система все еще не очень удобна для покупателей.
Нас спасет холодильник!
Имея холодильник, можно хранить молоко дома и не бегать каждый раз в магазин. В терминах кэширования это — совершенно другое место хранения статических ресурсов, поскольку оно находится на стороне клиента (иначе говоря, на компьютере, где запущен браузер), а наш прокси-сервер был в удаленном месте.
Такой подход не только удобен пользователю в случае часто посещаемых сайтов, таких как Facebook или Amazon, но и позволяет этим сайтам экономить на серверных расходах за счет меньшего числа обрабатываемых запросов.
![](https://habrastorage.org/getpro/habr/post_images/4c2/76d/0ca/4c276d0ca2761fc3d8013b5f113f6714.png)
![](https://habrastorage.org/getpro/habr/post_images/5d2/2f8/1c1/5d22f81c150440db90057c724df7caba.png)
И тут важно заметить, что молоко в холодильнике НЕ ПОЯВЛЯЕТСЯ САМО СОБОЙ! Все равно нужно сделать исходный запрос, который дойдет до сервера либо прокси-сервера, и только после этого можно закэшировать некоторые файлы локально.
Откуда браузер знает, когда запрашивать новые файлы с сервера? Ведь нужно же как-то обновлять локальные файлы.
Так же, как производители молока ставят срок годности на упаковке, так и серверы добавляют определенный идентификатор в заголовок ответа HTTP. Для HTTP-кэширования фактически существует четыре различных системы. Описанный выше сценарий очень похож на метод «срока годности». Однако в случае некоторых других методов перед выдачей кэшированного файла требуется отправить запрос на сервер.
![](https://habrastorage.org/getpro/habr/post_images/e38/e72/2a7/e38e722a78a2600596b8e03ea2be2051.png)
Когда начинать использовать кэширование
Предположим, вы создаете свое первое веб-приложение. Пока у вас нет тысяч пользователей, вам, скорее всего, не нужно беспокоиться о протоколах кэширования: стоимость работы сервера и без этого будет достаточно низкой. Однако с ростом пользовательской базы нужно будет внедрить и кэширование — если вы хотите, чтобы приложение загружалось быстро.
Возьмем, к примеру, Heroku — отличный инструмент для развертывания первого веб-приложения. Однако для реализации кэширования придется использовать отдельный сервис — например, CloudFront от Amazon или CloudFlare, — и на изучение этого понадобится больше времени.
Заметить кэширование на стороне браузера можно, когда вы пытаетесь перезагрузить страницу и получить новые статические ресурсы, но страница при этом не меняется, сколько бы раз вы ее не обновляли.
Обычно причина этого — работа протокола кэширования на стороне браузера. Чтобы обойти кэш браузера и запросить с сервера новые ресурсы, можно нажать Cmd+Shift+R (если у вас Mac) или Ctrl+Shift+R (на PC).
О переводчике
Перевод статьи выполнен в Alconost.
Alconost занимается локализацией игр, приложений и сайтов на 68 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Подробнее