百度智能小程序框架 性能優(yōu)化建議

代碼包的優(yōu)化

優(yōu)化大小

對于開發(fā)者來說，為了實現(xiàn)更加豐富的功能，所以有時會忽略對代碼包大小的優(yōu)化，但對于用戶設(shè)備來說，需要把智能小程序所使用的代碼包下載到本地空間。所以代碼包的大小會影響著用戶所需的下載流量以及空間占用。另外，代碼包的下載速度也會直接影響著用戶的首次打開智能小程序的體驗。

智能小程序的打包過程會把用戶工程下所有的文件都進(jìn)行打包，生成最終的用戶包，所以，應(yīng)該在實際開發(fā)用戶包的過程中，實現(xiàn)業(yè)務(wù)邏輯的同時盡量去除冗余，提高復(fù)用性，及時清理不再使用的庫文件和資源，來減少代碼包的大小。

使用分包

可以合理的使用智能小程序的分包策略。按功能聚合、業(yè)務(wù)代碼的使用頻度等指標(biāo)來進(jìn)行代碼包的拆分，當(dāng)用戶訪問到不同包內(nèi)的頁面時，客戶端再分別加載對應(yīng)的分包。這樣既能夠減少智能小程序首次加載時的使用流量，也能夠提升智能小程序首次加載時的速度。

圖片資源優(yōu)化

當(dāng)使用大圖片或者是長列表圖片時，可能會導(dǎo)致客戶端的內(nèi)存占用上升，當(dāng)占用量達(dá)到一定指標(biāo)時，會觸發(fā)客戶端銷毀智能小程序的機制。另外，大圖片也可能會造成客戶端的卡頓，所以建議開發(fā)者盡量減少使用大圖片的資源。

合理的使用 setData

setData 是用戶開發(fā)中經(jīng)常使用的接口，對于手機百度智能小程序而言，使用不當(dāng)也是極易引起性能問題的接口。為了使大家更好的理解 setData 的錯誤用法，首先先介紹一下其背后的工作原理。

setData 的工作原理

智能小程序的邏輯層與視圖層分屬于不同的運行環(huán)境，相互之間不具備直接數(shù)據(jù)共享通道，他們之間的數(shù)據(jù)傳遞是通過客戶端的消息事件派發(fā)來實現(xiàn)，所以到達(dá)視圖層的 object 對象并非原指針，而是數(shù)據(jù)的復(fù)制版本。兩者數(shù)據(jù)也并非完全同步，而是在數(shù)據(jù)未到達(dá)視圖層之前，邏輯層的數(shù)據(jù)會領(lǐng)先于視圖層。

智能小程序的視圖層使用了 san 框架，相對于其他類似 react 等 mvvm 框架來通過 virtual dom diff 來實現(xiàn)組件的渲染來說，san 框架是基于 data 的 diff 來進(jìn)行的組件重新渲染，減少了內(nèi)存的使用率與計算量，保證視圖更新的高效性。所以智能小程序的視圖層對于數(shù)據(jù)的變更更加敏感，感受到數(shù)據(jù)變更時則會直接觸發(fā)組件的重渲染。

常見不合理的使用 case

下面列舉在開發(fā)者開發(fā)的過程中會常見的使用 setData 不當(dāng)?shù)膱鼍啊?/p>

1. setData 數(shù)據(jù)粒度劃分不夠

常見場景：開發(fā)者僅改變對象中某個屬性的值，setData 的數(shù)據(jù)卻是整個對象例如：假設(shè) person 的模型為

{
	name:'swan',
	age:'20',
	sex:'man',
	getName:fn,
	……
}

let person = this.getData('person');
person.age = 30;
this.setData('person',person);

正確寫法：

this.setData('person.age',30);

此時，若邏輯層直接向視圖層傳遞更新整個 person ，那么首先傳輸?shù)臄?shù)據(jù)量會成倍增長，其次，視圖層中所有使用了 person 中任何屬性的組件均重新渲染。好在邏輯層對于此處進(jìn)行了優(yōu)化，在邏輯層先進(jìn)行數(shù)據(jù)對比，自動將 setData(‘person’,person) 補全為 setData(‘person.age’,30)。但上述寫法也依舊使邏輯層增加處理過程，并且對于特殊的數(shù)據(jù)類型，如 array ，邏輯層的 diff 比較無法精準(zhǔn)到具體 key 。例如：假設(shè) numbers 模型為 [1,2,3,4,5]錯誤寫法：

let numbers = this.getData('numbers');
numbers.unshift();
this.setData('numbers',numbers);

正確寫法：

this.unshiftData(array);

所以在開發(fā)過程中，開發(fā)者應(yīng)正確劃分 setData 的數(shù)據(jù)粒度，以優(yōu)化程序性能。

2. 頻繁的 setData

原因同上，頻繁的 setData，常見場景如 setInterval ，或其他循環(huán)執(zhí)行。上述操作邏輯層每次均會通過客戶端傳遞數(shù)據(jù)到視圖層，消耗用戶的網(wǎng)絡(luò)流量與增加傳輸次數(shù)。并且，視圖層也會頻繁的重渲染組件，造成用戶視覺卡頓等不好的體驗。

3. 智能小程序頁面不可見后進(jìn)行 setData

在頁面進(jìn)入到后臺狀態(tài)時，程序后臺的 setData 會占用前臺頁面的執(zhí)行資源，且后臺頁面的渲染對用戶并不可見，導(dǎo)致資源浪費·。所以在頁面隱藏時，不應(yīng)該繼續(xù)進(jìn)行 setData 。