浅谈浏览器的缓存机制

[ximi66]

浏览器缓存其实就是把请求过得资源保存下来，当再一次请求相同资源的时候，浏览器会根据缓存机制决定用本地资源还是重新请求。

浏览器的缓存分为强缓存和协商缓存。如果强缓存和协商缓存同时存在需要优先考虑强缓存。

强缓存：不用和服务端确认，直接使用本地缓存。状态码：200(from dist/memory cache)
其中包括expires和cache-control

• expires

参数是时间戳。有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的。

• cache-control

常用参数如下：
max-age: 缓存时间数值(s)，如果设置0，则需要向服务器请求
s-maxage: 设置代理服务器缓存的最大的有效时间，单位为秒。s-maxage会覆盖掉max-age
no-story: 不缓存到本地
no-cache: 仍然对资源使用缓存，但每一次在使用缓存之前必须向服务器对缓存资源进行验证
public: 可以被所有用户缓存（客户端及代理）
private: 仅被客户端缓存，代理服务器不可缓存

优先级
根据响应头中的expires(http1.0)和cache-control(http1.1)去判断，其中cache-control优先于expires。如果都有，先cache-control的max-age/s-maxage + 服务器时间判断是否过期，如果过期再根据ETag判断

协商缓存：与服务器协商是否使用缓存，如果用缓存则返回304（not modified）
其中包括响应头的ETag，Last-Modified及请求头的If-None-Match，If-Modified-Since

优先级
ETag的优先级比Last-Modified更高。
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)。如果有ETag并且与If-None-Match一致返回304，不一致，重新请求资源200。
如果没有ETag，就看If-Modified-Since与Last-Modified对比。Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间。如果一致返回304，不一致重新请求200。

参考文章：
https://jayzangwill.github.io/blog/2019/02/07/cache/
https://juejin.cn/post/6947936223126093861