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

?

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

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

高峰期每分鐘1w+在線訪問

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

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

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

小程序端優(yōu)化

提高加載性能

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

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

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

• 下載代碼包啟動小程序

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

?

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

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

控制小程序包的大小

• 代碼級優(yōu)化

  • 壓縮代碼

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

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

• 圖片優(yōu)化

  • 放CDN

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

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

• 采用分包策略

  • 分包預(yù)加載

  • 獨(dú)立分包

異步請求優(yōu)化

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

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

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

• 核心頁面在請求過程中添加骨架屏展示處理

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

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

提高渲染性能

setData操作優(yōu)化

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

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

• 合并精簡setData

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

1. this.setData({

2. list[index] = newList[index]

3. })

定時(shí)器及時(shí)銷毀

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

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

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

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

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

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

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

canvas渲染

• 分層繪制到不同canvas

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

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

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

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

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

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

硬件升級

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

• 云數(shù)據(jù)庫多臺主從讀寫分離

• redis緩存

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

分析瓶頸

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

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

redis緩存

• 寫入數(shù)據(jù)時(shí)數(shù)據(jù)庫和redis中都寫入，優(yōu)先查詢r(jià)edis的數(shù)據(jù)，沒有再從數(shù)據(jù)庫讀取

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

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

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

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

?