前端的缓存分为: http缓存 和 浏览器缓存
http缓存:

// 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要请求资源"的副本
// 就会从浏览器缓存中提取而不是从原始服务器中提取这个资源// 常见的http缓存,只能缓存get请求响应的资源,对于其他类型的响应则无能为力,所以后续说的请求缓存都是指GET请求// http缓存都是从第二次请求开始的.第一次请求资源时,服务器返回资源,并在response header头中回传资源的缓存参数
// 第二次请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到request header头中传给服务器
// 看是否命中协商缓存,命中则返回304,否则服务器会返回新的资源// 注1:强制缓存如果生效,会返回状态码200,且不需要和服务器进行交互
//     协商缓存无论是否生效,会返回状态码304,都需要和服务器进行交互// 注2:强制缓存是否失效(根据Cache-Control的max-age有没有超时,或expires的缓存有没有过期判断)// 协商缓存:
// 当第一请求时服务器返回的响应头中没有Cache-Control和Expire或者Cache-Control和Expires过期
// 亦或者它的属性设置为no-cache,那么浏览器第二次请求时,就会与服务器进行协商
// 与服务器端对比判断资源是否进行了修改更新.如果服务器端的资源没有修改,那么就会返回304状态码
// 告诉浏览器可以使用缓存中的数据,这样就减少了服务器的数据传输压力.// 注3:私有缓存(浏览器缓存):Cache-Control: Private
// 注4:共享缓存(代理级缓存):Cache-Control: Public

为什么使用http缓存:

// 1.减少冗余的数据传输,节省流量
// 2.缓解服务器的压力,提高服务器的性能
// 3.加快了页面加载的速度

浏览器缓存:

// 常见的有3种:cookie,sessionStorage和localSotrage
// cookie:兼容各种浏览器,每次都会和后台交互,可设置过期时间
// sessionStorage:不兼容低版本浏览器,本地存储,不会每次和后台交互,会话关闭,缓存失效
// localStorage:不兼容低版本浏览器,本地缓存,不会每次和后台交互,需要手动删除

总结:

1.强制缓存:服务器会告诉浏览器一个过期时间,在规定时间内,无需告知服务器,直接使用缓存,过期则使用协商缓存
2.将缓存中的Etag和Last-Modified通过请求告诉服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存

参考 https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247484343&idx=1&sn=efb2f0eacc32e24ca2dd8bed0900f85e&chksm=fa2be35ecd5c6a48246107307ea838c42e807fb6ddf4838228ef552a387e0a02f0c64f1a4606&mpshare=1&scene=23&srcid=#rd