性能优化有很多的内容,其中一个方法是如何优化js缓存,能够减少执行时间和资源,下面先让我们了解什么事缓存,如何进行缓存。
什么是缓存
缓存是一种优化技术,通过存储开销大的函数执行的结果,并在相同的输入再次出现时返回已缓存的结果,从而加快应用程序的速度。
在这一点上,我们很清楚,缓存的目的是减少执行“昂贵的函数调用”所花费的时间和资源。
什么是昂贵的函数调用?别搞混了,我们不是在这里花钱。在计算机程序的上下文中,我们拥有的两种主要资源是时间和内存。因此,一个昂贵的函数调用是指一个函数调用中,由于计算量大,在执行过程中大量占用了计算机的资源和时间。
然而,就像对待金钱一样,我们需要节约。为此,使用缓存来存储函数调用的结果,以便在将来的时间内快速方便地访问。
缓存只是一个临时的数据存储,它保存数据,以便将来对该数据的请求能够更快地得到处理。
因此,当一个昂贵的函数被调用一次时,结果被存储在缓存中,这样,每当在应用程序中再次调用该函数时,结果就会从缓存中非常快速地取出,而不需要重新进行任何计算。
Cookie
介绍
Cookie 通常由浏览器存储,然后将Cookie与每个后续请求一起发送到同一服务器。
收到HTTP请求时,服务器可以发送带有Cookie的header头。
可以给Cookie设置有效时间。
应用场景
- 会话管理:用户登录名,购物车商品数量及ID,游戏得分或服务器应该要记录的其他重要的内容
- 个性化:比如用户首选项,首页的排版及布局,主题或其他设置
- 跟踪:记录和分析用户行为,比如埋点,我们在某些页面去埋一个用户的标识,这个东西我们就可以使用Cookie记录,从而分析用户的行为
sessionStorage
介绍
sessionStorage 用于创建一个本地存储的键/值对。
sessionStorage 的存储是有有效期的,如果用户关闭了浏览器的标签,值就会被清空。
应用场景‘
- 页面与页面之间进行传值
indexedDB
介绍
IndexedDB 就是一个索引数据库,其特点是存储量大。
应用场景
- 客户端存储大量结构化数据
- 没有网络连接的情况下使用(比如:石墨文档,当用户断网时,我们可以将数据存储,有网之后再进行同步)
- 将冗余、很少修改、但经常访问的数据,从而避免随时从服务器获取数据
LocalStorage
介绍
LocalStorage即本地存储,即便我们关闭了浏览器的标签,甚至关闭了浏览器,其中的数据仍然存在。
应用场景
- 缓存静态文件内容JS/CSS,避免重新请求加载,增强用户体验
- 缓存不经常变更的API接口数据
- 缓存地理位置信息
- 浏览过程中页面的具体位置