缓存 是咱们写代码过程中罕用的一种伎俩，是一种空间换工夫的做法。就拿咱们常常应用的 HTTP 协定，其中也存在强缓存和协商缓存两种缓存形式。当咱们关上一个网站的时候，浏览器会查问该申请的响应头，通过判断响应头中是否有 Cache-Control、Last-Modified、ETag 等字段，来确定是否间接应用之前下载的资源缓存，而不是从新从服务器进行下载。
上面就是当咱们拜访百度时，某些资源命中了协商缓存，服务端返回 304 状态码，还有一部分资源命中了强缓存，间接读取了本地缓存。
然而，缓存并不是无限度的，会有大小的限度。无论是咱们的 cookie（不同浏览器有所区别，个别在 4KB 左右），还是 localStorage（和 cookie 一样，不同浏览器有所区别，有些浏览器为 5MB，有些浏览器为 10MB），都会有大小限度。
这个时候就须要波及到一种算法，须要将超出大小限度的缓存进行淘汰，个别的规定是淘汰掉最近没有被拜访到的缓存，也就是明天要介绍的配角：LRU （Least recently used：最近起码应用）。当然除了 LRU，常见的缓存淘汰还有 FIFO（first-in, first-out：先进先出） 和 LFU（Least frequently used：起码应用）。
什么是 LRU？
LRU （Least recently used：最近起码应用）算法在缓存写满的时候，会依据所有数据的拜访记录，淘汰掉将来被拜访几率最低的数据。也就是说该算法认为，最近被拜访过的数据，在未来被拜访的几率最大。
为了不便了解 LRU 算法的全流程，画了一个简略的图：
- 假如咱们有一块内存，一共可能存储 5 数据块；
- 顺次向内存存入A、B、C、D、E，此时内存曾经存满；
- 再次插入新的数据时，会将在内存寄存工夫最久的数据A淘汰掉；
- 当咱们在内部再次读取数据B时，曾经处于开端的B会被标记为沉闷状态，提到头部，数据C就变成了寄存工夫最久的数据；
- 再次插入新的数据G，寄存工夫最久的数据C就会被淘汰掉；
算法实现
上面通过一段简略的代码来实现这个逻辑。
class LRUCache { list = [] // 用于标记先后顺序 cache = {} // 用于缓存所有数据 capacity = 0 // 缓存的最大容量 constructor (capacity) { // 存储 LRU 可缓存的最大容量 this.capacity = capacity }}根本的构造如上所示，LRU须要实现的就是两个办法：get 和 put。
class LRUCache { // 获取数据 get (key) { } // 存储数据 put (key, value) { }}咱们当初看看如何进行数据的存储：
class LRUCache { // 存储数据 put (key, value) { // 存储之前须要先判断长度是否达到下限 if (this.list.length >= this.capacity) { // 因为每次存储后，都会将 key 放入 list 最初， // 所以，须要取出第一个 key，并删除cache中的数据。 const latest = this.list.shift() delete this.cache[latest] } // 写入缓存 this.cache[key] = value // 写入缓存后，须要将 key 放入 list 的最初 this.list.push(key) }}而后，在每次获取数据时，都须要更新 list，将以后获取的 key 放到 list 的最初。
class LRUCache { // 获取数据 get (key) { if (this.cache[key] !== undefined) { // 如果 key 对应的缓存存在 // 在返回缓存之前，须要从新激活 key this.active(key) return this.cache[key] } return undefined } // 从新激活key，将指定 key 挪动到 list 最初 active (key) { // 先将 key 在 list 中删除 const idx = this.list.indexOf(key) if (idx !== -1) { this.list.splice(idx, 1) } // 而后将 key 放到 list 最初面 this.list.push(key) }}这个时候，其实还没有齐全实现，因为除了 get 操作，put 操作也须要将对应的 key 从新激活。
class LRUCache { // 存储数据 put (key, value) { if (this.cache[key]) { // 如果该 key 之前存在，将 key 从新激活 this.active(key) this.cache[key] = value // 而且此时缓存的长度不会发生变化 // 所以不须要进行后续的长度判断，能够间接返回 return } // 存储之前须要先判断长度是否达到下限 if (this.list.length >= this.capacity) { // 因为每次存储后，都会将 key 放入 list 最初， // 所以，须要取出第一个 key，并删除cache中的数据。 const latest = this.list.shift() delete this.cache[latest] } // 写入缓存 this.cache[key] = value // 写入缓存后，须要将 key 放入 list 的最初 this.list.push(key) }}可能会有人感觉这种算法在前端没有什么利用场景，说起来，在 Vue 的内置组件 keep-alive 中就应用到了 LRU 算法。
后续应该还会持续介绍一下 LFU 算法，敬请期待……