前端容災

什麼是容災

容災的概念始于後端，指當遇到某個伺服器或某個機房發生自然災害、斷網斷電等情況下的應急辦法，可以保證服務依然可用。

新入行的小夥伴可能有疑問，都斷網斷電了怎麼可能保證網站還可以正常通路那？其實這是對大型網站，了解不深導緻的，你認為的網站是這樣的

像這種單機的服務自然沒法做什麼容災了，這一台機器挂了服務也就挂了。但現在的大型網站，早就不是上圖那個樣子了，而是這樣

甚至這樣

最外層那個抗壓的伺服器一般是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)來解決。

上面三種，是筆者在工作中使用過的前端容災手段，如果你有更好的想法，可以在評論區告訴我，感謝

原文釋出時間：06月22日

原文作者：GeoffZhu

本文來源

掘金

如需轉載請緊急聯系作者