前端缓存包括浏览器缓存（也叫HTTP缓存）、浏览器web缓存、应用程序缓存。

一、浏览器缓存（HTTP缓存）

1、什么是HTTP缓存

在浏览器中第一次访问网站时，浏览器需要加载网站的html、css、js、img等资源，当第二次或第三次访问网站时候，可以利用浏览器的缓存策略，从浏览器本地缓存中拿取资源，减少了网络请求的体积和数量，加快了网站的访问速度，像这样的浏览器缓存策略就叫HTTP缓存。

浏览器缓存静态资源的本质是HTTP协议的缓存策略，其中分为强缓存和协商缓存，两种缓存都可以将静态资源缓存到本地。使用哪种缓存，是由HTTP的请求头来决定的。

2、什么是强制缓存

强制缓存是根据过期时间来决定是用本地缓存还是请求新资源。

强制缓存只有首次请求才会跟服务器通信，读取缓存资源时不会发出任何请求。在首次访问服务器取到数据之后，在过期时间之内不会再去重复请求。

实现这个流程的核心就是如何知道当前时间是否超过了过期时间。资源的 Status 状态码为 200，资源的 Size 为 from memory 或者 from disk

3、什么是协商缓存

协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识，经过服务器对比后决定采用本地缓存还是返回新资源。

在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。

当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回 304 状态码，浏览器就读取本地缓存服务器中的数据。

4、强制缓存和协商缓存的最大区别：

• 强制缓存是根据过期时间来使用的；
• 协商缓存是根据文件有没有修改来使用的，每次缓存资源时都需有询问该资源是否有更新，有更新就使用最新的资源，没有就使用缓存中旧的内容；

• 强制缓存只有首次请求才会跟服务器通信，读取缓存资源时不会发出任何请求；
• 协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。

5、HTTP缓存的应用场景

强缓存使用场景：公共js\css\image等静态资源改动较少的资源

协商缓存使用场景：html资源

6、HTTP缓存总结 思维导图 （重点）

强缓存：采用 Expires，或者 cache-control:max-age=3600，来控制，这两者的区别是 Expires 是时期时间点，cache-control:max-age是一个时间跨度，Expires是http/1.0协议的产物，cache-control是http/1.1协议加入的特性。为什么要新添加这个特性，是因为 Expires 以服务器端时间为准，我们客户端的时间是可改变的，这样就可能会出现服务器端的时间和客户端时间不一致，客户端过期时间还是以服务器时间为过期时间点的问题。现阶段应该采用Expires的比较少了，大多采用cahe-control:max-age来做强缓存了，max-age可以精确的控制缓存，并且优先级高于 Expires。

协商缓存：我们可以给html资源的请求头设置 cache-control: no-cache; 由服务器端针对这个文件生成一个唯一标识叫Etag，Etag通过响应头发送到客户端，当客户端再次请求的时候，将Etag赋值给If-none-match，发送给服务器，在服务器端对比if-none-match 和 服务器端的Etag，如果Etag值没有变更，则返回304 Not Modified，客户端采用本地资源，如果Etag变更，则返回新资源，并将新Etag传给客户端。