认识达内从这里开始

对于web前端程序员来说，缓存和内存是web程序员必须熟练掌握的技术知识之一，而今天我们就通过案例分析来了解一下，http缓存的两种类型。

HTTP缓存分为2种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。

强缓存

不需要发送请求到服务端，直接读取浏览器本地缓存，在Chrome的Network中显示的HTTP状态码是200，在Chrome中，强缓存又分为DiskCache(存放在硬盘中)和MemoryCache(存放在内存中)，存放的位置是由浏览器控制的。是否强缓存由Expires、Cache-Control和Pragma3个Header属性共同来控制。

○Expires

Expires的值是一个HTTP日期，在浏览器发起请求时，会根据系统时间和Expires的值进行比较，如果系统时间超过了Expires的值，缓存失效。由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。Expires的优先级在三个Header属性中是最低的。

○Cache-Control

Cache-Control是HTTP/1.1中新增的属性，在请求头和响应头中都可以使用，常用的属性值如有：

max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效

no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜

no-store：禁止使用缓存(包括协商缓存)，每次都向服务器请求最新的资源

private：专用于个人的缓存，中间代理、CDN等不能缓存此响应

public：响应可以被中间代理、CDN等缓存

must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证

○Pragma

Pragma只有一个属性值，就是no-cache，效果和Cache-Control中的no-cache一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在3个头部属性中的优先级最高。

协商缓存

当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了If-Modified-Since或者If-None-Match的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回304状态，加载浏览器缓存，并且响应头会设置Last-Modified或者ETag属性。

○ETag/If-None-Match

ETag/If-None-Match的值是一串hash码，代表的是一个资源的标识符，当服务端的文件变化的时候，它的hash码会随之改变，通过请求头中的If-None-Match和当前文件的hash值进行比较，如果相等则表示命中协商缓存。ETag又有强弱校验之分，如果hash码是以"W/"开头的一串字符串，说明此时协商缓存的校验是弱校验的，只有服务器上的文件差异(根据ETag计算方式来决定)达到能够触发hash值后缀变化的时候，才会真正地请求资源，否则返回304并加载浏览器缓存。

○Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since的值代表的是文件的最后修改时间，一次请求服务端会把资源的最后修改时间放到Last-Modified响应头中，二次发起请求的时候，请求头会带上上一次响应头中的Last-Modified的时间，并放到If-Modified-Since请求头属性中，服务端根据文件最后一次修改时间和If-Modified-Since的值进行比较，如果相等，返回304，并加载浏览器缓存。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。