ReactNative之FlatList白屏優(yōu)化方案

? ??????FlatList的思路是減少渲染的單元行數(shù)量,它在render時進(jìn)行計算,只渲染屏幕中和緩沖區(qū)內(nèi)的單元行,其余地方使用空白代替,這樣不論FlatList有多少內(nèi)容,實際渲染的單元行數(shù)量基本保持不變。因為有的單元行并沒有渲染,當(dāng)快速滑動到這個區(qū)域時,渲染是異步的,此時就會看到白屏,然后才開始顯示內(nèi)容。

????????優(yōu)化方案:

? ? ? ? (1)首先是單元行組件如果使用PureComponent可以大大減少render的數(shù)量。其次實現(xiàn)props.getItemLayout接口可以避免臨時測量每個單元行的尺寸,大大提高性能,如果能明確每個單元行的尺寸就一定要實現(xiàn)此接口。

????????(2)initialNumToRender屬性默認(rèn)為10,它設(shè)定初始時渲染的單元行數(shù)量,這些單元行會常駐內(nèi)存不被銷毀,目的是為了scrollToTop時沒有白屏。

? ? ? ? (3)maxToRenderPerBatch屬性默認(rèn)為10,它設(shè)定了在計算渲染單元行數(shù)量時每次處理的行數(shù),這個數(shù)值如果太大可能導(dǎo)致渲染的單元行較多,占用內(nèi)存以及增加白屏?xí)r間,如果太小了則會增加setState的次數(shù)

? ? ? ? (4)windowSize屬性指定了屏幕外的區(qū)域渲染多少個屏幕單元(visible length),默認(rèn)是21,它也會影響初始渲染的單元行數(shù)量。假如一個android設(shè)備高度為640,減去20像素的狀態(tài)欄,一個屏幕單元是620,會額外渲染20個。這個數(shù)字如果比較大,則同時渲染的單元格數(shù)量會比較多,也增加了初始化的時間,如果比較小,則會增加出現(xiàn)白屏的幾率。

我由于是動態(tài)高度,所以采取設(shè)置windowSize的大小來減少白屏的出現(xiàn)幾率,經(jīng)測試,設(shè)置為300快速滑動基本不會出現(xiàn)白屏了。

windowSize={300}
最后編輯于
?著作權(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)容