微信小程序優(yōu)化技巧總結(jié)
2021-07-26 10:33:04

?

>>>>?借負(fù)責(zé)的小程序流量暴增事件總結(jié)下優(yōu)化技巧

之前負(fù)責(zé)的錫慧在線小程序是一款公益性質(zhì)在線教育類(lèi)小程序，因疫情影響導(dǎo)致流量暴增，日訪問(wèn)過(guò)百萬(wàn)

高峰期每分鐘1w+在線訪問(wèn)

視頻播放卡頓嚴(yán)重，使用體驗(yàn)很差。
博主已是離職狀態(tài)，但是公司內(nèi)并沒(méi)有找到可以接手的同學(xué)，小程序前端是我從零一手做出來(lái)的，有點(diǎn)特殊情感，于是就以小程序顧問(wèn)的身份幫忙處理了小程序端的工作。

應(yīng)對(duì)本次問(wèn)題，視頻卡頓是選擇把視頻課件資源從文件服務(wù)器上遷移至騰訊云存儲(chǔ)，現(xiàn)已經(jīng)修復(fù)發(fā)版完畢

在此總結(jié)下小程序優(yōu)化相關(guān)知識(shí)。

小程序端優(yōu)化

提高加載性能

小程序呈現(xiàn)到用戶面前，實(shí)際上經(jīng)歷了下面兩個(gè)階段：

• 運(yùn)行環(huán)境的預(yù)加載

  • 微信會(huì)在用戶打開(kāi)小程序之前就已經(jīng)準(zhǔn)備好環(huán)境，用戶點(diǎn)擊小程序入口后，直接下載小程序的代碼包即可

• 下載代碼包啟動(dòng)小程序

  • 小程序代碼包里面的代碼，不是小程序的源代碼，而是編譯、壓縮、打包之后的代碼包

?

小程序提供的運(yùn)行環(huán)境，分為邏輯層（AppService）和 視圖層（webView），邏輯層是執(zhí)行javascript的地方，視圖層是渲染頁(yè)面的地方。當(dāng)小程序的代碼包下載完畢后，業(yè)務(wù)代碼分別注入邏輯層和渲染層。

優(yōu)化關(guān)鍵點(diǎn)

控制小程序包的大小

• 代碼級(jí)優(yōu)化

  • 壓縮代碼

  • 清理無(wú)用的代碼(含注釋掉的代碼、log等)

  • 業(yè)務(wù)級(jí)優(yōu)化，邏輯復(fù)用，組件復(fù)用

• 圖片優(yōu)化

  • 放CDN

  • 選用其它靜態(tài)存儲(chǔ)服務(wù)器

  • 最其次使用優(yōu)化過(guò)大小后的本地圖片

• 采用分包策略

  • 分包預(yù)加載

  • 獨(dú)立分包

異步請(qǐng)求優(yōu)化

• onLoad階段就可發(fā)起請(qǐng)求

• 實(shí)時(shí)性要求不高的或者非頻繁變動(dòng)的業(yè)務(wù)數(shù)據(jù)盡量不要在onShow時(shí)請(qǐng)求

• 請(qǐng)求結(jié)果放在緩存中、利用時(shí)間戳控制有效期，減少更新次數(shù)

• 核心頁(yè)面在請(qǐng)求過(guò)程中添加骨架屏展示處理

• 細(xì)節(jié)體驗(yàn)處理，及時(shí)給予用戶反饋

  • 如點(diǎn)擊按鈕后先改變樣式(切換啟停用狀態(tài))，再發(fā)出請(qǐng)求，防止用戶多次請(qǐng)求

提高渲染性能

setData操作優(yōu)化

• 減少setData的數(shù)據(jù)量

• 不影響渲染層的數(shù)據(jù)不用放在setData

• 合并精簡(jiǎn)setData

• 避免列表數(shù)據(jù)全局刷新、局部更新單條數(shù)據(jù)

1. this.setData({

2. list[index] = newList[index]

3. })

定時(shí)器及時(shí)銷(xiāo)毀

• 小程序多個(gè)頁(yè)面會(huì)多開(kāi)webview，獨(dú)立線程運(yùn)行，當(dāng)離開(kāi)頁(yè)面存在定時(shí)器時(shí)需要及時(shí)銷(xiāo)毀

謹(jǐn)慎使用onPageScroll(該事件是一次webview層向js邏輯層的通訊，開(kāi)銷(xiāo)較大)

• 只在必要時(shí)監(jiān)聽(tīng)pageScroll

• onPageScroll中避免執(zhí)行復(fù)雜邏輯，頻繁setData，查詢節(jié)點(diǎn)信息

善用小程序組件
自定義組件更新只在組件內(nèi)部進(jìn)行，不受頁(yè)面其他內(nèi)容影響

• 運(yùn)營(yíng)活動(dòng)的定時(shí)模塊可以單獨(dú)抽出來(lái)，做成一個(gè)定時(shí)組件，定時(shí)組件的更新并不會(huì)影響頁(yè)面上其他元素的更新；

• 各個(gè)組件具有各自獨(dú)立的邏輯空間，分別擁有自己的獨(dú)立的數(shù)據(jù)、setData調(diào)用

canvas渲染

• 分層繪制到不同canvas

• 不變的部分單獨(dú)繪制到一個(gè)canvas

• 動(dòng)態(tài)生成的繪制到一個(gè)canvs

前端數(shù)據(jù)過(guò)濾

• 前端數(shù)據(jù)過(guò)濾及驗(yàn)證，不規(guī)范的數(shù)據(jù)不必發(fā)送請(qǐng)求增加服務(wù)端壓力

開(kāi)發(fā)者工具提供的環(huán)境與真機(jī)不同，建議真機(jī)調(diào)試

服務(wù)端優(yōu)化

硬件升級(jí)

• 服務(wù)器負(fù)載均衡

• 云數(shù)據(jù)庫(kù)多臺(tái)主從讀寫(xiě)分離

• redis緩存

• 小程序靜態(tài)資源使用CDN和OSS文件存儲(chǔ)

分析瓶頸

• 數(shù)據(jù)庫(kù)適當(dāng)索引加持

• 找出導(dǎo)致瓶頸的關(guān)鍵業(yè)務(wù)，如密集計(jì)算需求，數(shù)據(jù)庫(kù)讀寫(xiě)

redis緩存

• 寫(xiě)入數(shù)據(jù)時(shí)數(shù)據(jù)庫(kù)和redis中都寫(xiě)入，優(yōu)先查詢r(jià)edis的數(shù)據(jù)，沒(méi)有再?gòu)臄?shù)據(jù)庫(kù)讀取

• 進(jìn)行接口緩存，直接緩存接口返回的json數(shù)據(jù)，用戶再次查相同的內(nèi)容，直接返回json數(shù)據(jù)

負(fù)載均衡
將流量分發(fā)到不同的服務(wù)器上進(jìn)行處理，減輕對(duì)cpu的壓力

服務(wù)端建議嘗試云開(kāi)發(fā)，有騰訊云的基礎(chǔ)服務(wù)加持也是可以支撐起百萬(wàn)級(jí)訪問(wèn)的

先總結(jié)這么多，如果您有更多方法，歡迎補(bǔ)充????

?