http请求缓存头详解

http请求缓存头详解

缓存的作用:
1.减少延迟(页面打开的速度)。
2.降低服务器负载(先取缓存,无缓存在请求服务器,有效降低服务器的负担)。
3.保证稳定性(有个笑话是手机抢购时为了保证服务器的稳定性,在前端写个随机数限制百分之二十的人发送数据到后台,这也侧面说明了缓存对于稳定性的作用)。
下图是自己画的,有点丑,请原谅!待会讲解!

http请求缓存头详解

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

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

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

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

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

http请求缓存头详解

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

http请求缓存头详解

http请求缓存头详解

从网上拿了个angular.js地址试了一下,第一次返回200,第二次刷新页面返回304。
时间:本地缓存获取>服务器获取

http请求缓存头详解

三、Cache-Control:
http1.1推出,指文件缓存的有效期。
1.max-age:单位是s,设置文件最大缓存时间,用得最多。
2.public:缓存可以被多用户共享,例如360浏览器可以登录不同账号,电脑系统可以切换不同账号。
3.private:仅单用户私有,不被多用户共享。
4.no-cache:不会被缓存。
5.no-store:不允许被存储。

http请求缓存头详解

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

http请求缓存头详解

http请求缓存头详解

思考?
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为标准。
至此结束,请多多指正!!!

相关推荐