简单易通讲解：HTTP缓存机制

什么是 HTTP 缓存 ？

浏览器访问网站，服务器返回资源文件 html、js、css、img等文件。从输入网站网址到加载出页面，这一过程要进行CPU计算、页面渲染、网络请求。CPU计算和页面渲染都是很快可以完成的，而影响网络请求资源的速度不确定。如果每次请求都加载这些资源势必会带来资源的浪费，而且加载时间过长也会影响用户体验。通过HTTP缓存，可以减少网络请求的体积和数量，优化用户体验。

清除浏览器缓存：如果不想命中强缓存与协商缓存，win系统可以直接 ctrl + f5，强制刷新。

浏览器缓存响应头 Cache-Control 相关参数：

参数	解释
max-age=xxx	max-age后面通常跟着一串数字，表示缓存的秒数。
no-cache	no-cache不会直接使用缓存，而是每次使用资源之前，都要先向服务器询问一下这个资源还能不能用，如果能用就继续用，如果不能用就重新请求。
no-store	每次都要向服务器请求资源。如果所有的资源都这样会对服务器造成很大的压力，所以我们对于那种对数据时效很敏感的数据，才会做这样的操作。
public	public表示任何地方都可以缓存资源。
private	private的意思就是只指允许客户端进行缓存，代理服务器不能缓存这个资源。

认识 HTTP 强制缓存

服务器设置返回资源的响应头 response headers 中的 Cache-Control：max-age=30；max-age后面通常跟着一串数字，表示缓存的秒数。

当浏览器第一次在请求服务器资源的时候，服务器返回资源中响应头中有 Cache-Control：max-age=30；的文件资源，浏览器会接收并缓存到本地中。

当浏览器第二次请求该资源的时候，会判断max-age是否过期，如果max-age没有过期，浏览器不会发送请求到服务器，直接从缓存中获取资源（from disk cache、from memory cache），反之，max-age过期，浏览器会重新向服务器请求资源。

补充知识点：

• from disk cache 表示使用硬盘中的缓存

• from memory cache 表示使用内存中的缓存

一般频繁操作的文件都缓存在内存中，加载速度是否迅速。操作不频繁的文件就会缓存在硬盘中，加载速度也会较慢。走memory还是disk , 取决于一定的算法机制, 算法是LRU cache。

认识 HTTP 协商缓存

当浏览器第一次在请求服务器资源的时候，浏览器会接收并缓存到本地中。协商缓存需要用到 Etag 字段与 If-None-Match，Etag 是 HTTP 响应头的字段。Etag 的值是根据资源内容编码生成的一段字符串（资源标识），内容不同就会生成不同的 Etag。

no-cache不会直接使用缓存，而是每次使用资源之前，都要先向服务器询问一下这个资源还能不能用，如果能用就继续用，如果不能用就重新请求。

再次发起请求时，请求头会带有 if-none-match 字段，值为上一次的响应内容的 Etag。服务器会将请求的资源标识与发送过来的值进行比对，如果比对成功，则返回 304 Not Modified 状态码，浏览器从本地资源加载。如果协商失败服务器会返回 200 状态码，新的资源+新的 Etag（资源标识）。

总结

根据一系列缓存策略操作，来判断缓存是否命中。缓存命中指的是，可以直接在浏览器本地缓存中加载资源。缓存不命中，浏览器要向服务器发送请求相关资源。缓存命中分为强缓存命中和协商缓存命中，如果响应请求头中有 cache-control：max-age=xxx，max-age 不过期，则强缓存命中，浏览器在浏览器本地 disk 或者 memory 加载资源。如果响应头有 Etag 字段（资源标识），浏览器第二次请求资源在请求头携带 If-None-Match，与上一次文件中的 Etag（资源博标识） 对比，不一致则从服务器获取资源，若一致则在浏览器本地缓存中加载资源。

流程图解 HTTP 缓存：