介绍
本示例是合理处理高负载组件的渲染文章的示例代码,主要讲解如何通过DisplaySync优化高负载组件的渲染,减少丢帧情况的发生。
效果图预览
使用说明
- 通过组件复用,加载10年的日历数据,每个复用组件都在aboutToReuse接口中加载一个月的数据。
- 通过DisplaySync的帧回调接口,在组件复用时将一个月的数据拆成多份,并在每一帧中加载其中一份数据,减少每一帧绘制的组件数量,减少丢帧现象的发生。
实现思路
普通数据加载。
1.计算未来10年的日历数据(包括农历日期),放入数组中待用。
initCalenderData() {
hiTraceMeter.startTrace('push_data_direct', 1);
for (let k = this.currentYear; k < 2035; k++) {
...
}
hiTraceMeter.finishTrace('push_data_direct', 1);
}
2.通过List组件,在组件复用的aboutToReuse接口中直接加载数据
...
List() {
LazyForEach(this.contentData, (monthItem: Month) => {
ListItem() {
ItemView({
monthItem: monthItem,
currentMonth: this.cur