缓存策略，一文足够~

先来了解一下，缓存囊括了哪些部分，有一个大体认识；

一、浏览器缓存

什么是浏览器缓存？

      浏览器缓存，又称 HTTP 缓存，指的是：当我们浏览网站的时候，器存储会在本地存储一个副本，以便下次访问同个网址的时候可以不再连接服务器，直接使用本地的缓存。服务器端程序可以通过 HTTP Cache Headers 来控制缓存行为，减轻服务器的负担，缩短了响应时间，显著得提高网站的性能。

浏览器缓存的维度有哪两种？

      对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取更新的版本。

新鲜度（过期机制）：也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的：

• 含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内；
• 浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度

满足以上两个情况的一种，浏览器会直接从缓存中获取副本并渲染。

校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

新鲜度即为首部字段均能让客户端决定是否向服务器发送请求，比如设置的缓存时间未过期，那么自然直接从本地缓存取数据即可；

校验值即为客户端上某个资源保存的缓存时间过期了，但这时候其实服务器并没有更新过这个资源，让服务器知道客户端现在存有的缓存文件，其实跟自己所有的文件是一致的，然后直接告诉客户端说“这东西你直接用缓存里的就可以了，我这边没更新过呢，就不再传一次过去了”。

与缓存相关的HTTP首部字段主要有哪些？

在HTTP请求和响应的消息报头中，常见的与缓存有关的消息报头有：

HTTP缓存机制归纳

缓存行为主要由缓存策略决定，而缓存策略由内容拥有者设置。这些策略主要通过特定的HTTP头部来清晰地表达。

当一个用户发起一个静态资源请求的时候，浏览器会通过以下几步来获取资源：

• 本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；包含Expires，Cache-Control
• 协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器,然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；包含Last-Modified&If-Modified-Since，ETag&If-None-Match，ETag&Last-Modified
• 缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。

缓存头部字段联系与区别是什么？看对比！

****HTTP缓存首部字段优先级是什么？

优先级从高到低分别是 Pragma -> Cache-Control -> Expires 。

若Pragma头部和Cache-Control头部同时存在，则起作用的会是Pragma

若Pragma头部和Expires头部同时存在，则起作用的会是Pragma

若报文中同时出现了 Expires 和 Cache-Control，则以 Cache-Control 为准。

用户操作行为与缓存的关系是什么？

• 浏览器中的操作对缓存的影响:

• 强制刷新 – 当按下ctrl+F5来刷新页面的时候, 浏览器将绕过各种缓存(本地缓存和协商缓存), 直接让服务器返回最新的资源;

• 普通刷新 – 当按下F5来刷新页面的时候,浏览器将绕过本地缓蹲来发送请求到服务器, 此时, 协商缓存是有效的

• 回车或转向 – 当在地址栏上输入回车或者按下跳转按钮的时候, 所有缓存都生效

Web缓存的作用是什么？

• 减少网络带宽消耗
• 降低服务器压力
• 减少网络延迟，加快页面打开速度用户操作行为与缓存

缓存实践：

综上对各种HTTP缓存控制头部的对比以及用户可能出现的浏览器刷新行为的讨论，当我们在一个项目上做http缓存的应用时，我们实际上还是会把上述提及的大多数首部字段均使用上。

结论：

• 需要兼容HTTP1.0的时候需要使用Expires，不然可以考虑直接使用Cache-Control
• 需要处理一秒内多次修改的情况，或者其他Last-Modified处理不了的情况，才使用ETag，否则使用Last-Modified。
• 对于所有可缓存资源，需要指定一个Expires或Cache-Control，同时指定Last-Modified或者Etag。
• 可以通过标识文件版本名、加长缓存时间的方式来减少304响应。

二、服务器端缓存

1.CDN缓存

CDN缓存是什么？

CDN缓存，也叫网关缓存、反向代理缓存。浏览器先向CDN网关发起WEB请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态地请求转发到合适的源服务器上。

CDN缓存策略是什么？

CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。

当客户端向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向源站发出回源请求（back to the source request），从源站拉取最新数据，更新本地缓存，并将最新数据返回给客户端。

CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。

CDN缓存时间会对“回源率”产生直接的影响。若CDN缓存时间较短，CDN边缘节点上的数据会经常失效，导致频繁回源，增加了源站的负载，同时也增大的访问延时；若CDN缓存时间太长，会带来数据更新时间慢的问题。开发者需要增对特定的业务，来做特定的数据缓存时间管理。

CDN缓存刷新CDN边缘节点对开发者是透明的，相比于浏览器Ctrl+F5的强制刷新来使浏览器本地缓存失效，开发者可以通过CDN服务商提供的“刷新缓存”接口来达到清理CDN边缘节点缓存的目的。这样开发者在更新数据后，可以使用“刷新缓存”功能来强制CDN节点上的数据缓存过期，保证客户端在访问时，拉取到最新的数据。

CDN优势有哪些？

• CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；
• 大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。

CDN劣势有哪些？

• 当网站更新时，如果CDN节点上数据没有及时更新，即便用户再浏览器使用Ctrl +F5的方式使浏览器端的缓存失效，也会因为CDN边缘节点没有同步最新数据而导致用户访问异常。

2.Combo服务

Combo服务是什么？

Combo服务，也就是我们在最终拼接生成页面资源引用的时候，并不是生成多个独立的link标签，而是将资源地址拼接成一个url路径，请求一种线上的动态资源合并服务，从而实现减少HTTP请求的需求。

/??fle1,file2,file3,...的url请求响应就是动态combo服务提供的，它的原理很简单，就是根据url找到对应的多个文件，合并成一个文件来响应请求，并将其缓存，以加快访问速度。

Combo服务缺陷有哪些？

• 浏览器有url长度限制，因此不能无限制的合并资源。
• 如果用户在网站内有公共资源的两个页面间跳转访问，由于两个页面的combo的url不一样导致用户不能利用浏览器缓存来加快对公共资源的访问速度。如果combo的url中任何一个文件发生改变，都会导致整个url缓存失效，从而导致浏览器缓存利用率降低。

三、HTML5缓存

1.HTML5离线应用缓存

出现原因：

• 用户可离线访问你的应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
• 用户访问本地的缓存文件，通常意味着更快的访问速度
• 仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

manifest文件罗列了需要被缓存的文件清单。

这个过程中有几个问题需要注意：

• 如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
• 对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
• 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
• 在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

2.LocalStorage

localStorage.fresh = “vfresh.org”;   //设置一个键值 
var a = localStorage.fresh;   //获取键值

//API

//清空storage 
localStorage.clear();

//设置一个键值 
localStorage.setItem(“fresh”,“vfresh.org”);

//获取一个键值 
localStorage.getItem(“fresh”); 

//return “vfresh.org” //获取指定下标的键的名称（如同Array） 
localStorage.key(0); 

//return “fresh” //删除一个键值 
localStorage.removeItem(“fresh”);

与sessionStroage主要的区别是存储时间和作用域。

另外，严格说来localStorage更像是cookie一类的本地数据存储。但在标准缓存之外，开发人员可以用浏览器的一些功能来实现自定义的客户端“缓存”。

关于localStorage踩坑指南：

jero 使用localStorage必须了解的点

四、构建可缓存站点的建议

• 同一个资源保证URL的稳定性
• 给Css、js、图片等资源增加HTTP缓存头，并强制入口Html不被缓存
• 减少对Cookie的依赖
• 减少对HTTPS加密协议的使用
• 多用Get方式请求动态Cgi
• 动态CGI也是可以被缓存

完结，欢迎讨论~