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 是浏览器缓存机制中最重要的一个配置，下面是浏览器加载静态资源文件时缓存检查机制流程：

 

 

从上可以看出，静态资源优化的最佳状态是：从本地缓存资源读取 > 304 状态 > 200 状态。

 

参考文章：

浏览器 HTTP 协议缓存机制详解：http://www.open-open.com/lib/view/open1421744212609.html

浏览器缓存机制详解：http://mangguo.org/browser-cache-mechanism-detailed/

http://www.cnblogs.com/kaiye/p/5030893.html