1# 合理使用renderGroup 2 3## 概述 4 5在大型业务场景开发过程中，为了提升产品的视觉效果，经常大量使用属性动画和转场动画，当业务场景复杂度达到一定程度之后，就有可能出现卡顿的情况。本文推荐在单一页面上存在大量应用动效的组件时，使用renderGroup方法来解决卡顿问题，从而提升绘制性能。 6 7renderGroup是组件通用方法，它代表了渲染绘制的一个组合。其核心功能就是标记组件，在绘制阶段将组件和其子组件的绘制结果进行合并并缓存，以达到复用的效果，从而降低绘制负载。renderGroup方法通过传参，主动标记组件是否开启缓存复用，其参数说明如下： 8 9| **参数** | **类型** | **说明** | 10| ------ | ------- | ------------------------------------- | 11| value | boolean | false：关闭，true：开启。若不调用接口，组件标记默认值为false | 12 13renderGroup本质上使用了用空间换时间的思想，如果缓存能够一直复用，那么就能一直节约绘制时间。要想达到上述的效果，组件每一帧的绘制结果都必须是相同的，也就是说如果组件内部的内容是固定的、不变的、静止的，只有这样，使用renderGroup才能生效。本文基于在内容固定的组件上添加动效这个场景，对组件通用方法renderGroup进行案例分析和性能对比。 14 15## 原理说明 16 17首次绘制组件时，若组件被标记为启用renderGroup状态，将对组件和其子组件进行离屏绘制，将绘制结果进行缓存。此后当需要重新绘制组件时，就会优先使用缓存而不必重新绘制了。从而降低绘制负载，优化渲染性能。 18 19以下流程图展示了单个组件的渲染流程，涉及了缓存管理和使用，当组件树进入渲染管线开始渲染流程时，会对组件树上标脏的组件和其子组件进行递归渲染，若组件缓存存在，则将直接使用缓存进行绘制；若组件被标记为开启renderGroup时，则将进入绘制逻辑，递归绘制其所有子组件，并将绘制结果进行缓存。 20 21图1 组件渲染流程 22 23 24 25以下流程图展示了缓存管理上的流程细节。 26 27当同时满足以下三个条件时，将进行缓存更新。 28 29- 组件在当前组件树上 30- 组件renderGroup被标记为true 31- 组件内容被标脏 32 33当满足以下任意条件时，将进行缓存清理。 34 35- 组件不存在于组件树上 36- 组件renderGroup被标记为false 37 38图2 缓存管理流程 39 40 41 42## 使用约束 43 44结合上述原理，为了能使renderGroup功能生效，组件存在以下限制。 45 46- 组件内容固定不变 47 48 组件和其子组件各属性保持固定，不发生变化。如果组件内容不是固定的，也就是说其子组件中上存在某些属性变化或者样式变化的组件，此时如果使用renderGroup，那么缓存的利用率将大大下降，并且有可能需要不断执行缓存更新逻辑，在这种情况下，不仅不能优化卡顿效果，甚至还可能使卡顿恶化。例如：文本内容使用双向绑定的动态数据；图片资源使用gif格式；使用video组件播放视频。 49 50- 子组件无动效 51 52 由组件统一应用动效，其子组件均无动效。如果子组件上也应用动效，那么子组件相对父组件就不再是静止的，每一帧都有可能需要更新缓存，更新逻辑同样需要消耗系统资源。 53 54## 使用场景 55 56当在单一页面上存在大量应用动效的组件，并且这些组件均满足上述约束时，推荐使用renderGroup。 57 58以下展示了一个使用场景的示例，首先场景中每个组件内部使用固定图片和文本内容，其次在每个组件上统一应用旋转和缩放动效，最后在场景中添加60个这样的组件。 59 60图3 使用场景示例 61 62  63 64## 推荐示例 65 66以下展示了推荐场景的示例代码，分别是组件树结构以及自定义组件IconItem，场景采用grid布局，将多个IconItem放置在组件树上，每个IconItem内部使用固定图片和固定文本表示固定内容的组件。renderGroup方法在自定义组件IconItem内调用，通过开关按钮切换来关闭和开启renderGroup，通过[Profiler](./application-performance-analysis.md) Frame工具进行数据收集，从丢帧率、CPU使用率和GPU使用率三个方面，对比场景示例在关闭和开启renderGroup时的性能差异。 67 68```ts 69// Index.ets 70 71import { IconItem } from './IconItem' 72 73// IconItem相关数据 74class IconItemSource { 75 image: string | Resource = '' 76 text: string | Resource = '' 77 78 constructor(image: string | Resource = '', text: string | Resource = '') { 79 this.image = image; 80 this.text = text; 81 } 82} 83 84@Entry 85@Component 86struct Index { 87 // renderGroup接口是否开启 88 @State renderGroupFlag: boolean = false; 89 private iconItemSourceList: IconItemSource[] = []; 90 91 aboutToAppear() { 92 // 遍历添加60个IconItem的数据 93 for (let index = 0; index < 20; index++) { 94 const numStart: number = index * 3; 95 // 此处循环使用三张图片资源 96 this.iconItemSourceList.push( 97 new IconItemSource($r('app.media.album'), `item${numStart + 1}`), 98 new IconItemSource($r('app.media.applet'), `item${numStart + 2}`), 99 new IconItemSource($r('app.media.cards'), `item${numStart + 3}`), 100 ); 101 } 102 } 103 104 build() { 105 Column() { 106 Row() { 107 Row() { 108 Text('场景示例') 109 .fontSize(24) 110 .lineHeight(24) 111 .fontColor(Color.Black) 112 .fontWeight(FontWeight.Bold) 113 .margin({ left: 30 }) 114 } 115 116 // 动态切换renderGroup功能 117 Stack({ alignContent: Alignment.End }) { 118 Button(this.renderGroupFlag ? 'renderGroup已开启' : 'renderGroup已关闭', { 119 type: ButtonType.Normal, 120 stateEffect: true 121 }) 122 .fontSize(12) 123 .borderRadius(8) 124 .backgroundColor(0x317aff) 125 .width(150) 126 .height(30) 127 .margin({ right: 30 }) 128 .onClick(() => { 129 this.renderGroupFlag = !this.renderGroupFlag; 130 AppStorage.setOrCreate('renderGroupFlag', this.renderGroupFlag) 131 }) 132 } 133 } 134 .height(56) 135 .width('100%') 136 .backgroundColor(Color.White) 137 .justifyContent(FlexAlign.SpaceBetween) 138 139 // IconItem放置在grid内 140 GridRow({ 141 columns: 6, 142 gutter: { x: 0, y: 0 }, 143 breakpoints: { value: ["400vp", "600vp", "800vp"], 144 reference: BreakpointsReference.WindowSize }, 145 direction: GridRowDirection.Row 146 }) { 147 ForEach(this.iconItemSourceList, (item: IconItemSource) => { 148 GridCol() { 149 IconItem({ image: item.image, text: item.text }) 150 .transition( 151 TransitionEffect.scale({ x: 0.5, y: 0.5 }) 152 .animation({duration: 3000, curve: Curve.FastOutSlowIn, iterations: -1 }) 153 .combine(TransitionEffect.rotate({ z: 1, angle: 360 }) 154 .animation({ duration: 3000, curve: Curve.Linear, iterations: -1 })) 155 ) 156 } 157 .height(70) 158 .width('25%') 159 }) 160 } 161 .width("100%") 162 .height("100%") 163 } 164 .width('100%') 165 .height('100%') 166 .alignItems(HorizontalAlign.Center) 167 } 168} 169``` 170 171```ts 172// IconItem.ets 173 174@Component 175export struct IconItem { 176 @StorageLink('renderGroupFlag') renderGroupFlag: boolean = false; 177 image: string | Resource = ''; 178 text: string | Resource = ''; 179 180 build() { 181 Flex({ 182 direction: FlexDirection.Column, 183 justifyContent: FlexAlign.Center, 184 alignContent: FlexAlign.Center 185 }) { 186 Image(this.image) 187 .height(20) 188 .width(20) 189 .objectFit(ImageFit.Contain) 190 .margin({ left: 15 }) 191 192 Text(this.text) 193 .fontSize(10) 194 .fontColor("# 182431") 195 .margin({ top: 5 }) 196 .width(50) 197 .opacity(0.8) 198 .textAlign(TextAlign.Center) 199 } 200 .backgroundColor('# e3e3e3') 201 .width(50) 202 .height(50) 203 .borderRadius(25) 204 // 在IconItem内调用renderGroup，true为开启，false为关闭 205 .renderGroup(this.renderGroupFlag) 206 } 207} 208``` 209 210### 丢帧率分析 211 212如图4所示，当关闭renderGroup时，在10秒内丢帧数多达451帧，对应的丢帧率为52.3%，这种高频率丢帧现象可能会导致画面呈现出卡顿感。而从图5中可以看出，在开启renderGroup之后，同样长度的时间段里并没有出现任何一次掉帧的现象。 213 214图4 丢帧率（关闭renderGroup） 215 216 217 218图5 丢帧率（开启renderGroup） 219 220 221 222### CPU使用率分析 223 224根据图6的数据，在关闭renderGroup的情况下，render_service进程在10秒内所使用的CPU资源百分比为17.22%。而在图7中可以看到，如果启动了renderGroup后，则同一时间内，该进程对CPU的使用率下降到了10.86%。这表明，启用renderGroup可以有效地减轻render_service进程对CPU的负载压力，提高系统性能。 225 226图6 CPU使用率（关闭renderGroup） 227 228 229 230图7 CPU使用率（开启renderGroup） 231 232 233 234### GPU使用率分析 235 236根据图8所示的数据，在没有开启renderGroup的情况下，GPU瞬时使用率曾一度达到过55%的高度，并且存在较大的波动。相反地，在图9中，可以看到在启动renderGroup后，GPU的使用率稳定在了16%左右，并且波动较小。这一结果表明，在优化GPU使用率方面，开启renderGroup具有更优的表现，并能带来更为稳定的性能表现。 237 238图8 GPU使用率（关闭renderGroup） 239 240 241 242图9 GPU使用率（开启renderGroup） 243 244 245 246## 不推荐示例 247 248如果在正例场景示例的基础上进行修改，在组件的子组件上应用动效，此时，不再满足子组件无动效的约束。 249 250以下展示了对之前场景示例代码的修改，在自定义组件IconItem内部的系统组件Image上应用透明度渐变动效，renderGroup方法调用方式不变，依然通过Profiler Frame工具进行数据收集，从丢帧率、调用栈两个方面，对比场景示例修改后在关闭和开启renderGroup时的性能差异。 251 252```ts 253// IconItem.ets 254 255@Component 256export struct IconItem { 257 @StorageLink('renderGroupFlag') renderGroupFlag: boolean = false; 258 image: string | Resource = ''; 259 text: string | Resource = ''; 260 261 build() { 262 Flex({ 263 direction: FlexDirection.Column, 264 justifyContent: FlexAlign.Center, 265 alignContent: FlexAlign.Center 266 }) { 267 Image(this.image) 268 .height(20) 269 .width(20) 270 .objectFit(ImageFit.Contain) 271 .margin({ left: 15 }) 272 // 系统组件Image应用透明度渐变动效 273 .transition( 274 TransitionEffect.OPACITY.animation({ duration: 3000, curve: Curve.EaseIn, iterations: -1 }) 275 ) 276 277 Text(this.text) 278 .fontSize(10) 279 .fontColor("# 182431") 280 .margin({ top: 5 }) 281 .width(50) 282 .opacity(0.8) 283 .textAlign(TextAlign.Center) 284 } 285 .backgroundColor('# e3e3e3') 286 .width(50) 287 .height(50) 288 .borderRadius(25) 289 // 在IconItem内调用renderGroup，true为开启，false为关闭 290 .renderGroup(this.renderGroupFlag) 291 } 292} 293``` 294 295### 丢帧率分析 296 297查看丢帧率数据，图10中，在关闭renderGroup时，丢帧率达到了77.0%，丢帧数达到了648帧；图11中，在开启renderGroup时，丢帧率并没有降低，反而升高到了100.0%，也就是每一帧都出现了丢帧，而且此时的丢帧数同时也是总帧数下降到了506帧，总帧数比关闭renderGroup时还要低。 298 299图10 反例场景——组件内部子组件应用动效（关闭renderGroup） 300 301 302 303图11 反例场景——组件内部子组件应用动效（开启renderGroup） 304 305 306 307### 调用栈分析 308 309在图12中显示了当renderGroup功能关闭时，因为不需要维护缓存，所以在这个情况下，并不会调用到UpdateCacheSurface方法。然而，在图13中，我们可以看到在启动renderGroup功能后，Process这个预渲染的方法开始频繁地调用UpdateCacheSurface方法。这时所有组件的image子组件的每一帧都在发生变化，导致每一帧的各组件缓存都需要被更新，而这每一步都需要通过调用一次UpdateCacheSurface方法来完成。 310 311图12 反例场景——组件内部子组件应用动效，调用栈信息（关闭renderGroup） 312 313 314 315图13 反例场景——组件内部子组件应用动效，调用栈信息（开启renderGroup） 316 317 318 319接着查看FlushFrame方法，此方法为分发绘制指令给gpu执行绘制操作，图14中，在关闭renderGroup时，渲染耗时3ms左右；图15中，在开启renderGroup时，由于大量的缓存更新需要重新绘制，渲染耗时15ms左右，是关闭时的5倍。 320 321图14 反例场景——组件内部子组件应用动效，FlushFrame耗时（关闭renderGroup） 322 323 324 325图15 反例场景——组件内部子组件应用动效，FlushFrame耗时（开启renderGroup） 326
