從前端角度分析：西安一碼通崩潰事件

事件現(xiàn)象

?

12月20日，西安一碼通崩潰了，網(wǎng)上隨即出現(xiàn)大量像段子一樣的新聞，比方說(shuō)：健康碼打不開(kāi)，需手執(zhí)健康碼截圖憑發(fā)誓進(jìn)入公司；比方說(shuō)維護(hù)一碼通的開(kāi)發(fā)因?yàn)榇虿婚_(kāi)健康碼而進(jìn)不了軟件園。

?

下午響應(yīng)政府號(hào)召去做核酸，排在需要三四眼才能望到頭的位置，不停的有人相互詢問(wèn)：“你的碼能刷出來(lái)嗎？”
“我的碼也刷不出來(lái)，估計(jì)系統(tǒng)崩了吧，也許一會(huì)重啟下就好了。”

半個(gè)小時(shí)后，等待檢測(cè)的隊(duì)伍突然躁動(dòng)起來(lái)。我踮起腳尖看到前面排隊(duì)的人開(kāi)始分散，隨后聽(tīng)到前面的傳話：“系統(tǒng)問(wèn)題，暫停檢測(cè)！”
無(wú)奈離開(kāi)的我，耳邊傳來(lái)不知是誰(shuí)喊的一嗓子：“弄撒哩”。

「這聲音很刺耳，無(wú)他，只因同是西安IT人。」

崩潰原因分析

?

一邊刷新一碼通，一邊陷入分析的旋渦。

?

小程序的界面出來(lái)了，證明前端靜態(tài)資源加載無(wú)異常。
健康碼、疫苗及核酸狀態(tài)顯示區(qū)域布局塌陷，雖然沒(méi)有日志可供分析，但基于常識(shí)可認(rèn)定為：「因接口壓力過(guò)大，導(dǎo)致的后端服務(wù)崩潰」。

但西安上千萬(wàn)的市民，可不管你后端崩不崩潰。市民甲乙丙丁因?yàn)榻】荡a加載失敗，大多會(huì)選擇重新打開(kāi)小程序，而這造成了接口調(diào)用量指數(shù)級(jí)增長(zhǎng)，使原本就不富余的服務(wù)器資源更加雪上加霜。

現(xiàn)狀如此，前端能否做些什么？

前端該做些什么

?

在一個(gè)行業(yè)呆的久了，每當(dāng)遇到出現(xiàn)在身邊的BUG就難免會(huì)有代入感。雖然自已這二把刀的技術(shù)，連參與健康碼開(kāi)發(fā)的機(jī)會(huì)都沒(méi)有。

?

1. 對(duì)異常進(jìn)行處理

?

從界面上來(lái)看崩潰的主要原因是接口返回異常，且在此情況下前端并未對(duì)異常進(jìn)行處理。

?

「捕獲并處理接口返回的異常，是一項(xiàng)基本的前端禮儀。」
當(dāng)接口異常時(shí)，通過(guò)錯(cuò)誤頁(yè)告知用戶本次打開(kāi)失敗了，并提醒或強(qiáng)制通過(guò)倒計(jì)時(shí)等交互來(lái)防止用戶頻繁刷新。

僅此一項(xiàng)簡(jiǎn)單交互，就可以減少大量的接口壓力。

2. 梯段顯示

?

從界面分析中發(fā)現(xiàn)前端在邏輯實(shí)現(xiàn)中并沒(méi)有把健康碼、接種疫苗狀態(tài)、核酸檢測(cè)狀態(tài)進(jìn)行分批加載，正是這種一把梭的加載方式導(dǎo)致一處崩所有崩。

?

「假設(shè)后端已經(jīng)存在微服務(wù)架構(gòu)，前端理因根據(jù)優(yōu)先級(jí)異步加載這三組來(lái)自不同微服務(wù)的數(shù)據(jù)。」
甚至于將其中的接種疫苗、核酸檢測(cè)狀態(tài)改造為觸發(fā)式加載，即優(yōu)先展示健康碼，并在原接種疫苗、核酸檢測(cè)狀態(tài)的位置增加觸發(fā)按紐。

3. 前端緩存

?

通過(guò)以往的使用，基本可以確認(rèn)個(gè)人的健康狀態(tài)非實(shí)時(shí)更新。

?

「即然如此，個(gè)人的健康狀態(tài)在兩次計(jì)算的間隔期就應(yīng)該利用前端緩存。」
核酸及疫苗狀態(tài)雖然與健康狀態(tài)有所不同，但也可以通過(guò)前端緩存 + 觸發(fā)式更新的方式進(jìn)行前端緩存利用，即在人員進(jìn)行核酸檢測(cè)及疫苗接種掃碼時(shí)，清除前端緩存并將清除狀態(tài)保持至數(shù)據(jù)更新前。

以上的方式有著同一原則：「使用前端手段，減少不必要的刷新，從而達(dá)到減少服務(wù)器壓力的目的。」

一切都會(huì)好的

防止系統(tǒng)崩潰的最好方式是平日里敲擊的鍵盤(pán)，在日常工作中少一些所謂的底層邏輯、頂層設(shè)計(jì)、過(guò)程抓手，多留一些優(yōu)化時(shí)間給新時(shí)代的農(nóng)民工。

「沒(méi)有一個(gè)不可逾越的冬天，一切問(wèn)題都會(huì)解決。」
我是寫(xiě)個(gè)程序換個(gè)餅：一個(gè)玩過(guò)傳奇喜歡殺生丸的前端開(kāi)發(fā)，GridManager^[1]作者。

「西安加油！」