HarmonyOS鸿蒙Next页面性能内存优化

HarmonyOS鸿蒙Next页面性能内存优化 一、页面性能内存优化

页面性能优化，主要在少嵌套，减少动态渲染的频率。在进行页面布局开发时，应该去除冗余的布局嵌套；扁平化减少中间嵌套的层级；另外还需要结合开发场景使用一些高性能的高级组件构建复杂布局，例如Flex、Grid、WaterFlow、RelativeContainer、绝对布局、自定义布局等，达到优化页面性能，减少页面内存，提高页面性能的效果。

1、精简节点数：

• 移除冗余节点，

  • 比如有些效果，使用一个节点可以实现的，不要用多个节点
  • 例如：一断文字，有间隔，完全可以使用一个Text，中间添加一些空格

• 扁平化减少中间的嵌套层级，使总的组件节点数减少。

  • 使用更高级的布局使得页面变得更加扁平化

例如：RelativeContainer：通过相对布局实现扁平化，不用Row嵌套Column，多层嵌套

2、使用一些高性能的组件构建复杂布局

• 使用row/column+layoutweight代替flex容器使用，由于Flex本身会带来的二次布局而影响性能

二次布局：在单行布局场景下，容器里子组件的主轴尺寸长度总和可能存在不等于容器主轴尺寸长度的情况。例如，三个子组件的宽均为200px，容器宽为500px，当第一个子组件和第二个子组件布局完成后，为了显示第三个子组件，需要给第二个子组件和第三个子组件设置压缩属性flexShrink，此时第二个子组件会被再布局一次，导致布局效率下降。

• scroll嵌套list/grid容器时，要设置容器的宽高：

在使用Scroll容器组件嵌套List组件加载长列表时，若不指定List的宽高尺寸，则默认全部加载。Scroll嵌套List时:List没有设置宽高，会布局List的所有子组件，List设置宽高，会布局List显示区域内的子组件。List使用ForEach加载子组件时，无论是否设置List的宽高，都会加载所有子组件。List使用LazyForEach加载子组件时，没有设置List的宽高，会加载所有子组件，设置了List的宽高，会加载List显示区域内的子组件

• 数组数据渲染尽量使用lazyforeach渲染item

• 组件的显隐设置，要使用if语句来判断，避免使用visibility：

开发者在使用visibility通用属性控制组件的显隐状态时，仍存在组件的重新创建过程，造成性能上的损耗。要避免这一问题，可使用if条件渲染代替visibility属性变换

• list/grid容器要根据具体场景来使用cachecount，避免卡顿：

应用通过增大List/Grid控件的cachedCount参数，调整Ul的加载范围。cachedCount表示屏幕外List/Grid预加载item的个数。如果需要请求网络图片，可以在item滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。cachedCount的增加会增大Ul的cpu、内存开销，使用时需要根据实际情况，综合性能和用户体验进行调整。

• 补充：什么是LazyForeach(懒加载)?

LazyForEach懒加载从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用时，框架会根据滚动容器可视区域按需创建组件，当组件划出可视区域外时，框架会进行组件销毁回收以降低内存占用。LazyForEach提供列表数据按需加载能力，解决一次性加载长列表数据耗时长、占用过多资源的问题，可以提升页面响应速度。