浏览器缓存主要指HTTP的缓存--即协议层，协议层缓存可以被分为强制缓存和对比缓存。
强制缓存
强制缓存时，浏览器会直接找缓存，如果缓存过期再找服务器。
强制缓存时序图
协议中可以造成强制缓存的字段有：
Expires：该字段标识缓存到期时间，是一个绝对时间---服务器时间+缓存有效时间
缺点：如果客户端修改了本地时间，会造成缓存失效。如果本地时间与服务器时间不一致，也会导致缓存失效。
Cache-Control：该字段表示缓存最大有效时间，该时间是一个相对时间。
使用相对时间的话，即使本地时间与服务器时间不一致，也不会导致缓存失效。
下面列举一下Cache-Control的字段可以带的值：
- max-age：即最大有效时间
- no-cache：表示没有缓存，即告诉浏览器该资源并没有设置缓存
- s-maxage：同max-age，但是仅用于共享缓存，如CDN缓存
- public：多用户共享缓存，默认设置
- private：不能够多用户共享，HTTP认证之后，字段会自动转换成private。
对比缓存
对比缓存时，浏览器缓存中获取对应的数据标识，然后向服务器发送请求，确认数据是否更新，如果更新，则返回新数据和新缓存；反之，则返回304状态码，告知客户端缓存未更新，可继续使用。
对比缓存时序图
协议中可以造成对比缓存的字段有：
Last-Modified：服务器告诉客户端，资源最后一次修改的时间。
If-Modified-Since：再次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段值进行对比，
如果相等，则表示未修改，响应304状态码，告诉客户端可继续使用缓存；反之，则表示修改了，响应200状态码，返回数据。
缺陷：
- 如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
- 如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。
Etag：该字段存储的是文件的特殊标识(一般都是hash生成的)，服务器存储着文件的Etag字段，可以在与每次客户端传送If-no-match的字段进行比较。
如果相等，则表示未修改，响应304；反之，则表示已修改，响应200状态码，返回数据。
Etag原理图
其他
补充：一些浏览器行为会造成什么样的结果？
- 刷新网页：直接读取缓存，如果缓存失效，再找服务器。
- F5手动刷新网页：浏览器会认为缓存失效，请求服务器时带上Cache-Control：max-age：0字段，询问浏览器缓存是否失效。
- Ctrl+F5强制刷新网页：浏览器会忽略缓存，请求服务器时带上Cache-Control：no-cache字段，重新请求数据。
网友评论