前言
本文是就Flutter的數(shù)據(jù)更新形式來(lái)操作方援，然后通過(guò)以觀測(cè)觀測(cè)臺(tái)的狀態(tài)數(shù)據(jù)報(bào)告幅疼，來(lái)完成對(duì)代碼執(zhí)行效率的監(jiān)控背捌，并找到突破口癌刽。
觀測(cè)臺(tái)
不管是Idea還是Android Studio都提供了觀測(cè)臺(tái)的功能力图。
一般我們使用的都是Observatory的timeline部分步绸。
我打開(kāi)的方式一般都是在
terminal中輸入flutter run，如果要使用真機(jī)測(cè)試則輸入flutter run --profile吃媒。成功后會(huì)出現(xiàn)如圖所示的網(wǎng)址瓤介，不過(guò)這個(gè)網(wǎng)址適合在Google瀏覽器中進(jìn)行顯示。
一般在timeline中赘那，我們一般選用Flutter Developer的選項(xiàng)刑桑。出現(xiàn)的渲染顯示我們一般會(huì)看到gpu和ui的渲染，以及重構(gòu)過(guò)程募舟。
性能優(yōu)化
在性能優(yōu)化之前祠斧，我們需要知道Flutter重構(gòu)的邏輯。
在Android中我們知道繪制需要的三個(gè)步驟是 measure拱礁、layout梁肿、draw。
而Flutter對(duì)應(yīng)的是build觅彰、layout吩蔑、paint。
他的重構(gòu)是基于一種標(biāo)臟和重新創(chuàng)建的方式進(jìn)行的填抬，所以我們的性能影響一般來(lái)自于一個(gè)復(fù)雜界面的不斷重建烛芬。可能你只需要修改一個(gè)很小的部分飒责，也就是很小的一個(gè)子樹(shù)需要進(jìn)行修改赘娄，那么在代碼沒(méi)有規(guī)范的情況下，可能會(huì)出現(xiàn)整個(gè)界面的刷新宏蛉，這樣我們的性能可能就要下降了數(shù)倍遣臼。
對(duì)于我的代碼而言，就是整個(gè)界面的代碼都得到了重建的拾并，但是這是基于本身代碼還是簡(jiǎn)單的原因揍堰，如果代碼是非常復(fù)雜的，那會(huì)得到怎樣毀滅性的結(jié)果嗅义，也是可想而知屏歹。
上文的意思用這張圖來(lái)表示，就是本來(lái)我們重構(gòu)的就是實(shí)線叉號(hào)的子樹(shù)之碗，但是因?yàn)榇a的書(shū)寫(xiě)原因蝙眶，導(dǎo)致我們的結(jié)果重構(gòu)的虛線叉號(hào)的整棵樹(shù)。所以代碼的書(shū)寫(xiě)規(guī)范在性能優(yōu)化上起了至關(guān)重要的作用褪那。
代碼測(cè)試
測(cè)試代碼位于包
test:WanAndroid-Flutter
上圖是我測(cè)試的代碼幽纷，黑色圖形中的數(shù)據(jù)是通過(guò)
Timer自動(dòng)更新的式塌。
int _num = 0;
@override
void initState() {
// TODO: implement initState
super.initState();
Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
_num = timer.tick;
});
});
}
在initState()函數(shù)中，我們做了一件事情友浸，就是一個(gè)初始化峰尝，并且這是一個(gè)每1s進(jìn)行一次更新的。
在源碼中尾菇，這個(gè)數(shù)據(jù)更新處于兩種位置：Main頁(yè)面境析、組件化的_buildBottom。
- Main頁(yè)面：在這個(gè)頁(yè)面中派诬，如果重構(gòu)劳淆，就會(huì)發(fā)生我們上述所說(shuō)的情況，把整個(gè)頁(yè)面全部重構(gòu)了默赂。
- 組件化的_buildBottomde：將上述的更新代碼轉(zhuǎn)移到這個(gè)組件中沛鸵，那么重構(gòu)的效果就會(huì)和上述的一樣，當(dāng)然你可以更進(jìn)行細(xì)化缆八。
 性能優(yōu)化前
|
 性能優(yōu)化后
|
|---|
通過(guò)Observatory的觀測(cè)曲掰，我們能夠看到兩種位置進(jìn)行更新，他們重構(gòu)所需要進(jìn)行的步驟是完全不一樣的程度的奈辰，更何況我的頁(yè)面邏輯是處于一個(gè)還算簡(jiǎn)單的狀態(tài)呢栏妖。
以上就是我的學(xué)習(xí)成果，如果有什么我沒(méi)有思考到的地方或是文章內(nèi)存在錯(cuò)誤奖恰，歡迎與我分享吊趾。
相關(guān)文章推薦：
手撕Flutter
