Введение

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

Ключевые стратегии кэширования для внешних приложений

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

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

• Cache-Control: этот HTTP-заголовок определяет политику кэширования. Например, Cache-Control: max-age=3600 сообщает браузеру кэшировать ресурс на 3600 секунд.

• Expires: этот заголовок указывает точную дату/время истечения срока действия кэшированного ресурса. Он часто используется вместе с Cache-Control.

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

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

Сервисные работники

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

• Сначала кэш: показывать из кэша, если он доступен; если нет, получите из сети.

• Сначала сеть: сначала извлекается из сети; если сеть недоступна, обслуживать из кеша.

• Устаревшее во время повторной проверки: обслуживание из кеша и одновременное получение и обновление кеша в фоновом режиме.
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Локальное хранилище и IndexedDB

Локальное хранилище и IndexedDB — это браузерные решения для хранения данных на стороне клиента.

• Локальное хранилище: идеально подходит для хранения небольших объемов данных в виде пар ключ-значение. Он синхронный, и его ограничение составляет около 5 МБ.

• IndexedDB: подходит для хранения больших объемов структурированных данных. Он поддерживает транзакции и сложные запросы, что делает его идеальным для обработки более существенных и сложных данных.

Пример

Локальное хранилище

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

ИндекседБД

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

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

Глубокое погружение в обратное/прямое (B/F) кэширование

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

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

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

Как работает кэширование B/F

• Кэш страницы: браузер сохраняет полное состояние страницы, включая DOM, контекст JavaScript и данные в памяти.

• BFCache: современные браузеры (например, Chrome и Firefox) используют BFCache для сохранения состояния страницы в памяти, что обеспечивает мгновенную навигацию.

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

• Быстрая навигация: страница загружается мгновенно при использовании кнопок браузера «Назад» и «Вперед».

• Улучшение пользовательского опыта: плавные переходы улучшают общее взаимодействие с пользователем.

• Снижение нагрузки на сервер: меньше запросов к серверу, поскольку состояние страницы сохраняется и повторно используется.

Заключение

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

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