用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 資訊/觀點 查看內容

小程序開發指南之性能優化

Rolan 2019-12-5 00:24

作者:HerryLo將從代碼層面和項目層面,聊一聊微信小程序的性能優化問題,希望有所幫助。也是自己最近的一個總結。(前置知識:微信小程序的視圖層是WebView支持,邏輯層是JSCore支持,邏輯層通過setData與視圖層發生 ...

作者:HerryLo

將從代碼層面項目層面,聊一聊微信小程序的性能優化問題,希望有所幫助。也是自己最近的一個總結。(前置知識:微信小程序的視圖層是WebView支持,邏輯層是JSCore支持,邏輯層通過setData與視圖層發生交互。每一個頁面都是一個WebView頁面)

詳見:小程序的運行環境

下面的內容不論是使用Taro框架開發,還是微信小程序原生開發,都是適用的。

#代碼層面

通過代碼細節提升性能,而且在這方面,空間是非常大的。對于比較早期的小程序項目,由于代碼細節方面沒有過多的考慮,也導致了開發出的小程序非常的消耗性能。下面將提到的一些點,不論是正在開發的項目,還是在維護的項目,都會有一定的幫助。

· 拆分組件

對于小程序的項目,由于野蠻式開發,不會太多的考慮組件拆分。當然對于關注組件開發的公司,肯定會在早期就做好一定的規劃。做好組件的拆分,可以保證組件的復用,大量的減少重復的代碼。(組件開發的思想,目前基本適用所有的前端開發項目)。如何有效拆分組件方法,詳見[譯] 你是如何拆分組件的?

· 圖片壓縮

在微信小程序項目中,不會在本地存放圖片,基本都是網絡圖片,而網絡圖片的下載,需要消耗一定的時間和內存。較小圖片的大小,可以提升小程序的渲染時間,減少內存的占用。通過CDN靜態資源服務器獲取圖片資源,添加圖片壓縮規則,可以極大的提升性能。

· 減少不必要數據

減少data中的亢余數據。不必要數據,傳入setData會造成不必要的性能消耗。建議:不要直接將接口數據全部保存在data中,只有頁面需要渲染的 數據,才通過setData進行掛載,非必要的數據可以直接掛載在當前頁面page的this上。

let data = {
    list: [item, item, item, item, item],
    title: "xxxx",
    path: 'xx/xx/xx'
}
復制代碼
// 不好的處理
this.setData({
    data: data
})

// 好的處理 只掛載必要參數
this.setData({
    dataList: data.list
})
this.title = data.title
this.path = data.path
復制代碼

· 避免頻繁setData

// 不好的處理
this.setData({
    count: 1
})
this.setData({
    count: 2
})
this.setData({
    count: 3
})
復制代碼

三次setData會被全部觸發嘛?是的,會被全部調用

在微信小程序中,并不像react,把多次操作合并。每次setData的過程,就是一次JSCore邏輯層 和 webView視圖層的交互。過多的交互,會降低小程序的用戶體驗。例如 滑動監聽滾動,操作setData,非常的消耗性能,可以考慮使用節流函數,降低調用頻率。

官方給出的說法是:setData接口的調用涉及邏輯層與渲染層間的線程通信,通信過于頻繁可能導致處理隊列阻塞,界面渲染不及時而導致卡頓,應避免無用的頻繁調用。來修改一下上面的代碼。

// 好的處理
let data = { count: 1 }
data.count = 2;
data.count = 3;
this.setData(data)
復制代碼

· webView組件開發

靈活性非常強的頁面,同時需要多端使用,建議使用微信小程序提供的webView組件,套用h5頁面進行頁面開發,避免重復開發。當微信小程序包過大之后,也建議使用h5頁面替換開發。詳見webView 組件

<web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/>
復制代碼

#項目層面

通過微信小程序項目配置來提升加載性能,下面的方案可以有效的解決問題,不過也要試情況而定。

· 拆分小程序

在包過大的情況下下,可以進行小程序包的拆分,詳見:分包加載。對小程序進行分包,可以優化小程序首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。如果業務龐大,也可以單獨抽離一個新的小程序。

· 分包預加載

采用分包配置之后,分包加載也是需要時間的。對于一些比較常用,或者比較重要的頁面,可以采取分包預加載的手段,來完成分包的提前下載,減小分包載入的時間

詳見 分包預下載

· 盡量升級版本庫

注意基礎版本庫的問題,在合適的前提下升級版本庫,盡量將版本庫升級為最新版本。因為版本庫升級為最新,可以有效避免很多問題。

吐槽:目前隨著各大公司業務的不斷迭代,小程序的體積不斷真大,小程序漸漸的不在小。希望盡量的小程序小起來,發揮它小的作用。希望以上內容可以幫到你。

更多內容:

'小程序個人開發指南

ps: 微信公眾號:Yopai,有興趣的可以關注,每周不定期更新,分享可以增加世界的快樂

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: HerryLo 來自: 掘金
便民服務

400-8826-226

電話服務熱線時間:9:00 - 21:00

關注我們

微信公眾號

必中分分彩在线计划 河北快三 江西多乐彩开奖结果查询... 单机打麻将免费 3分PK10app下载 郑州沐足沙发订做 选股票软件 国际棋牌游戏平台 体彩p5号码预测软件 北京pk105码5期全天不挂公式 小米股票代码 大圣捕鱼 4399四人单机麻将 北京快三多少号啊 华东十五选五预测号码 南京麻将的技巧高手 幸运28预测软件手机版