Веб-кэширование на примере покупки молока в магазине

Автор оригинала: Kevin Kononenko
  • Перевод

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

Если вы — активный пользователь Интернета (а это, скорее всего, именно так), вы постоянно используете кэширование, но можете и не знать «закулисье»: когда и как оно работает.

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

При кэшировании время загрузки страницы снижается с 2 секунд до 1 секунды… что не очень впечатляет, верно? Но без него не обойтись, когда приходится обрабатывать запросы от большого числа пользователей.

Использовав кэширование в одном из своих веб-приложений, я понял, что просто пройтись по терминам — не лучший способ объяснить этот подход. Мне пришло в голову, что хорошей аналогией будет путь молока от фермы до холодильника.

Чтобы понять мое объяснение, нужно немного знать об основах работы веб-серверов. Приступим!

Переведено в Alconost

Как бы выглядел Интернет без кэширования?


Прежде чем мы перейдем к кэшированию, давайте поразмышляем, как Интернет выглядел бы без него. Представьте на мгновение, что вы живете в XVIII–XIX вв. в сельской местности. У вас есть ферма, но нет холодильника. Вы держите несколько коров, но их молоко быстро портится, и поэтому получить с этого выгоду очень сложно.

Кстати, кое-где у людей до сих пор нет холодильников: они либо выпивают свежее молоко сразу, либо смешивают его с зерном и дают забродить — интересный подход, правда?

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



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



Без кэширования вас ограничивает вычислительная мощность серверов. Кэширование используется для загрузки таких статических ресурсов, как:

  • изображения,
  • CSS,
  • статические HTML-файлы,
  • JavaScript-файлы.

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



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

Кэширование на стороне сервера


Вернемся к нашим коровам. Знаете, что облегчило бы работу нашей молочной фермы?

Магазин с холодильником!

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

Магазин снимает нагрузку с фермы: теперь коров не нужно тревожить для каждого покупателя. Удовлетворением спроса занимается магазин, а вам остается лишь ежедневно доить своих буренок. И еще один плюс: покупать хранящееся в холодильнике молоко теперь смогут и жители окрестных деревень.





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

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

К этому моменту у вас, возможно, уже есть вопросы:

  1. Как определить «популярный» запрос?
  2. Как долго ответы хранятся в кэше прокси-сервера?

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

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

Сеть доставки контента


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

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

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

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





Таким образом, ваши серверы могут отправить копию статических ресурсов на каждый из прокси-серверов в сети CDN, с тем чтобы те обрабатывали локальные запросы, пока ресурсы не перестанут быть «свежими». Популярные поставщики услуг CDN — Rackspace, Akamai и Amazon Web Services.

Кэширование на стороне браузера


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

Нас спасет холодильник!

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

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





И тут важно заметить, что молоко в холодильнике НЕ ПОЯВЛЯЕТСЯ САМО СОБОЙ! Все равно нужно сделать исходный запрос, который дойдет до сервера либо прокси-сервера, и только после этого можно закэшировать некоторые файлы локально.

Откуда браузер знает, когда запрашивать новые файлы с сервера? Ведь нужно же как-то обновлять локальные файлы.

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



Когда начинать использовать кэширование


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

Возьмем, к примеру, Heroku — отличный инструмент для развертывания первого веб-приложения. Однако для реализации кэширования придется использовать отдельный сервис — например, CloudFront от Amazon или CloudFlare, — и на изучение этого понадобится больше времени.

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

Обычно причина этого — работа протокола кэширования на стороне браузера. Чтобы обойти кэш браузера и запросить с сервера новые ресурсы, можно нажать Cmd+Shift+R (если у вас Mac) или Ctrl+Shift+R (на PC).

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 68 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее
  • +6
  • 15,5k
  • 5
Alconost
132,00
Локализуем на 68 языков, делаем видеоролики для IT
Поделиться публикацией

Комментарии 5

    0
    Фраза, котороая, имхо, сбивает немного с толку:
    При кэшировании время загрузки страницы снижается с 2 секунд до 1 секунды…

    Думаю, тут спорный и очень специфичный момент. Ведь если сделать кэширование на стороне клиента, то без серверной обработки страница будет загружаться значительно быстрее. С двух секунд до одной — скорее всего при кэшировании отдельных (не всех) запросов на сервере. Есть большая вероятность, что можно еще поработать над кэшем.
      +1
      Странно, что зашли со стороны производителя. Не логичнее ли со стороны потребителя пойти? Мне нужно молоко, хлеб, мясо и макаллан 15 летний к примеру. Первые три пункта из моего списка наверняка нужны и моим соседям, вот их и кэширует магазин возле дома. А за вискариком придётся идти подальше. Смысл кеширования — угадать запрос потребителя, чтобы увеличить скорость поставки. Тут именно запрос ключевое понятие, а не предложение производителя, если только это не рекламный баннер.
        0
        Классный пример с фермой и молоком!

        Чтобы обойти кэш браузера и запросить с сервера новые ресурсы, можно нажать Cmd+Shift+R(если у вас Mac) или  Ctrl+Shift+R (на PC). 

        Тут вопрос. А разве не ctrl + F5? Или я что-то путаю?
          0
          Все верно. Чтобы вы убедились откройте DevTools, затем нажмите правой кнопкой мышки на refresh page и увидите меню с выбором типа перезагрузки
          0
          спасибо за перевод!

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

          Самое читаемое