缓存

为什么有缓存?

缓存在活中其实很常见。往往初次打开一个新的软件或者网页的时候都会相对较慢, 但是再次打开就会快很多, 这就是缓存的功劳。大大提高了效率,也大大提高了用户体验。

什么数据可以缓存?

不能缓存的数据

• 实时更新替换的数据(例如: 弹幕,留言,评论,经常更换的广告图片)
• 网页的 HTML 结构, 在网页使用过程中结构会随着操作发生变化 缓存中的数据
• 静态资源很少发生改变的图片(例如:商品图片,用户头像,网站logo)
• 使用过的视频数据,音频数据都会在缓存里

技术层面的缓存 - Web 缓存

在前端开发中，性能一直都是重点问题，判断一个网站的性能就是看网页打开的速度。然而提高网页反应速度就要使用 Web 缓存。

Web 缓存的优点 :

• 节约了网络的资源
• 提高了网络的效率
• 缩短网页请求资源的距离
• 减少网络延迟
• 减少带宽
• 降低网络负荷

Web 缓存的种类 :

1 . 数据库缓存

• 通过缓存数据库查询结果，加快访问速度，减少数据库访问次数,缓解数据库压力，以提高 web 应用速度 2 . 代理服务器缓存
• 在不能访问服务器时,使用代理服务器满足的 HTTP 请求(例: 跨域 Porxy) 3 . CDN 缓存
• 通过在网络各处放置节点服务器, 快速可靠地分发静态内容, 4 . 浏览器缓存
• 加速浏览，浏览器在用户磁盘上对请求过的资源进行存储，当再次请求这个页面时，浏览器就可以从本地取出资源响应给用户,这样就可以加速页面浏览

浏览器缓存

浏览器缓存包含 ： HTTP 缓存、indexDB、cookie、localstorage 、sessionStorage

1 . http 缓存（强制缓存 & 协商缓存）

强制缓存

什么是强制缓存

• 请求的资源本地缓存中有,资源从本地缓存获取,不需要发起请求
• 想理解强制缓存,先知道什么是缓存控制

缓存控制

在http中，控制缓存开关的属性有两个：Pragma 和 Cache-Control。

Pragma

Pragma 有两个情况 Pragma 和 Expires 。

• Pragma 的值为 no-cache : 表示禁用缓存
• Expires 的值是一个时间(格林尼治标准时间) : 表示该缓存的有效时间 注意 : 当 http 响应头中同时出现 Pragma 和 Cache-Control , 缓存控制执行优先级从高到低是 Pragma ==> Cache-Control ==> Expires

Cache-control

Cache-Control 在 http 请求头和响应头中,用来控制 http 缓存的

常见 请求头 中的Cache-Control 指令

• Cache-Control: max-age=<seconds> : 缓存存储的最大周期
• Cache-Control: max-stale[=<seconds>] : 客户端愿意接收一个已经过期的资源
• Cache-control: no-cache : 重新验证是否缓存(协商缓存验证)
• Cache-control: no-store : 禁止缓存

常见 响应头 中的Cache-Control 指令

• Cache-control: must-revalidate 资源过期后重新请求
• Cache-control: no-cache 请求是验证是否缓存(协商缓存验证)
• Cache-control: no-store 不使用任何缓存
• Cache-control: private 同意本地浏览器缓存 详情查看官方文档

强制缓存的执行流程

流程情景1 - 初次请求

浏览器会向服务器发起请求 ==> 服务器接收到浏览器的请求 ==> 响应资源并在响应头中携带 Cache-Control 给客户端( Cache-Control 值为缓存的最大过期时间)

流程情景2 - 再次请求相同的数据

浏览器会先查看Cache-Control 是否过期 ==> 没有过期 ==> 浏览器直接从缓存中拉取资源(此过程不用经过服务器)

流程情景3 - Cache-Control 过期

 cache-control 过期了 ==> 没有办法拉取缓存中的数据 ==> 继续执行流程情景1

协商缓存

是什么协商缓存 协商缓存，也叫对比缓存。一种服务端的缓存策略

• 服务端判断客户端的资源
  • 返回 304表示缓存中的资源和请求的资源一致 ，
  • 返回 200 表示从服务器返回的最新的资源。
• 想理解协商缓存,先知道什么是缓存校验

缓存校验

如何确定缓存数据有效,校验缓存是否是最新的(和服务器中最新的数据一样)

• 在响应头中有两个属性(资源标识),ETag 和 Last-Modified 用来帮助服务器控制客户端的缓存校验。

Last-Modified

• 值为资源的最后修改时间，对应请求头的属性为 If-Modified-Since  Etag
• ETag 是 HTTP1.1 中加入的新属性
• 表示资源的唯一标识，所谓唯一，和id一样，具有唯一性。对应请求头为 If-None-Match 。
  • Etag 的本质是一个字符串 注意 : 当响应头中同时存在 Last-Modified 和 Etag ，会优先使用 Etag(更加精确)

协商缓存的执行流程

流程情景1 - 初次请求

客户端向服务器发出请求 ==> 服务器收到请求 ==> 响应资源和相对应的资源标（Etag 或 Last-Modified）识给客户端

流程情景2 - 再次请求

浏览器再次发起请求 ==> 请求头会携带If-None-Match (或 If-Modified-Since) 去找服务器 ==> 服务器将If-None-Match (或 If-Modified-Since) 和自己的Etag(或 Last-Modified) 的值对比(两种情况)

• 如果相等，则返回 304 ，表示缓存资源和客户端资源一致
• 如果不相等，则返回 200，并返回资源和新的Etag (或Last-Modified) 的值。

Last-Modified 和 Etag的异同点

相同点 : Last-Modified 和 Etag 用来帮助服务器控制客户端缓存校验的属性

不同点 :

1. 存储的值不同
   • Last-Modified存储的值是最后修改数据的时间, 而请求头中携带的If-Modified-Since是浏览器中缓存的时间
   • Etag中存储的是一个字符串,和id一样的具有唯一性,而请求头中携带的If-None-Match是浏览器上传收到数据时携带的Etag
2. 服务器对比方式不同
   • Last-Modified : 如果缓存的时间和最后修改的时间一致，则缓存命中，响应 304，否则不命中，向服务端请求资源,响应 200 和最新的资源，并在响应头中携带这次的 last-modified,把这次的 last-modified 存到 if-modified-since 中
   • Etag 内容比对，用来判断缓存内容的 if-none-match 和服务器内容的 Etag 是否相等，如果相等则说两处的资源相等,缓存命中响应 304，否则请求资源,响应 200 和最新的资源，并在响应头中携带新的 Etag,

协商缓存流程图

注意 : 刷新浏览器页面,强制缓存会失效，而协商缓存有效。

2 . indexDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

详情参考官方文档:

3 . Cookie

Cookie 是什么

• Cookie 直意为小甜饼。用于数据缓存,cookie 存放数据量非常小，它的大小限制为4KB以内。可以缓存用户登录信息（例如：token）。

Cookie 的作用

• Cookie 缓存的数据始终在同源 http 中携带，在浏览器和服务器之间传递
• Cookie 缓存可以做数据持久化，Cookie 数据在设置的 Cookie 过期时间之前都有效（数据在缓存中关闭浏览器窗口不能删除 Cookie 数据）

cookie的使用

• 下载依赖包 ：npm i js-cookie 或者 yarn add js-cookie
• 导入 : import Cookies from 'js-cookie'
• 存入数据语法 : Cookies.set('键', '值',{ expires: 7, path: '' })
  • 第三参数为一个对象, 对象的属性有expires和path
  • expires : 创建一个过期 cookie,值为天数
  • path : Cookie只对当前路径的页面有效
• 使用数据语法 : Cookies.get('键')

注意 ： Cookies 中有路径的概念，可以限制 Cookies 数据所属路径

4 . localStorage

1 . localStorage 作用 : 本地存储

• 经典场景 ： 免登录 2 . localStorage 语法 ：
• 2.1 存数据 ： localStorage.setItem('属性名',属性值)
• 2.2 取数据 : localStorage.getItem('属性名')
• 2.3 删数据 : localStorage.removeItem('属性名')
• 2.4 清空数据 ： localStorage.clear()

3 . localStorage 特点 ：

• 3.1 localStorage 是 永久存储 的， 除非 手动清除 ，否则一直存在。
• 3.2 localStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。

5 . sessionStorage

1 . sessionStorage 作用 ： 临时存储

• 经典场景 ： 页面间传值

2 . sessionStorage 语法和 localStorage 完全一致 ：

• 2.1 存数据 ： sessionStorage.setItem('属性名',属性值)
• 2.2 取数据 : sessionStorage.getItem('属性名')
• 2.3 删数据 : sessionStorage.removeItem('属性名')
• 2.4 清空数据 ： sessionStorage.clear()

3 . sessionStorage 特点 ：

• 3.1 sessionStorage 页面关闭后就 自动清除 了。
• 3.2 sessionStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。

cookie、localStorage、sessionStorage异同

	Cookie	localStorage	sessionStorage
数据保存的期限	一般由服务器生成，可设置保存时间。	需要手动清除，否则永久保存	仅在当前页面有效，关闭页面或浏览器后被清除
存放数据大小	4KB以内	5MB或更大	5MB或更大
与服务器关系	每次都会携带在HTTP头中,在浏览器和服务器之间传递	保存与客户端硬盘中，不参与和服务器的通信	保存在客户端内存中，不参与和服务器的通信