第一次发起请求
协商缓存请求图
浏览器缓存有两种：强制缓存和协商缓存
浏览器缓存机制
- 浏览器发送请求，会先从浏览器缓存中查找【请求结果】和【缓存标识】
- 浏览器接收数据，会将【请求结果】和【缓存标识】存储在浏览器缓存中
强制缓存（客户端判断规则）
向浏览器缓存中查找请求结果，根据【缓存规则】决定是否使用该结果。
- 不存在结果和缓存标识，向服务器发请求
- 存在结果和缓存标识，结果已失效，使用【协商缓存】
- 存在结果和缓存标识，结果未失效，直接使用（不请求服务器了）
协商缓存（服务器端判断规则）
强制缓存失效后，携带缓存标识请求服务器，服务器根据缓存标识判断是否使用缓存
- 协商缓存生效，返回304
- 不生效，返回200和结果
浏览器缓存规则
当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器（ps：下文说的时间点均为类似：Sat Aug 14 2021 11:01:52，秒级）
强制缓存的缓存规则
两个字段：Expires和Cache-Control，优先级：Cache-Control > Expires，客户端比较时间
Expires：HTTP/1.0，返回值为【到期时间点】，再次请求，客户端的时间< Expires，直接用缓存（ps：客户端与服务器端时间可能存在误差，出问题）
Cache-Control：HTTP/1.1，有以下字段
- public：所有内容都将被缓存（客户端和代理服务器都可缓存）
- private：所有内容只有客户端可以缓存，Cache-Control的默认取值
- no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
- no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
- max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效。【时间段】，即再次发起请求，xxx秒内直接使用缓存
协商缓存的缓存规则
Last-Modified / If-Modified-Since 和 Etag / If-None-Match，优先级Etag > Last-Modified，服务器比较时间
Last-Modified（服务端返回客户端） / If-Modified-Since（客户端传入服务端）：两个值相同，表示：资源文件在服务器最后被修改的时间【时间点】。
- 大于If-Modified-Since，返回资源结果
- 小于If-Modified-Since，返回304，代表资源无更新，可继续使用缓存文件
Etag（服务端返回客户端） / If-None-Match（客户端传入服务端），两个值相同，为当前资源文件的一个唯一标识(由服务器生成)
- 与If-None-Match一致，返回304
- 与If-None-Match不一致，返回资源结果
Etag什么时候用
雅虎禁用了Etag：因为ETag的值和服务器有关，那么对于同样的文件，可能下次请求的时候是发给不同的服务器，结果也会重新发送数据，所以就会影响网页加载速度，增加服务器的压力（但Last-Modified也与服务器有关）
主要解决的问题：
- 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)
- 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断
- 某些服务器不能精确的得到文件的最后修改时间
浏览器的缓存存放位置
浏览器的每个tab都是一个进程
两个缓存的地方from memory cache（内存缓存）和 from disk cache（硬盘缓存），读取顺序为memory > disk
内存缓存memory
- 会将编译解析后的文件存放在进程中，占据一定的内存资源
- 进程关闭，内存会被清空（即关闭浏览器tab标签，缓存就没了，要重新加载）
硬盘缓存disk
- 缓存写入硬盘文件中
- 读取时，对硬盘I/O操作，重新解析缓存内容
网友评论