摸鱼前端的自检（五）深入HTTP缓存机制及原理

深入HTTP缓存机制及原理

身为一个web开发者&＃xff0c;必要的http缓存机制还是要去深入了解&＃xff0c;因为在这上面可以做很多的web性能优化。要想成为一个好的架构师&＃xff0c;这一环节必不可少。

有兴趣的同学可以去我的github&＃xff0c;里面有我的分享的学习过程和blog.
github.com/193Eric

一、http报文

因为缓存机制要用到报文&＃xff0c;所以这里简单介绍下http报文。

现在广泛的应用还是HTTP1.1&＃xff0c;HTTP1.0已经很少见了。HTTP协议交互的信息被称为HTTP报文。HTTP报文由报文首部、空行&＃xff08;CR&＃43;LF&＃xff09;、报文主体。HTTP报文分为请求报文、响应报文。

报文信息主要分为两个部分&＃xff1a;

• 报文头部 请求的附加信息&＃xff08;COOKIE,缓存信息&＃xff0c;缓存规则信息&＃xff0c;请求类型&＃xff0c;请求源Referer等等&＃xff09;

• 报文内容 HTTP真正想要传输的内容&＃xff08;客户端传输的内容和服务端返回的内容&＃xff09;

二、缓存&＃xff08;强缓存&协商缓存&＃xff09;

这里谈的缓存&＃xff0c;主要是浏览器缓存。至于服务器缓存&＃xff08;redis之类的&＃xff09;的就不谈了&＃xff0c;不在关联范围。

浏览器是一个主体&＃xff0c;一个程序。所以它拥有分配的资源&＃xff0c;有存放缓存的资源地带。
正常的首先第一次访问网站的时候&＃xff0c;所以先向服务器请求资源&＃xff0c;然后客户端拿到&＃xff0c;然后存入浏览器缓存地带。
接下来我们可以把浏览器的缓存分为强缓存和协商缓存两种。

强缓存

强缓存是属于不需要访问服务器&＃xff0c;直接从浏览器缓存里面拿数据&＃xff0c;呈现给客户端。

我们知道&＃xff0c;在没有缓存数据的时候&＃xff0c;浏览器向服务器请求数据时&＃xff0c;服务器会将数据和缓存规则一并返回&＃xff0c;缓存规则信息包含在响应header中。对于强缓存来说在header中有两个字段Expires和Cache-Control&＃xff0c;**其中Expires 是HTTP 1.0的东西&＃xff0c;现在默认浏览器均默认使用HTTP 1.1&＃xff0c;所以它的作用基本忽略。**所以我们主要谈Cache-Control。

Cache-Control&＃xff08;主要几个&＃xff0c;可以同时存在多个参数,例如&＃xff1a;max-age &＃61; 60,public&＃xff09;

• private&＃xff08;默认值&＃xff09; 浏览器可以缓存&＃xff0c;打开新窗口会再次访问服务器

• public 指令指服务器返回不仅可以被浏览器缓存&＃xff0c;而且可以被中间代理缓存&＃xff0c;后续其他用户请求该资源&＃xff0c;都可以直接使用该的缓存。打开新窗口会再次访问服务器(大体上&＃xff0c;如css、js这些公共资源需要使用public缓存起来&＃xff0c;从而加快页面加载)

• max-age &＃61; xxx&＃xff08;重要&＃xff09; 就是告诉浏览器&＃xff0c;缓存内容在多久之后&＃xff08;以秒计算&＃xff09;失效&＃xff0c;在这个范围内&＃xff0c;强缓存直接命中。在范围内打开新窗口不会访问服务器

• no-cache 不使用强缓存&＃xff0c;使用协商缓存&＃xff0c;打开新窗口会再次访问服务器

• no-store 所以内容都不缓存。&＃xff08;虽然说是为了保护敏感数据&＃xff0c;但是基本不考虑。。&＃xff09;

举个例子&＃xff0c;如果http请求头带了 Cache-Control:max-age&＃61;60,也就是说在60秒之内再次请求这个资源&＃xff0c;直接使用强缓存&＃xff0c;从浏览器取。

强缓存命中的时候&＃xff0c;network状态码是200&＃xff08;from cache&＃xff09;

协商缓存

也就是说需要和服务器协商之后&＃xff0c;再判断需要从浏览器拿缓存不。

同样的在第一次发送请求之后&＃xff0c;服务器会把一些特定的标识字段返回给客户端&＃xff0c;然后客户端交给浏览器缓存起来。当再次请求的时候&＃xff0c;客户端将存下来的标识字段通过请求发送给服务端&＃xff0c;如果匹配成功&＃xff0c;服务器返回304状态码&＃xff0c;通知客户端比较成功&＃xff0c;可以从浏览器拿缓存数据。&＃xff08;下面画了两个图来理解两次发送&＃xff09;

第一次发送&＃xff1a;

第二次发送&＃xff1a;

标识字段一共有两种&＃xff1a;

• If-Modified-Since&＃xff08;Request header&＃xff09;/ Last-Modified&＃xff08;Response header

• If-None-Match&＃xff08;Request header&＃xff09;/ Etag&＃xff08;Response header&＃xff09;

上面我们说到&＃xff0c;第一次访问的时候&＃xff0c;服务器会发送缓存标志给客户端&＃xff0c;就是Last-Modified、Etag。客户端拿到后把他们存入浏览器缓存&＃xff0c;下次访问的时候通过If-Modified-Since和If-None-Match两个字段发送过去&＃xff0c;内容和接收到的是相同的。If-Modified-Since &＃61; Last-Modified;If-None-Match &＃61; Etag。

Last-Modified &＃xff1a;服务器返回的资源最后修改时间。

Etag &＃xff1a; 当前资源在服务器的唯一标识&＃xff08;规则由服务器决定&＃xff09;。

对比总结

对于强制缓存&＃xff0c;服务器通知浏览器一个缓存时间&＃xff0c;在缓存时间内&＃xff0c;下次请求&＃xff0c;直接用缓存&＃xff0c;不在时间内&＃xff0c;执行协商缓存策略。
对于协商缓存&＃xff0c;将缓存信息中的Etag和Last-Modified通过请求发送给服务器&＃xff0c;由服务器校验&＃xff0c;返回304状态码时&＃xff0c;浏览器直接使用缓存。同时Etag的优先级要高于Last-Modified。

在第二次访问的时候&＃xff0c;是先判断是否有强缓存&＃xff0c;然后再判断协商缓存。具体可以看下面的图&＃xff1a;