關(guān)于微信小程序性能優(yōu)化的一些方法，和大家分享一波~

 

    01

 

    控制代碼包大小

 

    1.開(kāi)啟開(kāi)發(fā)者工具中的“上傳代碼時(shí)自動(dòng)壓縮”

 

    2.及時(shí)清理無(wú)用代碼和資源文件

 

    3.減少代碼包中的資源文件大小和數量

 

    4.將資源文件放在CDN中

 

    5.提取公共樣式和公共組件

 

    6.代碼和圖片壓縮

 

    02

 

    分包加載

 

    1.將小程序中不常用的頁(yè)面放在多個(gè)分包內，主包只保留最常用的核心頁(yè)面。

 

    如啟動(dòng)頁(yè)和tabBar頁(yè)面，以及分包都需要用的公共資源腳本。

 

    2.啟動(dòng)時(shí)只加載主包，使用時(shí)按需下載分包。

 

    3.分包預加載——開(kāi)發(fā)者預先配置頁(yè)面可能會(huì )跳轉到的分包，框架在進(jìn)入頁(yè)面后根據配置進(jìn)行預加載。

 

    03

 

    運行機制優(yōu)化

 

    1.減少立即執行的代碼數量

 

    2.避免高開(kāi)銷(xiāo)和長(cháng)時(shí)間阻塞代碼

 

    3.頁(yè)面代碼都寫(xiě)入頁(yè)面的生命周期中

 

    4.做好緩存策略

 

    04

 

    數據管理優(yōu)化

 

    首屏請求數量盡量少于5個(gè)，超過(guò)的可以做接口合并，對多次提交的數據可以做合并處理

 

    05

 

    首屏加載優(yōu)化

 

    1.提前請求：異步數據請求不需要等待頁(yè)面渲染完成

 

    2.利用緩存：利用storageAPI對異步請求數據進(jìn)行緩存。二次啟動(dòng)時(shí)先利用緩存數據渲染頁(yè)面，再進(jìn)行后臺靜默更新。

 

    3.避免白屏：先展示頁(yè)面骨架和基礎內容。

 

    4.及時(shí)反饋：即時(shí)地對需要用戶(hù)等待的交互操作給出反饋，避免用戶(hù)以為小程序無(wú)響應。如點(diǎn)贊，先改變按鈕樣式，再發(fā)送異步請求。

 

    06

 

    渲染性能優(yōu)化

 

    1.避免不當使用setData

 

    setData是邏輯層向渲染層的通訊，這個(gè)通信不是直接給webview，而是通過(guò)走了native層。在數據傳輸時(shí)，邏輯層會(huì )執行一次JSON.stringify來(lái)去除掉setData數據中不可傳輸的部分，之后將數據發(fā)送給視圖層。

 

    同時(shí)，邏輯層還會(huì )將setData所設置的數據字段與data合并，使開(kāi)發(fā)者可以用this.data讀取到變更后的數據。

 

    （1）使用data在方法間共享數據，data應只包含與頁(yè)面渲染相關(guān)的數據。

 

    （2）只傳輸頁(yè)面中發(fā)生變化的數據，使用setData的特殊key實(shí)現局部更新

 

    （3）短時(shí)間內頻繁調用setData

 

    （4）對連續的setData調用進(jìn)行合并

 

    （5）后臺頁(yè)面進(jìn)行setData，搶占前臺頁(yè)面的渲染資源——頁(yè)面切入后臺的setData調用，延遲到頁(yè)面重新展示時(shí)執行

 

    （6）頁(yè)面列表：使用懶加載+動(dòng)態(tài)移除非可視區域范圍內的內容。

 

    （7）耗時(shí)較長(cháng)的js做到異步

 

    2.避免不當使用onPsgeScroll

 

    （1）只在必要時(shí)監聽(tīng)pageScroll事件

 

    （2）避免在onPageScroll中執行復雜邏輯

 

    （3）避免在onPageScroll中頻繁調用setData

 

    （4）避免頻繁查詢(xún)節點(diǎn)信息(SelectQuery)，部分場(chǎng)景建議使用節點(diǎn)布局相交狀態(tài)監聽(tīng)(IntersetctionObserver)替代

 

    3.使用自定義組件

 

    4.canvas渲染

 

    （1）分層繪制到不同canvas

 

    （2）不變的部分單獨繪制到一個(gè)canvas，動(dòng)態(tài)生成的繪制到一個(gè)canvas，最后合入一個(gè)canvas

 

    5.獲取節點(diǎn)位置，用intersectionObject

 

    08

 

    建議

 

    1.使用真機調試

 

    2.開(kāi)發(fā)工具在network里看不到圖片資源的加載。要看圖片懶加載，要設置微信開(kāi)發(fā)工具的代理到127.0.0.1，通過(guò)charles抓包看到

 

    3.改造setData，記錄性能優(yōu)化的提升

 

    this._startTime=newDate().getTime();letfn=this.setData;this.setData=(obj={},handle='')=>{letnow=newDate().getTime();//上報渲染所需要的時(shí)間log(now-this._startTime)fn.apply(this,[obj,handle]);};

 

    用這些方法，我的小程序瘦了很多。你也可以試試~