HarmonyOS NEXT应用元服务布局优化ArkUI框架执行流程
一、ArkUI框架执行流程
在使用ArkUI开发中,我们通过布局组件和基础组件进行界面描述,这些描述会呈现出一个组件树的结构,基础组件在其中为叶子结点,布局组件则是中间节点,可以把这棵树称之为应用组件树。当用户执行交互(滑动,点击等行为)时会触发界面修改,界面的修改本质上是通过触发这棵组件树的重新渲染,来实现应用界面更新的过程。
应用界面更新的过程主要分为两个过程:数据处理过程和UI更新过程。
1、数据处理过程中主要是对状态数据进行更新,状态数据指得是所定义的@State等相关的数据。数据变化时,会有一定的更新耗时,并且数据关联的组件数量,也影响下一步UI更新的耗时,在开发过程中需要避免无效的数据更新,从而减少冗余的UI更新耗时。关于这部分的优化措施可以参考《状态管理最佳实践》。
2、UI更新过程中则是对需要更新的元素进行更新操作,对应的元素会经历Build、Measure、Layout和Render等阶段。其中Build是执行组件创建和组件标脏(即标记需要更新的组件,当组件的属性状态发生变化时,框架会将其标记为"脏"状态,表示需要进行重新构建)的过程,Measure是对组件的宽高进行测量的阶段,Layout是对元素进行在屏幕上位置进行摆放的阶段,而Render则是根据测量和布局得到的大小位置等信息,进行提交绘制的过程。
说明
在初次进入页面的时候,所有的组件都会参与到界面的渲染中(换句说法,初次渲染的时候,可以认为所有的组件都需要更新)。
二、UI更新过程
UI更新过程包含组件标脏及布局计算。初始加载阶段,所有组件(排除if/else条件不成立的分支和LazyForEach不可视区域内容)都会完整经历Build、Measure、Layout、Render流程。界面更新阶段,当触发列表滑动、显示/隐藏切换、元素属性(内容/样式/位置/尺寸)变化时,UI线程会先将脏节点进行Build,Build的过程会按照组件id,依次更新组件设置的属性,如果属性发生改变,则进行组件标脏。
若布局属性变化(width/height/padding/margin等):标记为"布局脏" ,找到布局边界,进行子树更新。
若非布局属性(样式属性)变化(color/backgroundColor/opacity等):仅会影响自身属性,不会进行子树查找。
多数情况下,如果某个组件的布局发生变化,也会对其他组件的布局也会产生影响,所以当有组件的布局发生变化,最简单的办法就是对整棵树进行重新布局,但是这样对整棵树进行重新布局的代价太大。标脏过程就是用来确定布局最小影响范围,来减少对整棵树进行重新布局的代价,而这个影响范围就是布局边界以内。
一般来讲,如果一个组件设置了固定的宽高尺寸,那这个组件就是布局边界。其内部组件布局的变化,不会影响到此布局边界外部的布局情况,那么在查找的时候,只需要在布局边界内部判断哪些组件的布局会受到影响,可以避免在整棵树结构的查找过程。
确定实际的脏节点数组后,根据脏节点数组来拿到对应的脏节点对象,通过递归遍历children进行Measure过程,如果该对象布局参数没有发生变化,就会跳过对应的Measure阶段。当Measure执行完成后,进行layout阶段。
从以上的过程可以看出,影响UI更新过程的主要因素是参与更新的节点数量。
在初次加载的时候,由于所有的节点都要参与全过程,那么如果对首帧渲染的速度有要求,就需要降低整体页面的组件节点数量。
在页面内容更新过程中,由于状态变量的变化导致UI的更新,可以利用布局边界减少子树更新的数量以及减少布局的计算。
本文主要引用整理于鸿蒙官方文档