鸿蒙渲染范围控制优化

界面卡顿、掉帧很多时候是渲染范围没控制好。本文基于官方文档把控制 UI 渲染范围的四种优化梳理清楚合理控制元素显示与隐藏、懒加载、组件复用、分帧渲染。一、目标在应用开发中控制 UI 渲染范围防止界面卡顿或掉帧。二、合理控制元素显示与隐藏控制元素显示与隐藏是一种常见场景使用Visibility.None、if条件判断等都能够实现该效果。两种方式的区别方式控制阶段说明if条件判断控制的是组件的创建、布局阶段条件不满足时组件不创建visibility属性控制的是元素在布局阶段是否参与布局渲染组件已创建但可能不参与布局渲染三、懒加载懒加载是一种延迟加载的技术它是在需要的时候才加载数据或资源并在每次迭代过程中创建相应的组件而不是一次性将所有内容都加载出来。缓存数量配置懒加载可以通过设置cachedCount来指定缓存数量除屏幕内显示的 Item 组件外还会预先将屏幕可视区外指定数量的数据缓存。典型场景长列表加载四、组件复用组件复用通过重用已有组件节点减少创建开销显著提升 UI 线程响应速度。适用范围组件复用针对的是自定义组件只要发生了相同自定义组件销毁和再创建的场景都可以使用组件复用。场景场景长列表加载丢帧优化瀑布流加载丢帧优化Swiper 组件加载丢帧优化这些场景会出现大量重复布局的创建使用组件复用可以大幅度降低因频繁创建与销毁组件带来的性能损耗。五、分帧渲染在应用开发中页面内列表结构复杂每个列表项包含的组件较多就会导致嵌套层级较深组件负载加重绘制耗时增长在这种情况下转场或者列表滑动的时候列表项就会一次性加载大量的数据。解决方案采用分帧渲染将本来一帧内加载的数据分成多帧加载。提醒分帧渲染需要开发者计算每帧中加载多少数据操作复杂因此在必要的情况下才推荐使用。说明if和visibility不是一回事if控制组件创建阶段条件不满足组件根本不创建visibility组件已创建控制的是布局阶段是否参与渲染用错方式会引发性能问题比如频繁切换if条件会导致组件反复创建销毁。懒加载的核心是按需不是一次性把所有内容加载出来而是需要时才加载配合cachedCount预缓存屏幕外的数据滑动时更流畅。组件复用针对自定义组件只要出现相同自定义组件销毁再创建的场景就可以用组件复用。长列表、瀑布流、Swiper 是典型场景。组件复用的益处重用已有组件节点减少创建开销直接提升 UI 线程响应速度频繁创建销毁的场景收益尤其明显。懒加载和组件复用经常配合使用长列表场景下懒加载控制加载时机组件复用控制节点复用两者结合效果最好。