目的:加快资源获取,提升用户体验,减少网络传输,缓解服务端的压力。
1、强缓存:不需要发送请求到服务端,直接读取浏览器本地缓存。注意:在Chrome中,存储位置分为Disk cache和Memory cache(内存),存放的位置由浏览器决定。由Expires、Cache-Control、Pragma 3个Header属性共同控制。
- a)Expires:优先级最低、存的是系统时间,如果系统时间和服务器时间不一致的情况,会出现缓存有效期不准的情况;
- b)Cache-Control:http/1.1中增加的属性,在请求头和响应头中都可以使用;取值有:
i.max-age:单位是秒
ii.no-cache:不使用强缓存
iii.no-store:禁止使用缓存,协商缓存也不让用;
iv.private:专用于个人的缓存,中间代理、cdn不能缓存此响应
v.public:响应可以被中间代理、cdn等缓存 - c)Pragma:只有一个值:no-store,优先级最高,不使用强缓存;
2、协商缓存:强缓存失效的时候或者请求头中设置了不走强缓存,并且在请求头中设置了If-Modified-Since或者If-None-Match的时候,会去服务器验证协商缓存,如果命中了协商缓存,会在响应头设置Last-Modified或者Etag属性。
- a)ETag/If-None-Mathc 是一串hash码,代表的是资源的标识符,当文件发生变化的时候,hash码会变化,反之不会变,以W/ 开头的是弱校验,知否服务器上的文件差异能触发hash值变化的时候,才会真正请求资源,否则返回304并加载浏览器缓存。
- b)Last-Modified/If-Modified-Since:第一次请求的时候服务器将资源最后修改时间放在Last-Modified字段中响应,然后再次请求的时候将Last-Modified的值放在If-Modified-Since字段中发送到服务器,服务器根据这两个时间做对比,如果相等,返回304,并加载浏览器缓存。
比较:
1、ETag/If-None-Match主要解决了Last-Modified解决不了的问题:如果修改频率在秒级以下,Last-Modified会返回错误的304,实际上应该返回新修改的;
2、如果文件被修改了,但是内容没有发生变化,Last-Modified会错误的不返回304;