筆者也是在工作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)來解決。
上面三種，是筆者在工作中使用過的前端容災手段，如果你有更好的想法，可以在評論區告訴我，感謝