浏览器缓存机制
浏览器缓存机制主要是 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