HTTP 协议 -- 浏览器缓存机制

浏览器缓存机制

浏览器缓存机制主要是 HTTP 协议定义的缓存机制。

HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control，Pragma，Expires，Last-Modified/ETag 等。

浏览器请求流程

浏览器第一请求流程：

浏览器再次请求流程：

ETag/If-None-Match

当资源过期时（Cache-Control 中 max-age 设置），发现资源有 ETag 声明，则再次向服务器请求带上 If-None-Match （ETag 值）。服务器收到请求后发现头 If-None-Match，则与被请求资源相应校验串进行对比，返回 200 或 304 。

Last-Modified/If-Modified-Since

当资源过期时（Cache-Control 中 max-age 设置），发现资源有 Last-Modified 声明，则再次向服务器请求时带上 If-Modified-Since，表示请求时间。服务器收到请求后发现头有 If-Modified-Since ，则与被请求的资源进行最后修改时间进行对比。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（200）；若最后修改时间较旧，说明资源没有修改，会响应 304，告知浏览器继续使用保存的 cache 。

Last-Modified 和 ETag 区别？

ETag 出现是为了解决 Last-Modified 几个难解决的问题：

Last-Modified 标注的资源最后修改时间只能精确到秒级；

若某些文件被定期生成，有时它们内容没有变化，但是 Last-Modified 却改变了，这样导致文件无法使用缓存；

有可能存在服务器没有准确获取文件的最后时间，或者与代理服务器时间不一致。

ETag 由服务器自动生成，能根据准确的控制缓存。当 Last-Modified 与 ETag 一起使用时，服务器会优先验证 ETag。

浏览器检查缓存机制流程

在用户端，浏览器有一系列机制通过缓存来提升页面加载速度。例如 IE/Chrome 都会缓存 GET 类型的 AJAX 请求，IE 甚至还会缓存 POST 类型的请求，可以通过增加时间戳参数的方式来强制清除缓存。对于所有的静态资源文件，最佳实践是为它们增加一个永不过期的长缓存。

Cache-Control 是浏览器缓存机制中最重要的一个配置，下面是浏览器加载静态资源文件时缓存检查机制流程：