前端容灾

7,049 阅读3分钟

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

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