前端容灾

[GeoffZhu]

笔者也是在工作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)来解决。

上面三种，是笔者在工作中使用过的前端容灾手段，如果你有更好的想法，可以在评论区告诉我，感谢🙏🏻