1 缓存分类
a. 强缓存；
b. 协商缓存；
2 缓存作用
a. 可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力；
3 缓存运作流程
缓存流程图
4 强缓存详解
a. 强缓存分为 Disk Cache（存放硬盘）和Memory Cache（存放内存），存放位置有浏览器控制，是否强缓存由Expires， Cache-Control 和Pragma 三个Header属性共同控制；
b. 不需要发送请求到服务端，直接读取浏览器本地缓存，在chrome的network中显示的HTTP状态码是200;
4.1 Expires
expires的值是一个HTTP日期，在浏览器发起请求时，会根据系统时间和Expires的值进行比较，如果系统时间超过了Expires的值， 缓存失效。由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。 Expires的优先级在三个Header属性中最低。
4.2 Cache-Control
cache-control是http1.1中新增的属性，在请求头和响应头中都可以使用；常用属性如下：
- max-age： 单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效。
-no-cache： 不使用强缓存， 需要和服务器缓验证缓存是否新鲜。
-no-store： 禁止使用缓存（包括协商缓存），每次向服务器请求最新的资源； - private: 专用于个人的缓存，中间代理，cdn等不能缓存此响应；
-public： 响应可以被中间代理，cdn等缓存；
-must-revalidate： 在缓存过期前可以使用，过期后必须想服务器验证；
4.3 Pragma
- pragma只有一个属性值(no-cache)，效果和cache-control中的no-cache一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在三个头部属性中的优先级最高。
5 协商缓存详解
当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置if-modified-since或者if-none-match的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回304,加载浏览器缓存，并且在响应头会设置last-modified或者Etag属性。
5.1 Etag/if-none-match
a. Etag/If-None-Match的值是遗传has码，代表的是一个资源的标识符，当服务端的文件变化的时候，hash值随之变化；通过请求头中的If-None-Match和当前文件的hash值进行比较，如果相等则表示命中协商缓存。
b. Etag有强弱校验之分，如果hash码是以“w/”开头的一串字符串，说明此时协商缓存的校验是弱校验，只有服务器上的文件差异（根据Etag计算方式来决定）达到能够触发hash值后缀变化的时候，才会真正的请求资源，否则返回304并加载浏览器缓存。
5.2 Last-Modified/If-Modified-Since
Last-modified/If-Modified-Since的值代表的是文件的最后修改时间，第一次请求服务端会把资源的最后修改时间放到Last-Modified响应头中，第二次发起请求的时候，请求头会带上上次一响应头中的last-modified的时间，并放到If-Modified-Since请求头属性中，服务端根据文件最后一次修改时间和If-Modified-Since的值进行比较， 如果相等，返回304， 并加载浏览器缓存。
网友评论