日韩国产精品99成人不卡在线无毒|狠狠躁夜夜爽一级二级精品|亚洲日日噜噜孕妇中文字幕|日韩久草中文三级片

新聞動(dòng)態(tài)

提高微信小程序的應(yīng)用速度的手段有哪些

常見問(wèn)題 發(fā)布者:ou3377 2021-12-17 09:12 訪問(wèn)量:203

圖片

一、是什么

小程序啟動(dòng)會(huì)常常遇到如下圖場(chǎng)景:

圖片

這是因?yàn)?,小程序首次啟?dòng)前,微信會(huì)在小程序啟動(dòng)前為小程序準(zhǔn)備好通用的運(yùn)行環(huán)境,如運(yùn)行中的線程和一些基礎(chǔ)庫(kù)的初始化

然后才開始進(jìn)入啟動(dòng)狀態(tài),展示一個(gè)固定的啟動(dòng)界面,界面內(nèi)包含小程序的圖標(biāo)、名稱和加載提示圖標(biāo)。此時(shí),微信會(huì)在背后完成幾項(xiàng)工作:

  • 下載小程序代碼包
  • 加載小程序代碼包
  • 初始化小程序首頁(yè)

下載到的小程序代碼包不是小程序的源代碼,而是編譯、壓縮、打包之后的代碼包

整體流程如下圖:

圖片

二、手段

圍繞上圖小程序的啟動(dòng)流程, 我們可以從加載、渲染兩個(gè)緯度進(jìn)行切入:

加載

提升體驗(yàn)最直接的方法是控制小程序包的大小,常見手段有如下:

  • 代碼包的體積壓縮可以通過(guò)勾選開發(fā)者工具中“上傳代碼時(shí),壓縮代碼”選項(xiàng)

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

  • 減少資源包中的圖片等資源的數(shù)量和大?。ɡ碚撋铣诵con,其他圖片資源從網(wǎng)絡(luò)下載),圖片資源壓縮率有限

并且可以采取分包加載的操作,將用戶訪問(wèn)率高的頁(yè)面放在主包里,將訪問(wèn)率低的頁(yè)面放入子包里,按需加載

當(dāng)用戶點(diǎn)擊到子包的目錄時(shí),還是有一個(gè)代碼包下載的過(guò)程,這會(huì)感覺到明顯的卡頓,所以子包也不建議拆的太大,當(dāng)然我們可以采用子包預(yù)加載技術(shù),并不需要等到用戶點(diǎn)擊到子包頁(yè)面后在下載子包

圖片

渲染

關(guān)于微信小程序首屏渲染優(yōu)化的手段如下:

  • 請(qǐng)求可以在頁(yè)面onLoad就加載,不需要等頁(yè)面ready后在異步請(qǐng)求數(shù)據(jù)
  • 盡量減少不必要的https請(qǐng)求,可使用 getStorageSync() 及 setStorageSync() 方法將數(shù)據(jù)存儲(chǔ)在本地
  • 可以在前置頁(yè)面將一些有用的字段帶到當(dāng)前頁(yè),進(jìn)行首次渲染(列表頁(yè)的某些數(shù)據(jù)--> 詳情頁(yè)),沒有數(shù)據(jù)的模塊可以進(jìn)行骨架屏的占位

在微信小程序中,提高頁(yè)面的多次渲染效率主要在于正確使用setData

  • 不要過(guò)于頻繁調(diào)用setData,應(yīng)考慮將多次setData合并成一次setData調(diào)用
  • 數(shù)據(jù)通信的性能與數(shù)據(jù)量正相關(guān),因而如果有一些數(shù)據(jù)字段不在界面中展示且數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜或包含長(zhǎng)字符串,則不應(yīng)使用setData來(lái)設(shè)置這些數(shù)據(jù)
  • 與界面渲染無(wú)關(guān)的數(shù)據(jù)最好不要設(shè)置在data中,可以考慮設(shè)置在page對(duì)象的其他字段下

除此之外,對(duì)于一些獨(dú)立的模塊我們盡可能抽離出來(lái),這是因?yàn)樽远x組件的更新并不會(huì)影響頁(yè)面上其他元素的更新

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

三、總結(jié)

「小程序啟動(dòng)加載性能」

  • 控制代碼包的大小
  • 分包加載
  • 首屏體驗(yàn)(預(yù)請(qǐng)求,利用緩存,避免白屏,及時(shí)反饋

「小程序渲染性能」

  • 避免不當(dāng)?shù)氖褂胹etData
  • 使用自定義組件



關(guān)鍵字: 微信小程序

文章連接: http://www.hsjyfc.com.cn/cjwt/830.html

版權(quán)聲明:文章由 晨展科技 整理收集,來(lái)源于互聯(lián)網(wǎng)或者用戶投稿,如有侵權(quán),請(qǐng)聯(lián)系我們,我們會(huì)立即刪除。如轉(zhuǎn)載請(qǐng)保留