学习之浏览器缓存(新手小白的简单理解)

首先，我想写写我为什么要写博客
第一就是想记录自己的学习过程，能够让自己在忘记这一部分的时候，能够翻出来看看，就相当于笔记一样，总结也会使我的脑子清楚
第二就是发泄我的表达欲，哈哈哈哈哈，有时候发现自己表达欲挺强的，闲话比较多😂不说了，开始吧

1.浏览器发起请求的过程

浏览器发起请求时，会先在浏览器缓存中查找该请求的结果以及缓存标志

如果没有缓存标志，会进行下面过程

1.向服务器发送HTTP请求
2.服务器返回该请求的结果和缓存规则
3.将该请求结果和缓存标志存入浏览器缓存中

如果有缓存标志，会查看浏览器缓存策略，判断强缓存是否生效

1.如果生效，不会向服务器发送请求，直接从缓存中读取资源，根据缓存优先级，确定使用哪一种缓存
2.如果不生效，则要进行协商缓存

• 1.浏览器会携带缓存标志向服务器发送请求，由服务器决定是否使用缓存
• 2.如果该资源无更新，协商缓存生效，会返回状态码304和not modified，从缓存中读取资源
• 3.如果该资源更新了，协商缓存失败，会返回状态码200和请求结果，将请求结果和缓存标志存在浏览器缓存中

2.浏览器缓存策略

强缓存-包括Expires和Cache-Control

1.Expires(到期时间)，来指定资源到期时间，根据服务器的时间
2.Cache-Control(缓存控制)，优先级高于expires ，常见值如下

• max-age=30，缓存三十秒后就过期，需要重新请求
• no-store，不缓存任何响应
• no-cache，资源被缓存，但立即失效。下次会发起请求验证资源是否过期

协商缓存-包括Last-Modified和ETag

1.Last-Modified

• 浏览器第一次访问资源时，服务器会在response header中添加 Last-Modified的header–表示这个资源在服务器上最后修改的时间
• 浏览器下一次请求时，浏览器检测到有Last-Modified的这个header，于是在请求头上加上If-Modified-Since
• 这个值会与服务器上这个资源的最后修改时间进行比较 1.若小于服务器的更新时间，说明文件有更新，于是返回新的资源文件和200
• 2.若等于与服务器的更新时间，说明文件没有更新，返回304和空的响应体

2.ETag，优先级高于Last-Modified

• Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成
• 浏览器下一次请求时，浏览器检测到有Etag，于是在请求头上加上If-None-Match里
• 服务器会将If-None-Match的值与自己的Etag值进行比较 1.若值一样是返回新的资源文件和200
• 2.若值不一样，说明文件没有更新，返回304和空的响应体

3.缓存位置

1.Memory Cache(内存中的缓存)

• 特点：读取速度快，存储空间小，一旦关闭了tab页面，内存中的缓存也就被释放了

2.Disk Cache(硬盘中的缓存)

• 特点：读取速度慢点，但存储空间大

图片上还有两种，我不太理解，就不写了