【性能优化篇】-----如何优化js缓存

性能优化有很多的内容，其中一个方法是如何优化js缓存，能够减少执行时间和资源，下面先让我们了解什么事缓存，如何进行缓存。

什么是缓存

缓存是一种优化技术，通过存储开销大的函数执行的结果，并在相同的输入再次出现时返回已缓存的结果，从而加快应用程序的速度。

在这一点上，我们很清楚，缓存的目的是减少执行“昂贵的函数调用”所花费的时间和资源。

什么是昂贵的函数调用?别搞混了，我们不是在这里花钱。在计算机程序的上下文中，我们拥有的两种主要资源是时间和内存。因此，一个昂贵的函数调用是指一个函数调用中，由于计算量大，在执行过程中大量占用了计算机的资源和时间。

然而，就像对待金钱一样，我们需要节约。为此，使用缓存来存储函数调用的结果，以便在将来的时间内快速方便地访问。

缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理。

因此，当一个昂贵的函数被调用一次时，结果被存储在缓存中，这样，每当在应用程序中再次调用该函数时，结果就会从缓存中非常快速地取出，而不需要重新进行任何计算。

Cookie

介绍
Cookie 通常由浏览器存储，然后将Cookie与每个后续请求一起发送到同一服务器。

收到HTTP请求时，服务器可以发送带有Cookie的header头。

可以给Cookie设置有效时间。

应用场景

• 会话管理：用户登录名，购物车商品数量及ID，游戏得分或服务器应该要记录的其他重要的内容
• 个性化：比如用户首选项，首页的排版及布局，主题或其他设置
• 跟踪：记录和分析用户行为，比如埋点，我们在某些页面去埋一个用户的标识，这个东西我们就可以使用Cookie记录，从而分析用户的行为

sessionStorage

介绍

sessionStorage 用于创建一个本地存储的键/值对。

sessionStorage 的存储是有有效期的，如果用户关闭了浏览器的标签，值就会被清空。

应用场景‘

• 页面与页面之间进行传值

indexedDB

介绍

IndexedDB 就是一个索引数据库，其特点是存储量大。

应用场景

• 客户端存储大量结构化数据
• 没有网络连接的情况下使用（比如：石墨文档，当用户断网时，我们可以将数据存储，有网之后再进行同步）
• 将冗余、很少修改、但经常访问的数据，从而避免随时从服务器获取数据

LocalStorage

介绍

LocalStorage即本地存储，即便我们关闭了浏览器的标签，甚至关闭了浏览器，其中的数据仍然存在。

应用场景

• 缓存静态文件内容JS/CSS，避免重新请求加载，增强用户体验
• 缓存不经常变更的API接口数据
• 缓存地理位置信息
• 浏览过程中页面的具体位置