藉助友盟+U-APM找出uniapp移動端崩潰的問題

效能優化實踐者發表於2021-11-17

專案背景:

本案例是為我校訂製的智慧校園APP,由於我校並沒有官方的校園APP所以導致學生需要頻繁登陸教務系統網站,且因本校教務系統網站對移動端的相容不是很完善,所以導致部分資訊無法清晰檢視,基於此,本專案應運而生。在開發工具方面,選擇了使用uniapp,uniapp是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套程式碼,可釋出到iOS、Android、Web(響應式)、以及各種小程式(微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶)、快應用等多個平臺。這能為我們大幅度減少開發時間,提高開發效率。

(部分資訊顯示不全)

挑戰:

為迎合智慧校園這一概念,我們在APP主頁引入了,校園新聞這一板塊,在主頁載入時,就會通過uniapp自帶的請求函式獲取最新校園資訊,但在此過程中,我們發現,應用會出現異常的卡頓,甚至崩潰。

解決方案:

起初我們認為是後端傳送的資料過多導致的(最初後端一次返回25條新聞資訊),後將規模變小,一次返回15條資料,情況有所好轉,但任然會出現略微卡頓,為了找到問題的所在我們使用了友盟在uniapp官方外掛市場投放的“友盟+ U-APM 應用效能監控”經過大量觀察頁面渲染資料,我們發現應用在冷啟動和首次啟動階段存在較大的延時,並即使獲取到了後端反饋的資料,前端仍需要幾秒鐘的渲染時間,這就很有意思了,在合理的網路環境下,一段不過20k的資料不應該需要這麼長的時間來渲染,所以我們開始將目標由最開始的資料量轉移到了元件上,uniapp存在vue和nvue兩種頁面方式,其中vue是基於webview的渲染方式,而nvue則是原生渲染,這次我們使用了uniapp的原生元件list這是一種在不可見部分的渲染資源回收有特殊處理,在實測中他的效能遠優於傳統的scroll-view,在使用list元件過後,發現卡頓感明顯消失,通過對比友盟資料,效能提升量相當可觀。

總結:

通過本案列,我們第一次接觸到了“友盟+ U-APM 應用效能監控”,根據他給與的資料,我們從原有的資料量角度,轉移到了,原生元件的渲染問題,他為我們提供了一種尋找問題的捷徑,讓我們面對問題,不再迷茫,不再困惑。

相關文章