Повысьте производительность вашего веб-приложения: как закодировать службу кэширования в JavaScript

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

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

class CacheService {
  constructor() {}

  get(key) {}

  set(key, value) {}

  clear() {}
}

Метод get() извлекает значение, связанное с данным ключом, set() устанавливает значение, связанное с ключом, а clear() удаляет все значения из кэша. Теперь мы можем использовать различные хранилища для хранения наших кэшированных данных при реализации интерфейса.

Один из способов сделать это — использовать JavaScript Map. Map — это встроенная структура данных в JavaScript, которая позволяет хранить пары ключ-значение. Вот пример реализации службы кеша с использованием Map:

class CacheService {
  constructor() {
    this.cache = new Map();
  }

  get(key) {
    return this.cache.get(key);
  }

  set(key, value) {
    this.cache.set(key, value);
  }

  clear() {
    this.cache.clear();
  }
}

Метод constructor() инициализирует пустой объект Map, который будет использоваться для хранения кэшированных данных. Методы get(), set() и clear() реализуются с использованием соответствующих методов объекта Map.

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

Вот обновленная реализация службы кеша, которая включает время истечения срока действия:

class CacheService {
  constructor() {
    this.cache = new Map();
  }

  get(key) {
    const cachedItem = this.cache.get(key);
    if (!cachedItem || cachedItem.expiresAt < Date.now()) {
      return null;
    }
    return cachedItem.value;
  }

  set(key, value, expiresInMs) {
    const expiresAt = Date.now() + expiresInMs;
    this.cache.set(key, { value, expiresAt });
  }

  clear() {
    this.cache.clear();
  }
}

Метод set() теперь принимает дополнительный параметр expiresInMs, который указывает время в миллисекундах, по истечении которого кешированный элемент должен истечь. Метод get() теперь проверяет, существует ли кэшированный элемент и истек ли срок его действия. Если срок действия элемента истек, он удаляется из кеша и возвращается null.

А вот как использовать нашу службу кэширования:

// Create a new cache service instance
const cacheService = new CacheService();

// Retrieve a value from the cache
const cachedValue = cacheService.get('myKey');

// If the value is not found in the cache or has expired, it will return null
if (!cachedValue) {
  // Retrieve the value from the server
  const serverValue = fetch('https://example.com/myData')
    .then(response => response.json())
    .then(data => {
      console.log(data);

      // Store the value in the cache
      cacheService.set('myKey', data, 5 * 60 * 1000);

      return data;
    });
} else {
  // Use the cached value
  console.log(cachedValue);
}

// Later clear the cache, if you need
cacheService.clear();

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

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.