《图解HTTP》—— 浏览器HTTP协议缓存机制

Posted 2021-04-24 阅鉴

Web开发，浏览器的重要性不言而喻。一直对浏览器的缓存机制存在困惑，诸多资料讲解的繁琐冗余，各种HTTP字段搞得人晕头转向，不便于理解。其实浏览器缓存最主要抓住两种策略：强制缓存和对比缓存。每种缓存策略下所使用的首部字段不同，辅之以流程图就好理解了。浏览器HTTP协议缓存机制，借此作为《图解HTTP》系列的终极压轴篇。

一、浏览器缓存策略

1、浏览器第一次请求流程图

2、浏览器第二次请求流程图

简单来讲分以下几个主要流程：

• 检查是否有缓存：

• 先看Cache-Control字段值，如果值设定为Public、Private、no-cache、max-age 中的任意一种，表明响应内容可以被客户端存储   

• 辨别缓存内容是否过期

•  查看Cache-Control字段和Expires字段，其中Cache-Control字段的优先级高于Expires

•  如果存在Cache-Control字段，其 no-cache 相当于 max-age = 0     

重点：如果缓存内容没有过期，则采用强制缓存策略，客户端则直接从本地缓存数据中 获取，对应显示200(from cache)

• 对比过期时间与实体标签

• 客户端检测到缓存过期或浏览器刷新后，再次向服务器发出一次请求

• 如果资源具有 Last-modified 声明，则带上 If-Modified-since 首部字段将文件最后修改时间传给服务器，与之比对文件最后的修改时间。如果文件最后的修改时间较新，则服务器返回 200 ，重新返回最新的资源，否则返回304，告知从浏览器缓存中读取

• 如果资源具有 Etag 声明，则带上 If-None-Match 首部字段将文件唯一标识传给服务器，与之比对文件的唯一标识。如果表识对不上，则服务器返回 200 ，重新返回最新的资源，否则返回304，告知从浏览器缓存中读取

重点：如果缓存内容过期，则采取对比缓存策略，服务器对比文件修改的时间，从而决定从哪获取资源

二、缓存常用字段

1、Cache-control

2、Etag

     Etag为HTTP 1.1 新增的首部字段，其为资源在服务器端的唯一标识符，其相对于 Last-modified 字段，能够避免其只能精确到秒级的尴尬

3、 Last-modified

     Last-modified 为HTTP1.0字段，其为服务器在响应请求时告诉客户端资源最后的修改时间

4、Expires

     Expires为HTTP1.0 字段，其值表示为服务端返回的资源到期时间。因客户端跟服务端时间不一致，存在误差。