前端缓存及应用

1. 缓存分类

1.1 前端缓存分类

• 缓存是前端项目性能优化中简单高效的一种方式
• 优秀的缓存策略可以缩短网页请求资源的距离，减少延迟
• 并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷

1.2 缓存过程分析

• 浏览器与服务器通信的方式为应答模式
  • 即：浏览器发起HTTP请求 – 服务器响应该请求
  • 那么浏览器第一次向服务器发起该请求后拿到请求结果， 会根据响应报文中HTTP头的缓存标识，决定是否缓存结果
    • 如果是，则将请求结果和缓存标识存入浏览器缓存中
• 具体过程如图
  
• 缓存流程两点总结
  • 浏览器每次发起请求，都会在浏览器缓存中寻找该请求的标识和缓存内容
  • 浏览器每次收到返回结果，都会在浏览器缓存里保存该标识和缓存内容

2. HTTP 缓存

2.1 HTTP 缓存

• HTTP 缓存是在 HTTP 请求传输时用到的缓存，主要在服务器代码上设置，它是我们日常开发中最为熟悉的一种缓存机制
  
  

2.2 HTTP 缓存分类

• HTTP 缓存又分为强缓存和协商缓存
  • 优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存
• 强缓存与协商缓存的区别
  
• 强缓存
  • 不会向服务器发送请求
  • 直接从缓存中读取资源
  • 在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache
  • 可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
• 协商缓存
  • 向服务器发送请求
  • 服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存
  • 如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源
  • 需要与cache-control共同使用

2.3 HTTP 缓存 – 强缓存的三种情况

• 强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程

2.3.1 情况一

• 没有该请求的缓存和标识，强制缓存失效，向服务器送新请求（跟第一次发起请求一致）
  

2.3.2 情况二

• 存在该请求的缓存和标识，但是结果已过期，强制缓存失效，改为协商缓存（暂不分析）
  

2.3.3 情况三

• 存在该请求的缓存和标识，末过期，使用该缓存资源，返回结果
  

2.4 HTTP 缓存 – 强缓存的缓存规则

• 当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Conctrol的优先级比Expires高
  • Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果
  • Cache-Control主要用于控制网页缓存，主要取值为：
    

2.5 HTTP 缓存 – 存储位置

2.5.1 内存缓存(from memory cache)

• 快速读取
  • 内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取
• 时效性
  • 一旦该进程关闭，则该进程的内存则会清空

2.5.2 硬盘缓存(from disk cache)

• 硬盘缓存
  • 硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢

2.5.3 总结

• 在浏览器中，浏览器读取缓存的顺序(memory –> disk –> 服务器请求)
• 浏览器会在js和图片等文件解析执行后直接存入内存缓存中
• 那么当刷新页面时只需直接从内存缓存中读取
• 而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存

2.6 HTTP 缓存 – 协商缓存

• 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

2.6.1 协商缓存生效，返回304

2.7 HTTP 缓存 – 协商缓存规则

• 协商缓存的标识也是在响应报文的 HTTP 头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有
  • Last-Modified
  • If-Modified-Since
  • Etag
  • If-None-Match

2.7.1 Last-Modified

• 表示服务端资源最后修改的时间，也就是传给客户端，用于告诉客户端，服务端资源最后修改的时间
  

2.7.2 If-Modified-Since

• 表示询问服务端，从某个时间点起资源是否修改了
• 这个时间点一般是服务端 Last-Modified 返回的时间点
  

2.7.3 Etag

• 表示字符串唯一标识符，也是传给客户端，用于告诉客户端，表示服务端资源发生修改了的最新标识
  

2.7.4 If-None-Match

• 表示询问服务端，某个tag字符串值是否不匹配，这个tag值一般是服务端Etag返回的最新的字符串标识符
  

3. 浏览器缓存

• 浏览器缓存主要由前端开发在前端JS上进行设置
  

3.1 本地存储小容量

3.1.1 Cookie

• Cookie 主要用于用户信息的存储
• Cookie 的内容可以自动在请求的时候被传递给服务器

3.1.2 LocalStorage

• LocalStorage 的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止

3.1.3 SessionStorage

• SessionStorage 的其他属性同 LocalStorage
• 只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage 也会被清除

	容量	作用
Cookie	4KB	请求时传递
LocalStorage	5MB	永久存储
SessionStorage	5MB	同标签页生命周期，不同页面间交换数据

3.2 本地存储大容量

• WebSql 和 IndexDB 主要用在前端有大容量存储需求的页面上
• 例如
  • 在线编辑浏览器
  • 网页邮箱

	介绍	容量	作用
WebSql	关系型数据库	不知道，应该也是50MB左右	被 W3C 标准废弃
IndexDB	非关系型数据库	50MB	正常使用

3.3 往返缓存

• 往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略
• 该策略具体表现为
  • 当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中
  • 当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间

3.4 浏览器缓存的查看与使用

• Web 端直接打开控制台
  
• 移动端可植入对应插件
  

3.5 浏览器缓存–代码演示

• 往 LocalStorage、SessionStorage 里添加一个 num 变量，并进行修改和删除操作

功能	LocalStorage	SessionStorage
增加	localStorage.setItem(‘num’,1)或localStorage.num=1	sessionStorage.setItem(‘num’,1)或sessionStorage.num=1
删除	localStorage.removeItem(‘num’)	sessionStorage.removeItem(‘num’)
修改	localStorage.setItem(‘num’,2)或localStorage.num=2	sessionStorage.setItem(‘num’,2)或sessionStorage.num=2
查询	localStorage.getItem(‘num’) localStorage.num	sessionStorage.getItem(‘num’) sessionStorage.num

• Cookie设置: key = value ; expires = 过期时间; path = 作用路径; domain = 域名

document.cookie ="sRefid=1234567; expires=Web, 06 Jan 2021 17:29:20 GMT; path=/";domain=travelgo.com;

4. 总结

• 公司内部的知识分享，学习一下