前端容災

筆者也是在工做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)來解決。

上面三種，是筆者在工做中使用過的前端容災手段，若是你有更好的想法，能夠在評論區告訴我，感謝