直播間頁面優(yōu)化

You have to believe in yourself. That's the secret of success. ---卓別林

好久沒有更新博客了,自己轉(zhuǎn)作直播類應(yīng)用已經(jīng)一年多。接觸了一些應(yīng)用開發(fā)的框架技巧,不記錄,久了就容易忘記,現(xiàn)在重新開始更新博客。

最近發(fā)現(xiàn)我們直播應(yīng)用在進入直播間時,能感受到明顯的卡頓。本篇博文記錄優(yōu)化該問題的過程。

優(yōu)化前

systrace作為分析卡頓問題的利器,本篇記錄的優(yōu)化方法,正是借助它實現(xiàn)的,優(yōu)化前的systrace如下圖。
優(yōu)化前

透過systrace 標(biāo)1的地方可以看到啟動直播間的觀看頁面耗時近乎1s鐘,難怪用戶會感受到卡頓。標(biāo)2跟標(biāo)3的地方都是耗時的大戶,放大systrace文件分別進行排查。

幀動畫資源過大

標(biāo)2放大圖

透過放大后的標(biāo)2處,發(fā)現(xiàn)一個combo_anim.xml 資源文件竟然耗時60ms,打開該文件如下:


combo_anim

這個幀動畫是為了播放直播間小禮物而存在的,由于是通過數(shù)十張圖片組合而成的,難怪加載耗時那么久,在接著排查,發(fā)現(xiàn)了好幾處類似的資源,這些都是需要優(yōu)化的地方。禮物相關(guān)的資源文件在剛進入直播間是沒有必要加載的,因此這里通過ViewStub控件讓禮物相關(guān)的布局實現(xiàn)惰性加載。

加載了不必要的webview

在接著看標(biāo)3的地方


在這里插入圖片描述

這里WebViewChromium初始化占據(jù)了大部分時間,WebView是為了加載游戲直播房間內(nèi)的網(wǎng)頁游戲而生的,進入直播間加載也不需要,可以通過判斷是否是游戲房間在決定是否初始化webview來進行優(yōu)化。

按需加載語音業(yè)務(wù)模塊

再繼續(xù)看有一塊audiolive相關(guān)的view也在進入房間時被初始化了。


在這里插入圖片描述

通過判斷是否是語言房間來決定是否加載該塊view。

優(yōu)化后效果

最后看下優(yōu)化后的效果,從900ms優(yōu)化到了300ms。


優(yōu)化后

在優(yōu)化的過程中,透過systrace文件還是比較容易發(fā)現(xiàn)卡頓的癥結(jié)在哪,但在修改的過程中,要注意可能導(dǎo)致的風(fēng)險。任何修改舊業(yè)務(wù)的代碼都可能會導(dǎo)致新的問題,如果引起了新的問題,那優(yōu)化工作就得不償失了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容