前端容灾

笔者也是在工做2年多之后才有接触到前端容灾的概念，毕竟项目不到必定规模，是不须要前端来作容灾的。

什么是容灾

容灾的概念始于后端，指当遇到某个服务器或某个机房发生天然灾害、断网断电等状况下的应急办法，能够保证服务依然可用。 新入行的小伙伴可能有疑问，都断网断电了怎么可能保证网站还能够正常访问那？其实这是对大型网站，理解不深致使的，你认为的网站是这样的

像这种单机的服务天然无法作什么容灾了，这一台机器挂了服务也就挂了。但如今的大型网站，早就不是上图那个样子了，而是这样

甚至这样

最外层那个抗压的服务器通常是Nginx或Apache ，能够作到当某台机器挂了之后屏蔽掉那台机器，这就是后端容灾的基本手段之一，经过集群作到高可用。

说这些只是想让你理解什么是容灾，这不是今天的重点。今天的重点是前端容灾

什么是前端容灾

前端容灾指的是当后端接口挂了，依然能够保证页面展现信息完整。咱们以百度首页中新闻模块举例，当你打开百度的时候，服务端渲染好的页面出来之后，须要请求新闻接口拿到数据渲染新闻模块。你的老板告诉你，不论任何状况，必须展现新闻和广告，即便新闻接口挂了。这个时候怎么办，也就是前端容灾的范畴了。

前端容灾可用手段

localstorage缓冲接口数据

新闻模块的接口，每次有返回的时候，都存入localstorage中，以接口路径为key，返回数据为value，当新闻接口请求失败的时候先从localstorage中读上次成功请求时候的数据，展现出来。

备份一份静态数据到CDN

让业主方同窗提供一份兜底新闻数据，存放在CDN上，新闻接口返回失败，用户localstorage中也没有数据的时候，去CDN对应地址拉取数据渲染

利用Service worker的caches API作页面接口缓存

Service worker提供了fetch事件可供监听，当页面发出请求的时候，会先过fetch方法，你能够在这里定义任何你须要的缓存策略，好比请求成功后，将结果存入caches。Service worker中，你甚至能够缓存当前页面的HTML，让网站离线运行。

经过上面这些手段，能够保证只要给用户吐出HTML就能保证页面完整性。对于让页面始终可吐出HTML这件事，那就又属于后端，运维同窗所作的了。能够借助上面我介绍到的集群的方式，也能够经过CDN的方式(动态DNS)来解决。

上面三种，是笔者在工做中使用过的前端容灾手段，若是你有更好的想法，能够在评论区告诉我，感谢