Веб-кэширование объясняется покупкой молока в супермаркете

1656601696 veb keshirovanie obyasnyaetsya pokupkoj moloka v supermarkete

Кевин Кононенко

1*XUwza_UlWCm8VJ8up0Q1cg

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

Если вы являетесь упорным пользователем Интернета (вероятно, вы есть), вы получали выгоду от кэширования снова и снова. Но, возможно, вы не знаете, когда и как это делает свою магию за кулисами.

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

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

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

Чтобы понять это руководство, вам просто нужно знать об основах веб-серверов. Давайте разберемся!

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

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

Быстрая остановка: некоторые культуры все еще не имеют доступа к охлаждению. Они либо будут пить сырое молоко прямо из вымени коровы, либо смешивают молоко с зернами и дают ему бродить. Любопытно.

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

0*UqjXaIdDFuVLfE5k

Кроме того, вы даже не можете думать о том, чтобы добавить больше коров и расширить свою деятельность, поскольку у вас такое ограниченное распространение. Только другие жители вашей деревни могут покупать ваше молоко. У вас есть четкие пределы.

0*LaOWTms2NkZtDFj5

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

  • Изображение
  • CSS
  • Статические файлы HTML
  • файлы JavaScript

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

0*4ajis8HoFZeo7SRf

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

Что такое кэширование на стороне сервера?

Возвращаемся к нашему сценарию фермы. Знаете, что значительно облегчит ведение успешной молочной фермы?

Супермаркет с холодильником!

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

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

1*kko1_aNf6X-cZzUy9IwF-A
1*jwi2U9sBznjtd_zZoszx6w

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

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

У вас, пожалуй, есть куча вопросов типа,

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

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

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

Что такое CDN?

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

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

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

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

1*RvgDAlDHt24dcvBImoxCZQ
1*H8xPw2BZp_bAwgaUKeI2eA

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

А как насчет кэширования браузера?

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

Решение? Холодильник!

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

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

1*RncfZ7NATKE9ciV-F54ODg
1*Wct_mY7Bbuvsd4pwyQJ5Dg

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

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

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

0*7yAXQNZN-0XzIQHB

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

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

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

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

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

Получите больше наглядных пособий

Вам понравился этот урок? Дайте ему «хлопок»! Или зарегистрируйтесь здесь, чтобы получить мои последние визуальные пособия из блога CodeAnalogies.

Добавить комментарий

Ваш адрес email не будет опубликован.