LRU 缓存：优化你的前端性能！

2023-10-11 15:00:57

LRU 缓存是什么？为什么需要它？

现代前端应用程序通常需要处理大量的数据，而这些数据往往需要在内存中进行缓存。当内存空间不足时，缓存策略就变得非常重要，而 LRU（最近最少使用）缓存算法就是一种非常流行的缓存策略。

LRU 缓存的原理与实现

LRU 缓存算法通过维护一个双向链表来跟踪缓存中的数据。链表的头部存储着最近最少使用的数据，而链表的尾部存储着最近最久使用的数据。当缓存已满，需要删除一条数据时，LRU 算法会删除链表尾部的数据。

class Node {
  constructor(key, value) {
    this.key = key;
    this.value = value;
    this.prev = null;
    this.next = null;
  }
}

class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.size = 0;
    this.head = null;
    this.tail = null;
    this.cache = {};
  }

  get(key) {
    const node = this.cache[key];
    if (node) {
      this.moveToHead(node);
      return node.value;
    }
    return null;
  }

  put(key, value) {
    const node = this.cache[key];
    if (node) {
      node.value = value;
      this.moveToHead(node);
    } else {
      const newNode = new Node(key, value);
      this.addToHead(newNode);
      this.cache[key] = newNode;
      this.size++;
      if (this.size > this.capacity) {
        this.removeTail();
      }
    }
  }

  moveToHead(node) {
    if (node === this.head) {
      return;
    }
    if (node === this.tail) {
      this.tail = node.prev;
    }
    node.prev.next = node.next;
    if (node.next) {
      node.next.prev = node.prev;
    }
    node.next = this.head;
    node.prev = null;
    this.head.prev = node;
    this.head = node;
  }

  addToHead(node) {
    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else {
      node.next = this.head;
      this.head.prev = node;
      this.head = node;
    }
  }

  removeTail() {
    const node = this.tail;
    this.tail = node.prev;
    this.tail.next = null;
    delete this.cache[node.key];
    this.size--;
  }
}