1、强缓存
浏览器在加载某个资源时,先根据这个资源的一些http header判断它是否命中强缓存,如果命中,浏览器直接从自己的缓存中读取资源,不会发送请求到服务器。
2、协商缓存
当强缓存没有命中时,浏览器会发送请求到服务器,服务器根据资源的另外一些HTTP header验证这个资源是否命中协商缓存。
1)命中:服务器返回(304),且不会携带请求资源的数据,而是告诉浏览器可以直接从自己的缓存中加载所请求资源,于是浏览器又从自己的缓存中去加载资源。
2)未命中:服务器将资源返回客户端(200),并更新本地缓存数据。
3、缓存设置方法
3.1 HTML Meat标签控制缓存(非HTTP协议定义)
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取数据,这种方法使用上很简单,但只有部分浏览器可以支持,而且有缓存代理的服务器都不支持,因为代理不解析HTML内容本身。
3.2 HTTP头信息控制缓存
3.2.1 Expires
是Http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如:
Expires: Thu,31 Dec 2016 23:55:55 GMT
读取缓存数据条件: 缓存过期时间(服务器返回的)<当前时间(客户端当前时间);
缺点: 存在时钟不同步或者跨时区的问题,所以在HTTP1.1版本开始,使用 Cache-Control: max-age=x 代替。
3.2.2 Cache-Control
描述的是一个相对时间。
读取缓存数据条件: 上次缓存时间(客户端的)+max-age<当前时间(客户端的);
Cache-Control值:
public:指示响应可被任何缓存区缓存;
private:指示对于单个用户的整个或部分响应消息,不能被共享缓存处理,这允许服务器仅仅描述当前用户的部分响应消息,此响应消息对于其他用户的请求无效;
no-cache:请求或响应消息不能缓存,该选项并不是说可以设置“不缓存”,而是需要和服务器确认;
no-store:在请求消息中发送将使得请求和响应消息都不使用缓存,完全存不下来;
max-age:指示客户机可以接收生存期不大于指定时间,以秒为单位的响应;
注意: Cache-Control的优先级>Expires的优先级。
3.2.3 Last-Modified/If-Modified-Since
两者都是标准的HTTP请求头标签,用于记录页面的最后修改时间,需要配合Cache-Control使用。
Last-Modified 是由服务器发送给客户端的HTTP请求头标签;
If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签
应用场景
Last-Modified
在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样:
Last-Modified: Fri, 12 May 2006 18:53:33 GMT
后面跟的时间是服务器存储的文件修改时间。
If-Modified-Since
客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:
If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT
后面跟的时间是本地浏览器存储的文件修改时间。
如果服务器端的资源没有变化,则时间一致,自动返回HTTP状态码304(Not Changed.)状态码,内容为空,客户端接到之后,就直接把本地缓存文件显示到浏览器中,这样就节省了传输数据量。如果服务器端资源发生改变或者重启服务器时,时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。以上操作可以保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。
3.2.4 Etag/If-None-Match
也需要配合Cache-Control使用。
Etag: web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定);
If-None-Match: 当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etag声明,则再次向web服务器请求时带上头 If-None-Match(Etag的值),web服务器收到请求后发现有头 If-None-Match 则与被请求资源的相应校验串进行比对,然后决定返回200或304。
注意: 当Last-Modified与Etag一起使用时,服务器会优先验证Etag。
综上,浏览器缓存过程如下图所示:
4、服务器端缓存
CDN缓存
CDN(Content Delivery Network内容分发网络): 属于Cache服务器的一种,其目的是通过现在的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,即通过调试系统将用户的请求路由引导到离用户接入网络最近或者访问效果最佳的缓存服务器上,由该缓存服务器为用户提供内容服务。相对于直接访问源站,这种方式缩短了用户和内容之间的网络距离,从而达到加速的效果;使用户可以就近取得所需的内容,解决Internet网络拥塞状况,提高用户访问网站的响应速度,从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因,解决用户访问网站的响应速度慢的根本原因。
访问过程:
1)用户向浏览器提供要访问的域名;
2)浏览器调用域名解析库对域名进行解析,由于CDN对域名解析过程进行了调整,所以解析函数库一般得到的是该域名对应的CNAME记录,为了得到实际IP地址,浏览器需要再次对获得的CNAME域名进行解析以得到实际IP地址;在此过程中,使用的全局负载均衡DNS解析,如根据地理位置信息解析对应的IP地址,使用户能就近访问,此次解析得到的是CDN缓存服务器的IP地址;
3)浏览器得到实际IP地址,向缓存服务器发出访问请求;
4)若请求文件并未修改,返回304(充当服务器的角色),若当前文件已经过期,则缓存服务器根据提供的要访问的域名,通过Cache内部专用DNS解析得到此域名的实际IP地址,再由缓存服务器向此实际IP地址提交访问请求;
5)缓存服务器从实际IP地址得到内容以后,一方面在本地进行保存,以备以后使用,另一方面把获取的数据返回给客户端,完成数据服务过程;
6)客户端得到由缓存服务器返回的数据以后显示出来并完成整个数据请求过程;
参考
缓存、cookie、token、session、webStorage
HTTP的请求头标签 If-Modified-Since与Last-Modified