web缓存

为何要用缓存

通常针对静态资源如CSS,JS,图片等使用缓存，缘由以下：

• 请求更快：经过将内容缓存在本地浏览器或距离最近的缓存服务器（如CDN），在不影响网站交互的前提下能够大大加快网站加载速度。

• 节省带宽：对于已缓存的文件，能够减小请求带宽甚至无需请求网络。

• 下降服务器压力：在大量用户并发请求的状况下，服务器的性能受到限制，此时将一些静态资源放置在网络的多个节点，能够起到均衡负载的做用，下降服务器的压力。

缓存分类

缓存分为服务端侧（server side，好比 Nginx、Apache）和客户端侧（client side，好比 web browser）。经常使用的服务端缓存有CDN缓存，客户端缓存就是指浏览器缓存。

浏览器缓存机制详解

缓存类型

浏览器缓存分为强缓存和协商缓存：
1 强缓存： 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存若是命中，浏览器直接从本身的缓存中读取资源，不会发请求到服务器。好比某个css文件，若是浏览器在加载它所 在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；
2 协商缓存： 当强缓存没有命中的时候，浏览器必定会发送一个请求到服务器，经过服务器端依据资源的另一些http header验证这个资源是否命中协商缓存，若是协商缓存命中，服务器会将这个请求返回（304），可是不会返回这个资源的数据，而是告诉客户端能够直接 从缓存中加载这个资源，因而浏览器就又会从本身的缓存中去加载这个资源；若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。

强缓存与协商缓存区别：强缓存不发请求到服务器，协商缓存会发请求到服务器。

如何设置缓存

1 HTML Meta标签控制缓存（非HTTP协议定义）
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的做用是告诉浏览器当前页面不被缓存，每次访问都须要去服务器拉取。这种方法使用上很简单，但只有部分浏览器能够支持，并且全部缓存代理服务器都不支持，由于代理不解析HTML内容自己。
2 HTTP头信息控制缓存
HTTP头信息控制缓存是经过Expires（强缓存）、Cache-control（强缓存）、Last-Modified/If-Modified-Since（协商缓存）、Etag/If-None-Match（协商缓存）实现，下面详细介绍。

1）Expires是http1.0提出的一个表示资源过时时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2016 23:55:55 GMT，

读取缓存数据条件：缓存过时时间（服务器的）< 当前时间（客户端的

缺点：Expires是较老的强缓存管理header，因为它是服务器返回的一个绝对时间，这样存在一个问题， 若是客户端的时间与服务器的时间相差很大（好比时钟不一样步，或者跨时区），那么偏差就很大，因此在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。
2）Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，因此相比较Expires，Cache-Control的缓存管理更有效，安全一些。

读取缓存数据条件：上次缓存时间（客户端的）+max-age < 当前时间（客户端的）

Cache-Control值能够是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义以下：
Public指示响应可被任何缓存区缓存。
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这容许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其余用户的请求无效。
no-cache指示请求或响应消息不能缓存，该选项并非说能够设置”不缓存“，而是须要和服务器确认
no-store在请求消息中发送将使得请求和响应消息都不使用缓存，彻底不存下來。
max-age指示客户机能够接收生存期不大于指定时间（以秒为单位）的响应。上次缓存时间（客户端的）+max-age（64200s）<客户端当前时间
min-fresh指示客户机能够接收响应时间小于当前时间加上指定时间的响应。
max-stale指示客户机能够接收超出超时期间的响应消息。若是指定max-stale消息的值，那么客户机能够接收超出超时期指定值以内的响应消息。

注意：这两个header能够只启用一个，也能够同时启用，当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires：

3）Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
If-Modified-Since： 当资源过时时（强缓存失效），发现资源具备Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。
缺点：

• Last-Modified标注的最后修改只能精确到秒级，若是某些文件在1秒钟之内，被修改屡次的话，它将不能准确标注文件的修改时间（没法及时更新文件）

• 若是某些文件会被按期生成，当有时内容并无任何变化，但Last-Modified却改变了，致使文件无法使用缓存，有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形（没法使用缓存）。

HTTP1.1中Etag解决了上述问题。

4）Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后获得的。
If-None-Match： 当资源过时时（使用Cache-Control标识的max-age），发现资源具备Etage声明，则再次向web服务器请求时带上头If-None- Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的惟一标识符，可以更加准确的控制缓存。Last-Modified与ETag一块儿使用时，服务器会优先验证ETag。
Etag

2 浏览器请求流程图
浏览器第一次请求流程图
浏览器再次请求时

三、用户行为与缓存

浏览器缓存行为还有用户的行为有关，引用文章浏览器 HTTP 协议缓存机制详解的结论

CDN缓存

CDN缓存属于Cache服务器的一种。
CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可 以就近取得所需的内容，解决Internet网络拥塞情况，提升用户访问网站的响应速度。从技术上全面解决因为网络带宽小、用户访问量大、网点分布不均等 缘由，解决用户访问网站的响应速度慢的根本缘由。
　　经过上图，咱们能够了解到，使用了CDN缓存后的网站的访问过程为：
　　1)、用户向浏览器提供要访问的域名；
　 　2)、浏览器调用域名解析库对域名进行解析，因为CDN对域名解析过程进行了调整，因此解析函数库通常获得的是该域名对应的CNAME记录，为了获得实 际IP地址，浏览器须要再次对得到的CNAME域名进行解析以获得实际的IP地址；在此过程当中，使用的全局负载均衡DNS解析，如根据地理位置信 息解析对应的IP地址，使得用户能就近访问。
　　3)、这次解析获得CDN缓存服务器的IP地址，浏览器在获得实际的IP地址之后，向缓存服务器发出访问请求；
　　4)、若请求文件并未修改，返回304（充当服务器的角色）。若当前文件已过时，则缓存服务器根据浏览器提供的要访问的域名，经过Cache内部专用DNS解析获得此域名的实际IP地址，再由缓存服务器向此实际IP地址提交访问请求；
　　5)、缓存服务器从实际IP地址得获得内容之后，一方面在本地进行保存，以备之后使用，二方面把获取的数据返回给客户端，完成数据服务过程；
　　6)、客户端获得由缓存服务器返回的数据之后显示出来并完成整个浏览的数据请求过程。

 

在前端开发中，性能一直都是被你们所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提升网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略能够缩短网页请求资源的距离，减小延迟，而且因为缓存文件能够重复利用，还能够减小带宽，下降网络负荷。那么下面咱们就来看看服务器端缓存的原理。

 

缓存分类

 

web缓存分为不少种，好比数据库缓存、代理服务器缓存、还有咱们熟悉的CDN缓存，以及浏览器缓存。对于太多文字的阅读其实我是拒绝的，因而就画了个图来解释下。

 

浏览器经过代理服务器向源服务器发起请求的原理以下图，

 

 

浏览器先向代理服务器发起Web请求，再将请求转发到源服务器。它属于共享缓存，因此不少地方均可以使用其缓存资源，所以对于节省流量有很大做用。

 

浏览器缓存是将文件保存在客户端，在同一个会话过程当中会检查缓存的副本是否足够新，在后退网页时，访问过的资源能够从浏览器缓存中拿出使用。经过减小服务器处理请求的数量，用户将得到更快的体验

 

下面我就来着重讲下传说中的浏览器缓存。

 

浏览器缓存

 

页面的缓存状态是由header决定的，header的参数有四种：

 

1、Cache-Control：

 

一、max-age（单位为s）指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。

 

咱们来找个资源看下。好比shang.qq.com上的css资源，max-age=2592000，也就是说缓存有效期为2592000秒（也就是30天）。因而在30天内都会使用这个版本的资源，即便服务器上的资源发生了变化，浏览器也不会获得通知。max-age会覆盖掉Expires，后面会有讨论。

 

 

二、s-maxage（单位为s）同max-age，只用于共享缓存（好比CDN缓存）。

 

好比，当s-maxage=60时，在这60秒中，即便更新了CDN的内容，浏览器也不会进行请求。也就是说max-age用于普通缓存，而s-maxage用于代理缓存。若是存在s-maxage，则会覆盖掉max-age和Expires header。

 

三、public 指定响应会被缓存，而且在多用户间共享。也就是下图的意思。若是没有指定public仍是private，则默认为public。

 

 

四、private 响应只做为私有的缓存（见下图），不能在用户间共享。若是要求HTTP认证，响应会自动设置为private。

 

 

五、no-cache 指定不缓存响应，代表资源不进行缓存，好比，

 

 

可是设置了no-cache以后并不表明浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。所以有的时候只设置no-cache防止缓存仍是不够保险，还能够加上private指令，将过时时间设为过去的时间。

 

六、no-store 绝对禁止缓存，一看就知道若是用了这个命令固然就是不会进行缓存啦～每次请求资源都要从服务器从新获取。

 

七、must-revalidate指定若是页面是过时的，则去服务器进行获取。这个指令并不经常使用，就不作过多的讨论了。

 

2、Expires

 

缓存过时时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age + 请求时间，须要和Last-modified结合使用。但在上面咱们提到过，cache-control的优先级更高。 Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过时时间前浏览器能够直接从浏览器缓存取数据，而无需再次请求。

 

 

3、Last-modified 

 

服务器端文件的最后修改时间，须要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问Last-Modified时间点以后资源是否被修改过。若是没有修改，则返回码为304，使用缓存；若是修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。

 

以下图，最后修改时间为2014年12月19日星期五2点50分47秒

 

 

4、ETag

        

根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改，若是没有修改，过程以下：

 

 

使用ETag能够解决Last-modified存在的一些问题：

 

a、某些服务器不能精确获得资源的最后修改时间，这样就没法经过最后修改时间判断资源是否更新

 

b、若是资源修改很是频繁，在秒如下的时间内进行修改，而Last-modified只能精确到秒

 

c、一些资源的最后修改时间改变了，可是内容没改变，使用ETag就认为资源仍是没有修改的。

 

使用缓存流程

 

仍是用图说话，下面是我所总结的从浏览器请求到展现资源的过程：

 

 

cache-control指令使用

 

说了那么多cache-control的指令，那么如何选择使用哪些指令呢？我仍是不说话==

 

 

额外的

 

除了开头提到的那么多缓存方式之外，还有一种咱们都熟悉的缓存方式，LocalStorage和sessionStorage（好像是两种23333）。

 

LocalStorage是一种本地存储的公共资源，域名下不少应用共享这份资源会有风险；LocalStorage是以页面域名划分的，若是有多个等价域名之间的LocalStorage不互通，则会形成缓存多份浪费。

 

LocalStorage在PC上的兼容性不太好，并且当网络速度快、协商缓存响应快时使用localStorage的速度比不上304。而且不能缓存css文件。而移动端因为网速慢，使用localStorage要快于304。

 

在html中加载一个png图，首次加载的时候时间以下图，

 

 

然而将图片使用了LocalStorage存储后，再次刷新后加载时间为0。

 

 

而相对LocalStorage来讲，SessionStorage的数据只存储到特定的会话中，不属于持久化的存储，因此关闭浏览器会清除数据。和localstorage具备相同的方法。

 

在前端开发中缓存是必不可少的，那么使用怎样的缓存方式更高效、让咱们项目的性能更优，仍是须要咱们仔细斟酌。