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

От автора: если вы когда-либо покупали молоко в супермаркете, вы можете понять кеширование веб страниц на стороне сервера и на стороне браузера. Если вы являетесь активным пользователем Интернета (вероятно, так и есть), вы много раз использовали кеширование. Но, возможно, вы не знаете, когда и как оно работает своей магией за кулисами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У вас, вероятно, есть куча вопросов вроде:

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

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

Что такое CDN?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Kevin Kononenko

Источник: https://dev.to/

Редакция: Команда webformyself.