借負責(zé)的小程序流量暴增事件總結(jié)下優(yōu)化技巧
之前負責(zé)的錫慧在線微信小程序是一款公益性質(zhì)在線教育類小程序，因疫情影響導(dǎo)致流量暴增，日訪問過百萬
高峰期每分鐘1w+在線訪問
視頻播放卡頓嚴重，使用體驗很差。
博主已是離職狀態(tài)，但是公司內(nèi)并沒有找到可以接手的同學(xué)，小程序前端是我從零一手做出來的，有點特殊情感，于是就以小程序顧問的身份幫忙處理了小程序端的工作。
應(yīng)對本次問題，視頻卡頓是選擇把視頻課件資源從文件服務(wù)器上遷移至騰訊云存儲，現(xiàn)已經(jīng)修復(fù)發(fā)版完畢
在此總結(jié)下小程序優(yōu)化相關(guān)知識。
小程序端優(yōu)化
提高加載性能
小程序呈現(xiàn)到用戶面前，實際上經(jīng)歷了下面兩個階段：
- 運行環(huán)境的預(yù)加載
- 微信會在用戶打開小程序之前就已經(jīng)準備好環(huán)境，用戶點擊小程序入口后，直接下載小程序的代碼包即可
- 下載代碼包啟動小程序
- 小程序代碼包里面的代碼，不是小程序的源代碼，而是編譯、壓縮、打包之后的代碼包
小程序提供的運行環(huán)境，分為邏輯層（AppService）和 視圖層（webView），邏輯層是執(zhí)行JAVAscript的地方，視圖層是渲染頁面的地方。當小程序的代碼包下載完畢后，業(yè)務(wù)代碼分別注入邏輯層和渲染層。
優(yōu)化關(guān)鍵點
控制小程序包的大小
- 代碼級優(yōu)化
- 壓縮代碼
- 清理無用的代碼(含注釋掉的代碼、log等)
- 業(yè)務(wù)級優(yōu)化，邏輯復(fù)用，組件復(fù)用
- 圖片優(yōu)化
- 放CDN
- 選用其它靜態(tài)存儲服務(wù)器
- 最其次使用優(yōu)化過大小后的本地圖片
- 采用分包策略
- 分包預(yù)加載
- 獨立分包
異步請求優(yōu)化
- onLoad階段就可發(fā)起請求
- 實時性要求不高的或者非頻繁變動的業(yè)務(wù)數(shù)據(jù)盡量不要在onShow時請求
- 請求結(jié)果放在緩存中、利用時間戳控制有效期，減少更新次數(shù)
- 核心頁面在請求過程中添加骨架屏展示處理
- 細節(jié)體驗處理，及時給予用戶反饋
- 如點擊按鈕后先改變樣式(切換啟停用狀態(tài))，再發(fā)出請求，防止用戶多次請求
提高渲染性能
setData操作優(yōu)化
- 減少setData的數(shù)據(jù)量
- 不影響渲染層的數(shù)據(jù)不用放在setData
- 合并精簡setData
- 避免列表數(shù)據(jù)全局刷新、局部更新單條數(shù)據(jù)
this.setData({
list[index] = newList[index]
})
定時器及時銷毀
- 小程序多個頁面會多開webview，獨立線程運行，當離開頁面存在定時器時需要及時銷毀
謹慎使用onPageScroll(該事件是一次webview層向js邏輯層的通訊，開銷較大)
- 只在必要時監(jiān)聽pageScroll
- onPageScroll中避免執(zhí)行復(fù)雜邏輯，頻繁setData，查詢節(jié)點信息
善用小程序組件
自定義組件更新只在組件內(nèi)部進行，不受頁面其他內(nèi)容影響
- 運營活動的定時模塊可以單獨抽出來，做成一個定時組件，定時組件的更新并不會影響頁面上其他元素的更新；
- 各個組件具有各自獨立的邏輯空間，分別擁有自己的獨立的數(shù)據(jù)、setData調(diào)用
canvas渲染
- 分層繪制到不同canvas
- 不變的部分單獨繪制到一個canvas
- 動態(tài)生成的繪制到一個canvs
前端數(shù)據(jù)過濾
- 前端數(shù)據(jù)過濾及驗證，不規(guī)范的數(shù)據(jù)不必發(fā)送請求增加服務(wù)端壓力
開發(fā)者工具提供的環(huán)境與真機不同，建議真機調(diào)試
服務(wù)端優(yōu)化
硬件升級
- 服務(wù)器負載均衡
- 云數(shù)據(jù)庫多臺主從讀寫分離
- redis緩存
- 小程序靜態(tài)資源使用CDN和OSS文件存儲
分析瓶頸
- 數(shù)據(jù)庫適當索引加持
- 找出導(dǎo)致瓶頸的關(guān)鍵業(yè)務(wù)，如密集計算需求，數(shù)據(jù)庫讀寫
redis緩存
- 寫入數(shù)據(jù)時數(shù)據(jù)庫和redis中都寫入，優(yōu)先查詢redis的數(shù)據(jù)，沒有再從數(shù)據(jù)庫讀取
- 進行接口緩存，直接緩存接口返回的json數(shù)據(jù)，用戶再次查相同的內(nèi)容，直接返回json數(shù)據(jù)
負載均衡
將流量分發(fā)到不同的服務(wù)器上進行處理，減輕對cpu的壓力
服務(wù)端建議嘗試云開發(fā)，有騰訊云的基礎(chǔ)服務(wù)加持也是可以支撐起百萬級訪問的
先總結(jié)這么多，如果您有更多方法，歡迎補充
