浅谈 Web 缓存

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

 

缓存分类

 

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具备相同的方法。

 

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