Кэширование кода для javascript-разработчиков на примере chrome

Паттерн №1: неизменяемый контент и долгий max-age кэша

  • Содержимое по URL не меняется, следовательно…
  • Браузер или CDN могут без проблем закэшировать ресурс на год
  • Закэшированный контент, который младше, чем заданный max-age может использоваться без консультации с сервером

Страница Эй, мне нужны «/script-v1.js», «/styles-v1.css» и «/cats-v1.jpg» 10:24

Кэш У меня пусто, как насчет тебя, Сервер? 10:24

Сервер ОК, вот они. Кстати, Кэш, их стоит использовать в течение года, не больше. 10:25

Кэш Спс! 10:25

Страница Ура! 10:25

Следующий день

Страница Эй, мне нужны «/script-v2.js», «/styles-v2.css» и «/cats-v1.jpg» 08:14

Кэш Картинка с котиками есть, остального нет. Сервер? 08:14

Сервер Легко — вот новые CSS & JS. Еще раз, Кэш: их срок годности не больше года. 08:15

Кэш Супер! 08:15

Страница Спасибо! 08:15

Позднее

Кэш Хм, я не пользовался «/script-v1.js» & «/styles-v1.css» достаточно долго. Пора их удалять. 12:32

Используя этот паттерн, вы никогда не меняете контент определенного URL, вы меняете сам URL:

В каждом URL есть что-то, меняющееся одновременно с контентом. Это может быть номер версии, модифицированная дата или хэш контента (этот вариант я и выбрал для своего блога).

В большинстве серверных фреймворков есть инструменты, позволяющие с легкостью делать подобные вещи (в Django я использую ); есть также совсем небольшие библиотеки в Node.js, решающие те же задачи, например, gulp-rev.

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

Как проверить работу Hyper Cache

После всех проведенных выше настроек надо проверить, как все работает.

Плагин не показывает кэш администратору сайта – администратор получает полную версию всегда.

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

Дальше, нажмите сочетание клавиш Ctrl+U или щелкните правой кнопкой мыши по фону блога и выберите пункт «Исходный код страницы». Пролистайте в самый конец, там должен появиться тег с указанием того, что вы видите кэш с датой его создания – если тег есть, значит все в порядке и плагин работает.

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

Состояние гонки и обновление данных

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

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

  • пользователь 1 получил сущность из кэша;
  • пользователь 1 обновил сущность в БД;
  • пользователь 2 получил сущность из кэша;
  • пользователь 1 обновил данные в кэше;
  • пользователь 2 обновил сущность в БД, но перезаписал её старыми данными, потому что сущность была неактуальна на момент получения и т. д.

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

Когда вы получаете любую сущность в коде с целью её обновления, всегда используйте данные из БД.

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

Вы можете либо обращаться в нужных местах к ProductRepository вместо ProductDataProvider, либо добавить аргумент к методу DataProvider. Например, такой ($fromCache):

class ProductDataProvider
{
    // ...
    public function get(int $productId, bool $fromCache = true) ?array
    {
        $cacheKey = sprintf('product_%d', $productId);
 
        $product = $fromCache ? $this->cache->get($cacheKey)  null;
        if ($product !== null) {
            return $product;
        }
        $product = $this->productRepository->find($productId);
 
        if ($product !== null) {
            $this->cache->set($cacheKey, $product);
        }
 
        return $product;
    }
}

Кэширование на уровне шаблонов

Вот так
выполняется кэширование отдельных типов страниц на уровне представлений. Кроме
того, довольно полезным является делать кэширование на уровне шаблонов.
Например, мы можем выполнить кэширование отдельно сайдбара, а не всей страницы.
Для этого откроем базовый шаблон base.html и вначале (или в
любом удобном месте) импортируем специальный тег для реализации кэша:

{% load cache %}

И, затем, мы его
используем для сайдбара:

{% cache 60 sidebar %}
...
{% endcache %}

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

cats = Category.objects.annotate(Count('women'))

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

Валидация кеша

Валидация кеша запускается при нажатии пользователем кнопки перезагрузки. Кроме того, она может выполняться в ходе обычного просмотра страниц, если кешированный ответ включает заголовок «Cache-control: must-revalidate». Другим фактором являются настройки кеширования браузера — можно потребовать принудительной валидации при каждой загрузке документа.

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

Заголовок ответа является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет её значение. Если в ответе присутствует заголовок , клиент может транслировать его значение через заголовок If-None-Match (en-US) будущих запросов для валидации кешированного ресурса.

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

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

Использование в приложении

В приложении заголовки Cache-Control обычно не используются, т.к. приложения генерируют динамический контент. Если же у вас редко изменяется сайт, вы можете добавить кэширование, чтобы снизить количество запросов на сервер. Например, в PHP:

header("Cache-control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60*60) . " GMT");

Включим кэш на 1 час

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

Использование на Web сервере

Заголовки для картинок и статических файлов (JS/CSS) нужно устанавливать на Web сервере.

Nginx

В Nginx кэширование включается инструкцией expires:

server {
...
location ~* ^.+.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
expires max;
}
...
}

Включит кэш на бесконечный срок для файлов с перечисленными расширениями

Apache

В Apache кэширование включается модулем mod_expires и выглядит так:

<FilesMatch ".(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">

Header set Cache-Control "max-age=2592000, must-revalidate"

Включает кэш для файлов на 1 месяц

Как очистить кэшированную оперативную память

Удалите неиспользуемые приложения

Все неиспользуемые приложения, особенно те, которые добавляются в автозагрузку, попадают в память. В системе множество программ, которые пользователи не используют, кэшируются, занимают ОЗУ. Вспомните только не убираемую автозагрузку uTorrent в Windows 10.

Запретите использование данных для открытия приложений после перезапуска или обновления. В новой версии параметр назыв. Автоматически сохранять мои перезапускаемые приложения при выходе из системы и перезапускать их после входа.

Много писали о тонкой настройке автозапуска программ Windows 10. Перейдите в расположение Параметры > Приложения > Автозагрузка. И выключите запуск всех ненужных программ перетягиванием ползунков.

Отключение ненужных служб

В системе с каждым обновлением становиться всё больше и больше служб. Хотя для обычного пользователя далеко не все они нужны. Смотрите, как отключить на примере службы криптографии. Более подробно: оптимизация и ускорение Windows 10 для слабых ноутбуков.

Откройте управление службами выполнив команду services.msc в окне Win+R. Теперь достаточно изменить тип запуска ненужной службы на Отключено. Внимательно читайте описание службы, которую Вы отключаете и смотрите её зависимости.

Очистка оперативной памяти

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

Можно воспользоваться различным софтом для очистки оперативной памяти. В ближайшем будущем такая функциональность будет непосредственно в ОС. Смотрите подробней: как очистить оперативную память на Windows 10.

Заключение

  • Значение кэшировано — это объём оперативной памяти, который не используется запущенными программами, занятый кэшированными данными с диска. В большинстве случаев, это те процессы, которые сейчас не используются и находятся в режиме ожидания.
  • В диспетчере задач или мониторе ресурсов много памяти кэшировано? Не стоит нервничать. Это ускоряет процесс запуска приложений и открытий различных файлов. Можно с уверенностью утверждать, при необходимости пространства эта память освобождается.
  • Можете включить файл подкачки — использование пространства на диске, если недостаточно оперативной памяти. Возможно, даже станет больше доступно ОЗУ. Самый надёжный вариант решения задачи, это добавление дополнительных планок оперативной памяти.

Как кэш браузера влияет на скорость загрузки сайта?

Правильная настройка кэширования веб-страниц позволяет значительно увеличить скорость загрузки сайта за счёт:

  • Уменьшение объёма загружаемых данных при повторных обращениях.Если настроить ответ сервера на кэширование всех типов данных, то объём передаваемой информации может быть снижен вплоть до 0 МБ: в таком случае веб-страница будет полностью формироваться из кэша.
  • Снижение нагрузки на сервер.Чем меньше данных обрабатывает и передаёт сервер, тем выше его производительность в текущий момент.

Кроме этого, браузерное кэширование значительно экономит веб-трафик клиента, исключая повторное скачивание файлов (картинок, скриптов, стилей) — они будут браться из кэша сайта.

Как удалить кэшированные данные в телефоне

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

  1. Переходим в настройки смартфона.
  2. Заходим в раздел «Все приложения», «Все программы» или «Приложения и уведомления».
  3. В списке с установленным софтом находим нужную утилиту и переходим на страницу с ней.
  4. Нажимаем по кнопке «Очистить», а после выбираем «Очистить кэш».
  5. Подтверждаем удаление временных файлов, нажав по кнопке «Ок» в появившемся окне.

А что делать, если необходимо удалить все кэшированные данные? Не беспокойтесь, переходить на страницу с каждым установленным приложением не придётся. Разработчики операционной системы Android всё продумали, поэтому вам нужно лишь воспользоваться следующим руководством:

  1. Переходим в настройки.
  2. Заходим в раздел «Память» или «Хранилище». Напомним, что названия вкладок напрямую зависят от версии Android и используемой оболочки.
  3. Нажимаем по строке «Данные кэша».
  4. Подтверждаем удаление временных файлов, нажав в появившемся окошке по кнопке «Ок».

Также можно пойти другим путём, установив на телефон специальное приложение. Например, это может быть программа Clean Master.

Developer:

Price:
Free

Она является самой популярной утилитой по очистке в Google Play, поэтому ниже представлено руководство по работе с софтом:

  1. Открываем приложение.
  2. При первом запуске нажимаем по кнопке «Старт».
  3. Выбираем вариант «Мусор».
  4. Предоставляем доступ к файловой системе телефона, нажав по кнопке «Разрешить» в появившемся окне.
  5. Далее нажимаем по кнопке «Очистить мусор».

Кстати, на некоторых телефонах подобная утилита установлена по умолчанию. Например, на смартфонах Xiaomi это приложение «Безопасность». В качестве примера рассмотрим работу и с этой программой:

  1. Запускаем приложение.
  2. Нажимаем по кнопке «Очистка».
  3. Просматриваем количество памяти, которую можно освободить.
  4. Далее нажимаем по кнопке «Очистить» и ожидаем окончания процедуры.

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

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

Что такое кэш браузера и кэширование сайта?

Кэш браузера (Browser Cache) — временные файлы ресурсов веб-страниц сайта, сохраняемые браузером для последующего отображения в нём при повторном обращении к соответствующим страницам.

Процесс определения и сохранения кэша в браузере называется браузерным кэшированием (Browser Caching).

1. Первичный запрос страницы

2. Последующие запросы страницы

Браузерное кэширование можно представить следующим образом:

  1. клиент (браузер) формирует и отправляет запрос на сервер;
  2. сервер формирует ответ и отправляет веб-страницу и все файлы, с ней связанные, в браузер;
  3. браузер отображает веб-страницу, при этом кэширует определённые её ресурсы.

Кэширование на уровне представлений

Далее, видим
раздел «Кэширование на уровне представлений». И здесь сразу представлен пример
реализации кэша через декоратор cache_page, у которого в
круглых скобках указывается время хранения кэша в секундах.

Но, мы
используем не функции, а классы представлений, поэтому кэширование будем делать
на уровне URLconf. Опять же в
документации представлен пример. Нам здесь вначале нужно импортировать
декоратор cache_page, указать время
хранения кэша и представление, связанное с конкретным URL. Давайте это
сделаем. Откроем файл women/urls.py и вначале
пропишем импорт:

from django.views.decorators.cache import cache_page

И, в качестве
примера, закэшируем главную страницу:

path('', cache_page(60)(WomenHome.as_view()), name='home'),

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

Перейдем в
браузер. Сейчас для формирования главной страницы используется 386 мс и четыре SQL-запроса.
Обновим ее, все без изменений, так как сейчас было выполнено формирование кэша
страницы. И, если посмотреть каталог coolsite_cache, то увидим в
нем файлы кэша. Обновим главную страницу еще раз и видим примерно 80 мс время
формирования страницы и нулевое число SQL-запросов, то есть, был
использован кэш. Через минуту страница снова будет полностью строиться по
алгоритму приложения, но затем, снова браться из кэша.

Правильная схема кэширования файлов в браузере

В идеале браузерное кэширование должно функционировать следующим образом:

  1. сервер отправляет файл клиенту при первичном запросе;
  2. клиент кэширует файл на срок, определённый в HTTP-заголовке ответа сервера;
  3. по истечении срока клиент делает запрос к серверу на проверку изменений файла;
  4. если файл не менялся, он вновь берётся из кэша.

Правильная схема кэширования файлов в браузере

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

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

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

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

  1. заголовок, определяющий срок кэширования ( или );
  2. заголовок, определяющий изменение файла ( или ).

Особенность реализации

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

— /dist/style. z777ro.css: сброс с хэш-кодом содержимого файла;— /dist/style. 5.7.89.css: сброс версии выпуска;— /dist/5.7.89/style.css: сброс путем замены директории URL.

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

Clear-Site-Data

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

В статье мы не будем много останавливаться на Clear-Site-Data, потому что это полностью другой HTTP-заголовок, который не касается Cache-Control.

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

Поддержка браузерами на момент написания ограничивается Chrome, Android Webview, Firefox и Opera.

Совет: существует ряд директив, которые принимает Clear-Site-Data: cookies, storage, executionContexts и *, что означает «все вышеперечисленное».

Изменяющиеся ответы

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

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

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

Vary: User-Agent

Поскольку значение заголовка различается («varies») у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.

Преимущества кэширования

Повышение производительности приложений

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

Сокращение затрат на базы данных

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

Это особенно важно, если плата взимается за пропускную способность базы данных. В таких случаях можно снизить затраты на десятки процентов

Снижение нагрузки на серверную часть

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

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

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

На сегодняшний день кэши бываю двух типов — локальные и общие.

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

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

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

Зачем уменьшать размер HTML-страницы

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление
Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента
Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов
Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Фрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Можно ли удалить кэшированные данные

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

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

При аккуратном использовании max-age и изменяемый контент могут быть очень хороши

очень часто бывает неправильным выбором для изменяемого контента, но не всегда. Например, у оригинала статьи составляет три минуты. Состояние гонки не является проблемой, так как на странице нет зависимостей, использующих одинаковый паттерн кэширования ( CSS, JS & изображения используют паттерн №1 — неизменяемый контент), все остальное этот паттерн не использует.

Этот паттерн означает, что я спокойно пишу популярную статью, а мой CDN (Cloudflare) может снять нагрузку с сервера, если, конечно, я готов подождать три минуты, пока обновленная статья станет доступной пользователям.

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

Да, этот паттерн требует осторожности

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

Зачем нужен кэш, если из-за него всё ломается?

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

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

Не надо так.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

КЭШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО В CDN

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

Например, если вы используете Cloudflare CDN, вы можете использовать Cloudflare Workers для настройки бессерверных функций JavaScript, которые запускаются на PoP CDN, размещенных по всему миру.


Развертывание бессерверного кода с помощью Cloudflare Workers

Вы можете использовать эти настраиваемые бессерверные функции для изменения HTTP-запросов и ответов вашего сайта, создания новых ответов и выполнения параллельных запросов. Cloudflare Workers могут помочь вашему сайту выполнять множество задач на основе множества параметров, таких как ввод данных пользователем, тип устройства, местоположение, время дня, сторонние API и т. Д. 

Таким образом, вы можете генерировать динамический контент из самой CDN, а затем предоставлять его клиентам. Вы также можете комбинировать бессерверные функции с тегами ESI, чтобы сделать этот процесс еще более эффективным. 

Чтобы легко реализовать пограничное кэширование на своем сайте, вы можете использовать бесплатный плагин Cloudflare Page Cache . Дальнейшие детали выходят за рамки цели этой статьи, но вы можете ознакомиться с официальной документацией Cloudflare Workers, чтобы начать работу.

Точно так же KeyCDN предоставляет два варианта кэширования динамического содержимого. Первый способ — использовать API KeyCDN для мгновенной очистки кеша CDN на основе действий пользователя, чтобы ваши пользователи всегда видели последний динамический контент.


KeyCDN Origin Shield добавляет дополнительный уровень кэширования CDN

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

API Fastly CDN также предоставляет такие функции, как мгновенная очистка кеша , ведение журнала и доступность в реальном времени, а также такие механизмы, как Origin Shield . Вы можете проверить несколько примеров того, как пользователи Fastly кэшируют динамический контент с помощью CDN: « Как кэшировать с помощью файлов cookie отслеживания » и « Кэширование API


Мгновенно очищайте кеш с помощью Fastly для обслуживания динамического контента

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: