http缓存是Web开发必备的知识，在前后端分离的时代，http请求是前端的生命线。但是作为非科班的工科研究僧，没学过计算机网络的相关知识，却经常在面试中被问到，因此专门整理了相关内容，以输出作为学习的方式，希望自己能够加深理解。
一、关于缓存的介绍
-
什么是缓存 当浏览器访问一个网站时，有可能是第一次访问这个网站，需要去加载这个网站的资源，比如 html、css、js、img...等，让服务器返回相应的这些资源。在第一次之后再次请求这个网站，可能会请求同样的数据，这时候可以利用缓存策略，不重复之前的请求资源流程将所有的资源都完整的重新下载一遍。
-
为什么需要缓存 简单来说，就是为了让页面加载地更快一些，优化性能体验。
-
哪些资源可以被缓存 一般静态资源可以利用缓存策略，如js、css、img等资源。
-
服务端缓存策略 规定了浏览器从服务器获取资源的方式，分为强缓存和协商缓存。
二、强缓存/强制缓存(cache-control/expires)
请求过程
初次请求时，服务端除了会给浏览器返回请求的相应资源，还会给浏览器返回一个名为Cache-Control的响应头。
因此，在之后的请求中，浏览器会直接从本地缓存中读取相应的资源，提升页面的响应速度。
注意：
- Cache-Control在Response Header中，由服务端控制哪些资源要被缓存，浏览器仅仅负责存储相关的信息
- 写法：Cache-Control:max-age=31536000（单位是秒），如图为百度页面某个图片的cache-control。
缓存过期的话，与初次请求类似，浏览器向服务器发送请求。
cache-control的取值
- max-age：设置cache的时间
- no-cache：禁用本地缓存
- no-store：禁用本地和服务器缓存，一般不常用
- private
- public
expires
老标准，已被cache-control代替，与cache-control用法一致，但是为了兼容性，一般把这俩都写上。
三、协商缓存
- 概念 是一种服务器缓存策略；
服务器判断客户端资源，是否和服务端的资源一样；
如果一样则返回304，否则返回200和最新资源；
- 请求过程
（1）初次请求：服务器返回资源和资源标识（Last-Modified）
（2）再次请求：浏览器发送的请求中携带着资源标识（If-Modified-Since），服务器收到请求后判断该资源标识所对应的资源是否发生更改（用代码表示：If-Modified-Since === Last-Modified ? 304 : new），如果没有发生更改，则返回304，浏览器页面的相关资源不更新，否则返回资源和新的Last-Modified
3.资源标识
- Last-Modified——资源的最后修改时间
- Etag——资源的唯一标识（一个字符串，类似人类的指纹）
- 二者的区别
会优先使用Etag；
Last-Modified只能精确到秒级；
如果资源被重复生成，Last-Modified会改变但是Etag不变，因此Etag更加精确。
四、三种刷新操作对缓存的影响
- 正常操作：地址栏输入url、跳转链接、前进后退等
强制缓存和协商缓存都有效
- 手动刷新：F5、点击刷新按钮、右击菜单刷新
强制缓存失效，协商缓存有效
- 强制刷新：ctrl+F5/shift+command+2
强制缓存和协商缓存都失效
