Проверьте обновленную версию здесь
Возможно, вы заметили, что эта подсея только изменила имя: не было никаких о проектных моделях, не было никакого смысла сохранить эти два как часть того же.
Как сказано в первом эпизоде, эта статья будет больше о том, что уже там в дикой природе с точки зрения кэширования и того, как мы, как разработчики, должны иметь дело с этим.
Что мы собираемся покрыть, это то, что вы обычно решаете один раз, или вы вообще не решаете, потому что некоторые рамки и библиотеки принимают эти решения для вас. Таким образом, идея здесь состоит в том, чтобы иметь место для места, где вы можете получить понимание или просто пыльте этих концепций каждый раз, когда вы снова должны иметь дело с кэшированием.
Обслуживание правильной версии приложения
Служение правильной версии веб-приложения начало стать чем-то, что вы должны быть обеспокоены только «недавно».
Назад в те дни у нас были технологии Server-Side, такие как Java, JSP и PHP, которые использовались для обслуживания тонких клиентских приложений с небольшим или без логики. Со временем клиенты стали толще, и мы начали расщеплять обязанности между внешними преобразованиями и спиной к точке, где Frontend и Backend обычно представляют собой два совершенно разных приложения 1, которые просто предназначены для общения, а не «то же самое».
Когда приложение запускается сервером, обслуживая правильную версию, не вызывает беспокойства, потому что браузер обычно просто спрашивает «эта страница» и мяч в суде сервера в отношении определения того, какая версия этой страницы служит 2 Отказ
Когда приложение живет на стороне клиента, к сожалению, страница, запрошенная браузером, обычно является Мы могли теоретически просто разбить другую К сожалению, это больше не правда. Браузеры сейчас понимают, меняет что-то 3 так вместо того, чтобы спросить снова Один из способов выполнения этого добавления версии приложения в виде параметра строки запроса в Таким образом, каждый раз, когда мы поднимаем новую версию пакета, браузер вынужден выполнить новый запрос, потому что URL и Еще один аналогичный (и намного более распространенные в наши дни) подход называет пакет с хэшем, который отличается от каждого развертывания. Хеш может основываться на фактической версии, в коде, на последнем номере ревизии или даже временного метка момента, когда произошла сборка. Эта техника довольно популярна, и большую часть времени «бесплатно» в CLIS для популярных рамок (например, создание приложения React App, угловой CLI, VUE CLI, EMBER CLI). Вы можете реализовать его, используя инструмент сборки, который переписывает Среди вещей идет рука об руку с Не собираясь слишком много в деталях о потрясающих вещах, которые вы можете сделать с сервисными работниками 4, вы можете представить их в качестве резьбы JavaScript, работающего параллельно в браузере, чьи жизненный цикл не связан с одним. Причина, по которой мы так заинтересованы в них вот, что в сервисном работнике API у нас есть доступ к интерфейсу кэша. Есть некоторые рецепты кэширования, которые вы можете следовать, но наиболее распространенными являются: Конвенция об именах заимствована от одного из величайших ресурсов по этому вопросу, которую вы можете найти онлайн, а именно Официальная кулинарная книга Google Отказ Если вы следите за тем, что произошло в предыдущих эпизодах, вы, безусловно, заметите, что роль, которую играют работникам службы в этих рецептах, - это то, что в целом мы позвонили Диспетчер ресурсов Отказ Следовательно, в следующих параграфах я собираюсь показать, как эти шаблоны отображаются на то, что мы сказали в предыдущих статьях. Ну, чтобы быть справедливым, есть еще один очень хороший ресурс об этой теме, который является Сервис Mozilla Service Cookbook - Кэширование стратегий , но я нахожу перспективу Google легче следовать. Я настоятельно рекомендую вам читать оба все равно, чтобы иметь более широкий обзор спектра. В этом шаблоне мы делаем кеш писать на В поваренной книге Google это приходит в две разные моды, называемые «как зависимость» и «не как зависимость», которые в основном «записывают» и «пишут позади» этой статьи. Из перспективы стратегии кэширования этот шаблон не отличается от Предположим, вы хотите реализовать кнопку «Прочитать позже» в блоге. Что вам нужно сделать, это получить статью и хранить ее. Решив, если вы хотите сохранить, синхронно (как в «записи») или асинхронно (как в «записи позади») зависит от вашего использования, но оба подхода выполняются. Из трех примеров мы предоставляем, это, безусловно, наиболее распространенным, поскольку вы можете применить эту стратегию каждый раз, когда вам нужно использовать данные по сети. Реализация, предложенная в оффлайн поваренной книге, «прочитано» - не более, не меньше! В прекрасном мире веб-разработки нахождение нового модного способа прикручиваться никогда не проблема. Это именно поэтому вы можете понять, как браузер связывается с сервером в отношении кэшированного контента. Отказ от ответственности Несмотря на то, что я всегда буду ссылаться на браузер в следующем абзаце, это также относится к серверу для связи сервера, поэтому Backenders могут найти эту интересную. Опять же, я отношусь только к самым интересным случаям, но здесь вы можете найти список ресурсов, охватывающих больше случаев: Несмотря на то, что имя не совсем явно, заголовок HTTP Etag - один из заголовков, которые мы можем использовать для управления кэшированным контентом. Etag означает «тег Entity», и это способ пометки с хэш определенной версией контента, который мы обмениваем. В этом случае примером будет лучше, чем тысяча слов. Предположим, что вы как клиент (как другой сервер или браузер) запрашиваются Как мы увидим в следующих разделах, Предположим, что через одну минуту мы снова просим один и тот же ресурс, но на этот раз мы прикрепляем следующие заголовки запроса: Что в основном означает «дать мне либо допустимое кэшированное содержание, либо устаревшее содержимое до тех пор, пока его версия является A23G1T4». На этом этапе сервер попытается служить кэшированному контенту, а затем возвращается на несвежий контент с этой версией и, если даже не найдено, то он выполняет фактический запрос. В случае обнаружения кэшированного контента, ответ будет: Заголовок HTTP-файла Cache Control используется для определения политики кэша, как с стороны клиента (например, «не давать мне кэшированного контента») и с сторон сервера (например, «Этот контент истекает через две минуты "). Cache-Control имеет тонны директив, которые могут быть объединены во многих модных способах, которые невозможно покрыть пару абзацев. Может быть, имеет смысл написать отдельную статью о том (а если вы заинтересованы, пожалуйста, дайте мне знать!). Мы будем покрывать здесь только самые распространенные директивы. Эти два плохих мальчика, вероятно, наиболее смешаны. Директива При использовании как Заголовки ответа , При использовании как Заголовок заголовка , Это выглядит довольно очевидно, но они на самом деле скрывают маленький крик. Что значит быть владельцем информации? Предположим, у вас есть микросервисное приложение с воротами API перед ним. Каждый сервис и Шлюз API может иметь кэш, но только сами микросермы владеют информацией. Обычно содержание, помеченное как Следовательно, в приведенном выше примере, браузер может фактически кэшировать эту информацию (поскольку пользователь владеет его), а микросервис, исходящийся информацией, может, но шлюз API не может и любой в конечном итоге CDN между не может. При использовании в запросах При использовании в ответах Это конец этой рождественской полосы, но, возможно, не конец этой серии кэширования. Кто знает? Есть намного больше вещей, которые мы можем покрыть ... Как всегда, если у вас есть какие-либо отзывы (например, почему вы остановились с мемами? Почему ты так одержим кэшированием? Как вы могли бы выполнить целый эпизод, не упоминая еду?) Не стесняйтесь протянуть. До скорого! 1 . У нас до сих пор есть серверные приложения, но Обычно Ордерный слой, ответственный за рендеринг клиента, все еще не заботится о других частях деловой логики, заставляя все все еще разделить в определенную степень. 2 . Это не совсем верно: есть способы получения устаревшего контента даже с приложениями визуализации сервера. Мы собираемся лечить, как получить свежий контент в этом (и других случаях) в разделе заголовков HTTP. 3 . Мы немного более глубоко рассмотрим, как браузеры действительно понимают, когда запросить свежие данные или нет в разделе заголовков HTTP 4 . Я не позволяю тебе вниз ❤ Здесь очень хорошее введение в Google по этому вопросу.index.html с
app.js каждый раз держать index.html то же.app.js Они просто предположили, что это никогда не изменилось и служит старому, если мы не донесете об этом не делать этого.SRC Отказ
index.html измененный.
index.html включая номер версии/хеш или, в конечном итоге, используя Mainesest.json получить более мелкозернистый контроль. Некоторые ссылки, которые помогут вам с реализацией:Mainesest.json ;Оптимизация доставки контента с обслуживающими работниками
Mainesest.json (Особенно в отношении прогрессивных веб-приложений) у нас есть обслуживание работников.На установку
Установить Крюк работника обслуживания. Это выглядит особенно полезно, когда вы хотите хранить прикладную оболочку, чтобы иметь возможность предоставить автономный опыт.На взаимодействии пользователя
На установку ОтказНа сетевой ответ
Стандарты W3C: заголовки HTTP
Etag
Получить/Собаки Отказ Концерт ответит на 200 и следующие заголовки ответа:200 OK
Content-length: 512
Cache-Control: max-age=60
ETag: a23g1t4
Макс-age = 60 говорит нам, что содержание станет устаревшим за 60 секунд.GET /dogs
If-None-Match: a23g1t4
304 Not Modified
Content-length: 512
Cache-Control: max-age=60
ETag: a23g1t4
Cache-Control.
No-Cache & No-Store
No-Store - используется как директива в Запросить заголовки и Заголовки ответа - просто означает, что любой механизм кэширования должен быть пропущен. Таким образом, клиент не должен кэшировать ответ, который он получает (при использовании в запросе), и сервер не должен кэшировать ответ на ускорение следующих запросов (при использовании в ответе).Нет кэш означает, что содержание обслуживается автоматически, будет автоматически для последующих запросов. Это в основном означает, что содержание может быть кэшировано или нет, но, если оно должно быть подтверждено (например, использование Etag ) перед тем, как служить.Нет кэш Значит, мы не заботимся о том, что кэшируется, и мы хотим свежий запрос. Тем не менее, это не определяет, может ли сервер кэшировать ответ на ускорению следующих запросов (в отличие от No-Store ) и обычно сервер будет кэшировать этот ответ.публично и частные
публичный Большую часть времени бесполезно и, на самом деле, вы редко нашли это. Это просто означает «этот контент может быть безопасно кэширован», но обычно у вас есть другие директивы, говорящие вам, что (например Max-Age , как мы собираемся увидеть).Частный вместо этого немного более сложный. Это не значит, что вы не можете вступить в ответ вообще, но скорее говорят: «Вы можете кэшировать, только если у вас есть контент».Частный только для одного конкретного пользователя, поэтому только этот пользователь и отправитель этой информации могут ее кэшировать.максимальный возраст
Макс-age = n означает, что клиент готов принять контент, который не старше n секунды.Макс-age = m означает, что доставленная информация будет считаться устаревшей в м секунды.
Оригинал: "https://dev.to/shikaan/how-i-learned-to-stop-worrying-and-love-the-cache---stick-with-it-3636"