http请求缓存头详解

缓存的作用：

1.减少延迟(页面打开的速度)。

2.降低服务器负载(先取缓存，无缓存在请求服务器，有效降低服务器的负担)。

3.保证稳定性(有个笑话是手机抢购时为了保证服务器的稳定性，在前端写个随机数限制百分之二十的人发送数据到后台，这也侧面说明了缓存对于稳定性的作用)。

下图是自己画的，有点丑，请原谅！待会讲解！

浏览器与服务器进行通讯包含两部分：

1.请求头header(包含各种缓存信息)。

2.请求体bdoy(数据发送的主要内容)

页面缓存是由header决定的，包含四个参数：

一、Expires：

http1.0推出的，指服务器返回的文件有效期，但其实这是有缺陷的，如果把本地的时间改为2118年，那Expires的时间怎么都会过期。

二、Last-Modified：

http1.0推出的，指服务器文件的最后修改时间，浏览器会带上If-Modified-Since向服务器发送请求，与服务器文件修改时间Last-Modified做对比，如果时间不同，则获取数据返回200，否则返回304后调用浏览器本地硬盘的缓存。 这种方式也有问题，如果服务端文件频繁修改保存，那么Last-Modified就会频繁更改，每次都从服务端获取，这也就有了http1.1的修改。

从网上拿了个angular.js地址试了一下，第一次返回200，第二次刷新页面返回304。

时间：本地缓存获取>服务器获取

三、Cache-Control：

http1.1推出，指文件缓存的有效期。

1.max-age:单位是s，设置文件最大缓存时间，用得最多。

2.public:缓存可以被多用户共享，例如360浏览器可以登录不同账号，电脑系统可以切换不同账号。

3.private:仅单用户私有，不被多用户共享。

4.no-cache:不会被缓存。

5.no-store:不允许被存储。

四、ETag

http1.1推出，该版本号是由服务端随机生成的，浏览器会带上If-None-Match向服务器发送请求，与服务器文件修改版本ETag做对比，如果版本号不同，则获取数据返回200，否则返回304后调用浏览器本地硬盘的缓存，这种方式比Last-Modified靠谱。

思考？

Cache-Control+Last-Modified+ETag 的优先级会如何？

还记得刚开始的图吗？

因为http1.1>http1.0，

所以Cache-Control>Expires，ETag>Last-Modified。

依照就近原则，先找本地缓存，没有再向服务器发请求，

所以Expires>Last-Modified,Cache-Control>ETag，

如果浏览器只支持http1.0，那么浏览器只会携带Last-Modified发送给后台，

如果服务器只支持http1.0，那么服务器会以Last-Modified为标准。

如果浏览器支持http1.1，那么浏览器会携带Cache-Control+Last-Modified+ETag发送给后台，

如果服务器支持http1.1，那么服务器会以Cache-Control+ETag为标准。

至此结束，请多多指正，晚安，早睡身体好！！！