HarmonyOS应用点击响应时延优化指导-电子发烧友网

在HarmonyOS应用生态高速发展的背景下，虽然移动设备的硬件运算性能已经达到了新的高度，但与此同时应用研发者也设计出更加多元化、智能化的产品，展现样式百花齐放，这些产品对高性能的需求与日俱增，加上同类型相近功能的产品互相竞争，用户也会对App产品质量的要求越来越高，对响应速度的要求也愈加严格。本文介绍在HarmonyOS应用中，对应用点击响应时延进行优化的各种方法思路。

优化指导

为了保障应用操作响应及时，看护用户极致流畅体验，开发者需要分析从手势抬手到渲染上屏这段时间应用做了哪些耗时的操作，进而针对性地优化相关逻辑。点击响应优化是指通过分析响应阶段、优化应用性能、加快点击后页面的响应速度，使用户可以得到流畅的操作体验。

图1 点击响应起止点示意图

（一）UI优化

应用开发中的用户界面UI（User Interface）是用户与应用程序交互的关键部分。使用不同类型的布局，能在界面显示上达到预期效果，甚至某些方式能将页面排布得更加美观，但也容易引入不合理的结构问题，如果UI界面中存在过度的布局计算，冗余的元素绘制，将会带来设备资源的大量开销，造成响应性能的衰退。

减少嵌套层级

布局的嵌套层次过深会导致在创建节点及进行布局时耗费更多时间。因此开发者在开发时，应避免冗余的嵌套，并尽量使用扁平化布局来优化嵌套层级。

具体内容见《精简节点数》和《合理使用布局组件》。

减少渲染时间

if/else条件渲染是ArkUI应用开发框架提供的渲染控制能力，可根据应用的不同状态，渲染对应分支下的UI描述。

具体内容见合理使用渲染控制语法。

用renderGroup缓存动效

页面响应时，可能大量使用属性动画和转场动画，当复杂度达到一定程度之后，就有可能出现卡顿的情况。renderGroup是组件通用方法，它代表了渲染绘制的一个组合。

具体原理是在首次绘制组件时，若组件被标记为启用renderGroup状态，将对组件及其子组件进行离屏绘制，将绘制结果合并保存到缓存中。此后当需要重新绘制相同组件时，就会优先使用缓存而不必重新绘制了，从而降低绘制负载，进而加快响应速度。

图2 renderGroup使用场景示例

为了能使renderGroup功能生效，有以下限制条件：

组件内容固定不变：组件及其子组件各属性保持固定，不发生变化。如果组件内容不是固定的，也就是说其子组件中存在某些属性变化或者样式变化，此时如果使用renderGroup，那么缓存的利用率将大大下降，并且有可能需要不断执行缓存更新逻辑，在这种情况下，不仅不能优化卡顿效果，甚至还可能使卡顿恶化。例如：文本内容使用双向绑定的动态数据；图片资源使用gif格式；使用video组件播放视频。

子组件无动效：由组件统一应用动效，其子组件均无动效。如果子组件上也应用动效，那么子组件相对父组件就不再是静止的，每一帧都有可能需要更新缓存，更新逻辑同样需要消耗系统资源。

LazyForEach懒加载

使用LazyForEach懒加载替换ForEach，避免像ForEach那样一次性初始化和加载所有元素，从而使首帧绘制时创建列表元素时间大大减少，提升响应性能表现。

相关原理及案例参考《优化长列表加载慢丢帧问题》。

动态import

动态import是一种模块加载机制，允许应用程序在运行时按照实际需求去加载相关模块。在某些条件满足时（比如用户交互时，或ABTest分支切换时）再加载特定模块，可以减少初始化import的加载时间和资源消耗，这将有助于提高应用程序的内存性能和响应速度。

与静态import不同，动态import仅在需要时才消耗CPU等资源；相比静态import在编译时就确定了引入的所有模块，动态import还有更佳的语法灵活性，借助这种灵活，能够实现代码和路由级别的粒度分割，优化模块层次的懒加载性能。

具体的使用场景和实现方案参考《动态import》。

（二）并发优化

并发是指多个任务在同一个时间段内同时触发执行，具体逻辑中使用多线程异步执行，与之相对的概念是串行任务，按顺序同步执行。

应用中的并发优化就是在响应用户操作期间，尽可能地让主线程只执行UI绘制相关的任务，而将非UI的耗时任务分配给其他线程或者延迟处理。这样借助多线程的异步威廉希尔官方网站，充分利用多核处理器的能力，提高应用程序的并发处理能力，减少用户等待时间，保证用户界面的响应流畅性。

异步任务并发处理

使用多线程并发能力进行开发的过程中，主要实现方式有：

利用TaskPool执行简单并行任务：将一些耗时的操作放入异步任务中处理，避免阻塞主线程，提升应用的响应速度；

利用Worker完成周期类耗时操作：Worker可以空跑在后台等待事件触发，周期触发耗时操作使用Worker，这样可以避免TaskPool频繁拉起影响性能。

二者原理和效果差异可参考《TaskPool和Worker的对比实践》。

使用组件异步加载特性

Image组件支持异步加载特性：当应用在页面上展示一批图片的时候，会先显示空白占位块，当图片在其他线程加载完毕后，再替换占位块。这样图片加载就可以不阻塞页面的显示，给用户带来良好的交互体验。

相应的，如果展示图片数目很少，或加载本地图片，耗时明显较少时，这时建议配置syncLoad属性为true，使图片同步加载，避免特定情况下图片加载出现的闪烁。

（三）代码逻辑优化

代码逻辑的优劣对应用响应速度的影响是比较明显的，特别是点击切换后新页面中的aboutToAppear、onPageShow等生命周期回调，以及点击操作页面中的aboutToDisappear等，需要充分优化代码、减少冗余、避免耗时，提升执行效率。

基于平台SDK的开发框架下，对App生命周期的理解，可以帮助开发人员识别程序在不同阶段的行为，弄清楚不同形态转换时触发的接口性质、各函数被调用的频率，进而挖掘出代码优化的方向。

下图是页面及自定义组件的生命周期流程：

图3 生命周期流程

通常可以采用的逻辑优化方法有：

选择合适的数据结构 索引存取考虑使用array数组，hash查找考虑使用map，去重逻辑考虑使用set等；有时开发者使用object变量作为容器去处理map的逻辑，可以考虑使用ArkTS提供的高性能容器类，直接使用HashMap；遇到纯数值计算的场合，推荐使用TypedArray的数据结构，比如Int8Array、Int32Array、Float32Array、BigInt64Array等。

合理使用缓存 当某些运算结果会反复使用时，以空间换时间，提前缓存以便于下次调用。

注意对象new和delete的频率 new和delete可能会触发内存管理回收，占用CPU资源从而影响界面渲染的能力，需要根据情况调整其频次。尤其在循环代码中，频繁的new、delete更会带来恶化的性能表现，应该尽量将new/delete优化到循环外去处理。

延迟执行资源释放操作 将资源关闭和释放操作放在setTimeout函数中执行，使其延迟到系统相对空闲的时刻进行，可以避免在程序忙碌时段占用关键资源，提升整体性能及响应能力。具体的使用场景和实现方案参考《延迟执行资源释放操作》。

减小拖动识别距离

应用识别拖动手势事件时需要设置合理的拖动距离，设置不合理的拖动距离会导致滑动不跟手、响应时延慢等问题。针对此类问题可以通过设置distance大小来解决。具体的使用场景和实现方案参考《减小拖动识别距离》。

（四）视觉感知优化

上述几节内容，是从减少时延绝对值的角度来提升响应体验，而视觉感知优化则是通过交互设计的优化，提升用户响应速度的感知。

从响应速度的反面角度来讲，应用的卡顿其实就是视觉上出现了不流畅的画面，引起了用户的注意，令其产生了一定的不适感。这也就意味着，在用户操作后，需要第一时间从视觉层面给予反馈响应，从而解决视觉动作带来的不适。

开发者可以在用户的交互动作开始时，从感知角度添加一些动画元素，比如单击效果、转场缩放、加载进度条、共享动画等，这些可以告诉用户目前状态发生了变化，APP在快速地运作着；而动画的背后是：数据的计算，布局的渲染，内容的加载等等，当新界面渲染显示完成，上述动画元素就可通过渐变消失、移出屏外等友好的方式退出视觉区域。