1.HTTP缓存分类
- 强缓存： 使用本地缓存，不请求服务器。可以使用cache-control和expires进行验证是否命中，cache-control和expires同时设置时，cache-control优先级高于expires。
- 协商缓存：由服务器判断是否可以使用本地缓存。使用LastModified / IF-Modified-Since或者ETag / IF-NONE-MATCH进行校验。
2.强缓存
2.1Expires
它是一个时间戳，服务器返回资源时，会在返回头上添加该信息，客户端再次请求该资源时会将客户端时间与该时间戳进行对比。如果当前时间大于Expires时间戳，表示缓存已过期，则不能命中强缓存。
由于客户端时间可能与服务器时间不一致，或者手动修改了客户端时间，这就导致Expires信息可靠性不好。cache-control则解决了这个问题。
2.2cache-control
cache-control 主要有以下几种值：
- max-age： 有效期，是一个时间长度，不会依赖于客户端的时间
- s-maxage: 和max-age的作用一样，只在代理服务器中生效，优先级高于max-age。
- public: 所有内容都会被缓存，客户端和代理服务器都可缓存。
- private：所有内容只有客户端可以缓存。
- no-cache: 客户端跳过强缓存校验，直接使用协商缓存来验证决定。
- no-store: 不缓存，不使用强缓存也不使用协商缓存。
3.协商缓存
3.1Last-Modified 和 If-Modified-Since
浏览器第一次访问资源时，服务器返回资源的同时，在response header中添加Last-Modified的header信息，值是资源在服务器上最后一次修改的时间，浏览器接收到资源后缓存文件和header；浏览器下一次请求该资源时会设置If-Modified-Since的header信息，值为缓存中的Last_Modified的值。服务器接收到请求之后将收到的If-Modified-Since与服务器资源最后一次修改事件进行比较，若一致，则返回304，且不返回资源信息，直接使用本地缓存。若不一致，则返回200以及新的资源文件。
弊端：文件的更新时间是按照秒来计算的，如果一个文件在1秒内进行了修改，last-modified不会发生变化，下次浏览器发送请求时还是会命中协商缓存，导致获取的信息并不是最新的。于是产生了ETag/If-None-Match。
3.2ETag/If-None-Match
ETag是服务器响应请求是，返回的当前资源文件的唯一标识。资源文件只要发生变化，便会生成新的ETag。下一次浏览器请求该资源文件时，会设置请求头If-None-Match,值为缓存的ETag。服务器会将请求头中的ETag和服务器的ETag进行比较，若一致，则返回304，且不返回资源信息，直接使用本地缓存。若一致，则返回200以及新的资源文件。
缓存机制.png
4.缓存位置
缓存的位置一般分为三种：
- 代理服务器（Service Worker）：服务器与客户端之间的代理服务器。举个栗子：之前还不能在网页上购买火车票时，用户只能通过售票厅（服务器）购票，后来为了用户（客户端）方便，则在乡镇设置了代理售票点（代理服务器），这样用户就可以直接和代理售票点进行交互了。
- 内存缓存（Memory Cache）：将资源缓存到内存中，短期缓存。一般一些脚本、字体、图片会存在内存中。
- 磁盘缓存（Disk Cache）：将资源缓存到硬盘中，绝大多数缓存都是存到磁盘中的。一些非脚本会存在磁盘中，比如css等。
三级缓存原理：内存，存在直接加载，否在到下一步 -> 磁盘，存在则直接加载，否则到下一步 -> 服务器
第一次的访问资源，返回200 -> 退出浏览器再次访问资源，返回200（from disk cache）-> 刷新，返回200（from memory cache）(附原作者链接https://segmentfault.com/a/1190000011286027)
用户行为
- 地址栏输入地址：使用强缓存 -> 协商缓存
- 普通刷新：没有关闭tab标签页，memory cache可用，会被优先使用，其次是disk cache。
- 强制刷新：浏览器不使用缓存，服务器直接返回200和最新资源。
网友评论