浏览器缓存介绍
把已请求并返回的WEB资源(HTML页面、图片、JS文件、CSS文件、数据等)复制成一个副本存储在浏览器的缓存中。
缓存的好处
- 减少网络延迟，加快页面打开速度
- 减少网络宽带的消耗
- 降低服务器的压力
HTTP的缓存机制
根据什么规则缓存
- 新鲜度(过期机制): 也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的:
- 含有完整的过期时间控制头信息（HTTP 协议报头），并且仍在有效期内；
- 浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度；
- 校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如果发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
HTTP的两个缓存阶段
浏览器缓存可以分为两类: 强缓存(也称本地缓存) 和 协商缓存(弱缓存)
本地缓存阶段
浏览器发送请求之前，会先去缓存里面查看是否命中强缓存，如果命中的话直接从缓存中读取资源，不会发送请求到服务器。否则的话，进入下一步。 协商缓存阶段 当缓存没有命中时，浏览器会向服务器发送请求。服务器会根据Request Header的一些字段判断是否命中协商缓存。如果命中，服务器会返回 304 响应，但是不会携带任何响应实体，只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中，则从直接从服务器加载资源。
常见的缓存消息报头
- Pragma: no-cache 响应头
- 只是浏览器忽略资源缓存副本，每次访问都需要到服务器获取
- HTTP1.1用Cache-Control替代
- Cache-Control: 缓存控制响应头
- no-cache : 指示浏览器忽略资源缓存副本，强制到服务器获取资源(浏览器依然缓存)
- no-store : 缓存在任何情况下都不要保留副本(当前请求资源禁用缓存)
- max-age : 指示缓存副本的有效时长，从请求时间开始到过期时间的秒数
- public : 表示缓存可以被代理服务器或者其他中间服务器识别
- private : 表明只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存
- Expires: (GMT)
- HTTP1.0的新特性，标志该资源过期的时间点，他是一个绝对值，格林威治时间(Greenwich Mean Time, GMT), 即在这个时间点之后，缓存的资源过期。
- 在HTTP1.1开始，使用Cache-Control: max-age=1024(秒)来替代
4.Etag Last-Modified
解释解释这幅图吧
当浏览器请求一个资源时，首先会判断该资源的缓存是否过期
- 如果该资源的缓存未过期的话，直接读取缓存中的数据(from dist cache) -> 给浏览器呈现
- 如果该资源已经过期的话会查看是否有该资源对应的Etag，Last-modified的http响应头
如果没有这两个头的话，就直接向服务器发送请求，请求数据->相应回来/缓存->呈现
如果有两个头的话，浏览器会拿着Etag作为If-None-Match,Last-Modified作为If-modified-Since作为请求头向服务器发送请求，服务器会通过这两个头对比该资源是否改动，如果未改动直接返回304，并且告诉浏览器你已经有了(读取缓存)-> 浏览器呈现。如果服务器上的该资源已经改动，用请求头传来的If-modified-Since和服务器资源的Last-Modified不一样，就说明资源已经更改，则向浏览器从新发送数据(200)->浏览器呈现。
