http缓存相关理论

一，什么是http缓存

http缓存是指，当客户端向服务端请求资源时。会先抵达浏览器缓存，如果浏览器缓存中有“要请求的资源”的副本，则直接从浏览器缓存中提取资源，不访问原始服务器。

常见的http缓存只能缓存get请求相应的资源，对于其他类型的响应无能为力。

http缓存是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在响应头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存直接返回200；否则将请求参数带入请求头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器返回新的资源。

二，http缓存分类

1，强缓存

可使请求直接从缓存里获取资源，不访问原始服务器

2，协商缓存

强缓存不生效时进行协商缓存，一定会和服务端交互，由服务端比对资源是否更新修改。没有修改，返回304，让浏览器使用缓存中的数据。有更新时返回200，返回更新后的资源并且将缓存信息一起返回

3，私有缓存

只能用于单独的用户：Cache-Control:Pervate

4，共享缓存

可以被多个用户使用：Cache-Control:Public

三，如何使用http缓存（这段cv过来，后续待修改）

一般需要缓存的资源有html页面和其他静态资源：

1、html页面缓存的设置主要是在标签中嵌入标签，这种方式只对页面有效，对页面上的资源无效

1.1、html页面禁用缓存的设置如下：

<meta http-equiv="pragma" content="no-cache">
// 仅有IE浏览器才识别的标签，不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流浏览器识别的标签
<meta http-equiv="expires" content="0">
// 仅有IE浏览器才识别的标签，该方式仅仅作为知会IE缓存时间的标记，你并不能在请求或响应报文中找到Expires字段

1.2、html设置缓存如下：

<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签

2、静态资源的缓存一般是在web服务器上配置的，常用的web服务器有：nginx、apache。具体的配置这里不做详细介绍，大家自行查阅。

3、不想使用缓存的几种方式：

3.1、Ctrl + F5强制刷新，都会直接向服务器提取数据。

3.2、按F5刷新或浏览器的刷新按钮，默认加上Cache-Control：max-age=0，即会走协商缓存。

3.3、在IE浏览器下不想使用缓存的做法：打开IE，点击工具栏上的工具->Internet选项->常规->浏览历史记录设置. 选择“从不”，然后保存。最后点击“删除”把Internet临时文件都删掉（IE缓存的文件就是Internet临时文件）。

3.4、还有就是上面1、2中禁用缓存的做法

3.5、对于其他浏览器也都有清除缓存的办法

四，http缓存的几个注意点（cv，待修改）

1、强缓存情况下，只要缓存还没过期，就会直接从缓存中取数据，就算服务器端有数据变化，也不会从服务器端获取了，这样就无法获取到修改后的数据。决解的办法有：在修改后的资源加上随机数,确保不会从缓存中取。

例如：
http://www.kimshare.club/kim/common.css?v=22324432
http://www.kimshare.club/kim/common.2312331.css

2、尽量减少304的请求，因为我们知道，协商缓存每次都会与后台服务器进行交互，所以性能上不是很好。从性能上来看尽量多使用强缓存。

3、在Firefox浏览器下，使用Cache-Control: no-cache 是不生效的，其识别的是no-store。这样能达到其他浏览器使用Cache-Control:

no-cache的效果。所以为了兼容Firefox浏览器，经常会写成Cache-Control: no-cache，no-store。

4、与缓存相关的几个header属性有：Vary、Date/Age。

Vary：

vary本身是“变化”的意思，而在http报文中更趋于是“vary from”（与。。。不同）的含义，它表示服务端会以什么基准字段来区分、筛选缓存版本。
在服务端有着这么一个地址，如果是IE用户则返回针对IE开发的内容，否则返回另一个主流浏览器版本的内容。
格式：Vary: User-Agent
知会代理服务器需要以 User-Agent 这个请求首部字段来区别缓存版本，防止传递给客户端的缓存不正确。

Date/Age：

响应报文中的 Date 和 Age 字段：区分其收到的资源是否命中了代理服务器的缓存。

Date

理所当然是原服务器发送该资源响应报文的时间（GMT格式），如果你发现 Date 的时间与“当前时间”差别较大，或者连续F5刷新发现 Date 的值都没变化，则说明你当前请求是命中了代理服务器的缓存。

Age

也是响应报文中的首部字段，它表示该文件在代理服务器中存在的时间（秒），如文件被修改或替换，Age会重新由0开始累计。

作者：前端搬砖师Kim
链接：https://www.jianshu.com/p/227cee9c8d15
来源：简书
著作权归作者所有。

五，总结

1，对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求直接使用缓存的资源，不再时间内，执行协商缓存策略。

2，对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。否则返回200，使用更新的资源。