手写 LRU 缓存策略，了解 Vue 的 keep-alive 实现
Posted 三分钟学前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手写 LRU 缓存策略，了解 Vue 的 keep-alive 实现相关的知识，希望对你有一定的参考价值。
一、LRU 缓存淘汰策略
缓存在计算机网络上随处可见，例如：当我们首次访问一个网页时，打开很慢，但当我们再次打开这个网页时，打开就很快。
这就涉及缓存在浏览器上的应用：浏览器缓存。当我们打开一个网页时，例如 https://github.com/sisterAn/javascript-Algorithms ，它会在发起真正的网络请求前，查询浏览器缓存，看是否有要请求的文件，如果有，浏览器将会拦截请求，返回缓存文件，并直接结束请求，不会再去服务器上下载。如果不存在，才会去服务器请求。
其实，浏览器中的缓存是一种在本地保存资源副本，它的大小是有限的，当我们请求数过多时，缓存空间会被用满，此时，继续进行网络请求就需要确定缓存中哪些数据被保留，哪些数据被移除，这就是浏览器缓存淘汰策略，最常见的淘汰策略有 FIFO（先进先出）、LFU（最少使用）、LRU（最近最少使用）。
LRU （ Least Recently Used ：最近最少使用 ）缓存淘汰策略，故名思义，就是根据数据的历史访问记录来进行淘汰数据，其核心思想是 如果数据最近被访问过，那么将来被访问的几率也更高 ，优先淘汰最近没有被访问到的数据。
画个图帮助我们理解：
二、华为面试题
运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作：获取数据 get 和写入数据 put 。
-
获取数据 get(key)：如果密钥 (key) 存在于缓存中，则获取密钥的值（总是正数），否则返回-1。 -
写入数据 put(key, value)：如果密钥不存在，则写入数据。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据，从而为新数据留出空间。
示例:
LRUCache cache = new LRUCache( 2 /* 缓存容量 */ );
cache.put(1, 1);
cache.put(2, 2);
cache.get(1); // 返回 1
cache.put(3, 3); // 该操作会使得密钥 2 作废
cache.get(2); // 返回 -1 (未找到)
cache.put(4, 4); // 该操作会使得密钥 1 作废
cache.get(1); // 返回 -1 (未找到)
cache.get(3); // 返回 3
cache.get(4); // 返回 4
进阶:
你是否可以在 O(1) 时间复杂度内完成这两种操作？
1、解答：类 vue keep-alive 实现
keep-alive 在 vue 中用于实现组件的缓存，当组件切换时不会对当前组件进行卸载。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
最常用的两个属性：include 、 exculde ，用于组件进行有条件的缓存，可以用逗号分隔字符串、正则表达式或一个数组来表示。
在 2.5.0 版本中， 以上是关于手写 LRU 缓存策略，了解 Vue 的 keep-alive 实现的主要内容，如果未能解决你的问题，请参考以下文章 前端进阶算法3：从浏览器缓存淘汰策略和Vue的keep-alive学习LRU算法 redis前传自己手写一个LRU策略 | redis淘汰策略 redis前传自己手写一个LRU策略 | redis淘汰策略 redis前传自己手写一个LRU策略 | redis淘汰策略keep-alive 新增了 max 属性，用于最多可以缓存多少组件实例，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉，看，这里就应用了 LRU 算法。即在 keep-alive 中缓存达到 max，新增缓存实例会优先淘汰最近没有被访问到的实例