基于Web组件的响应时延问题分析思路与案例

场景导入

响应时延是指，应用内手指点击离开屏幕或出现移动开始，到页面发生变化的时间。常见的场景包括点击后弹出弹窗或者loading动画，滑动后页面移动等场景。

性能指标

标准价值和影响：

<p id="p1680814506335">标准项名称</p>	<p id="p1480895013317">检测原因和背景说明</p>	<p id="p1780825013310">是否必须遵守</p>
<p id="p8808175033313">应用或元服务应用内点击操作响应快</p>	<p id="p3808135012330">保障应用启动完成及时，看护用户极致流畅体验</p>	<p id="p13808175013338">必须</p>
<p id="p1280835053315">应用或元服务内滑动操作响应快</p>	<p id="p8808205015332">保障应用上架版本相较历史版本基线无劣化</p>	<p id="p10808125053318">必须</p>

指标分级：

<p id="p11711329183520">标准项名称</p>	<p id="p77111229123512">S标</p>	<p id="p27121029193512">A标</p>	<p id="p1712829193514">B标</p>
<p id="p13712162973511">应用或元服务应用内点击操作响应快</p>	<p id="p87129296352">100ms</p>	<p id="p771222993511">150ms</p>	<p id="p1971242913356">250ms</p>
<p id="p147129295359">应用或元服务内滑动操作响应快</p>	<p id="p1771272911352">抛滑（速度大于300mm/s ）触屏:80ms拖滑（速度小于100mm/s）触屏:60ms</p>	<p id="p1971222917353">抛滑（速度大于300mm/s ）触屏:120ms拖滑（速度小于100mm/s）触屏:100ms</p>	<p id="p16712112993518">抛滑（速度大于300mm/s ）触屏:180ms拖滑（速度小于100mm/s）触屏:150ms</p>

当前测试标准包含 15ms 硬件处理补偿，如标准为 80ms，则trace耗时最长可为 65ms = 80 - 15。

性能衡量起始点介绍

点击操作响应时延的性能衡量的起点，为用户点击应用元素离手帧时间，终点为应用界面发生变化的时间。

滑动操作响应时延的性能衡量的起点，为用户开始滑动时间，终点为应用界面发生变化的首帧。

Trace 解读

Trace 抓取。
1. Chrome DevTools抓取。
  Web组件支持使用DevTools工具调试前端页面，参考文档：使用Devtools工具调试前端页面。
  1. 打开调试开关。
```
hdc shell param set web.debug.devtools true
```

    2.  查找devtools远程调试所需的domain socket名称，该名称与进程号有关，重启调试应用后，需要重复此步骤，以完成端口转发。

        ```
        hdc shell "cat /proc/net/unix | grep devtools"
        // 显示 @webview_devtools_remote_14876
        ```

    3.  配置端口映射, 添加映射\[pid\]替换成实际的进程id。

        ```
        hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
        // hdc fport tcp:9222 localabstract:webview_devtools_remote_14876
        ```

    4.  查看映射。

        ```
        hdc fport ls
        ```

    5.  验证端口转发是否成功。

        在电脑端Chrome浏览器地址栏中输入chrome://inspect/\#devices，页面识别到设备后，就可以开始页面调试。

        调试效果如下：

        ![](/img/bVdhmZn)

    6.  点击inspect 进入调试页面。

        ![](/img/bVdhmZo)

    7.  点击录制按钮进入录制。

        ![](/img/bVdhmZp)

    8.  点击停止按钮结束录制。

    可以先从全局初筛分析范围，然后按选中范围进行细筛。

    常见泳道介绍：

    <a name="table636542818165"></a>
    <table><thead align="left"><tr id="row1636572831610"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p15365132821612"><a name="p15365132821612"></a><a name="p15365132821612"></a>泳道名称</p>
    </th>
    <th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p3365192861614"><a name="p3365192861614"></a><a name="p3365192861614"></a>描述</p>
    </th>
    </tr>
    </thead>
    <tbody><tr id="row136562812164"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p12366112812162"><a name="p12366112812162"></a><a name="p12366112812162"></a>网络</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1436616283162"><a name="p1436616283162"></a><a name="p1436616283162"></a>网络请求，显示资源或数据请求</p>
    </td>
    </tr>
    <tr id="row15366328101614"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p173661928191616"><a name="p173661928191616"></a><a name="p173661928191616"></a>帧</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p836652819161"><a name="p836652819161"></a><a name="p836652819161"></a>页面送帧，可以查看对比页面变化</p>
    </td>
    </tr>
    <tr id="row1036622817167"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p7366152811613"><a name="p7366152811613"></a><a name="p7366152811613"></a>动画</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p17366928131617"><a name="p17366928131617"></a><a name="p17366928131617"></a>页面中加载的动画效果时间条</p>
    </td>
    </tr>
    <tr id="row193661928171611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p3366328121611"><a name="p3366328121611"></a><a name="p3366328121611"></a>互动</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1936614289166"><a name="p1936614289166"></a><a name="p1936614289166"></a>操作事件，可视化展示点击或滑动操作</p>
    </td>
    </tr>
    <tr id="row15366192811617"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p83661728111617"><a name="p83661728111617"></a><a name="p83661728111617"></a>主要</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p163661128191611"><a name="p163661128191611"></a><a name="p163661128191611"></a>网页排版、解析、JavaScript执行等</p>
    </td>
    </tr>
    <tr id="row1836615288165"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p4366132818164"><a name="p4366132818164"></a><a name="p4366132818164"></a>线程池</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p5366182841614"><a name="p5366182841614"></a><a name="p5366182841614"></a>系统或应用异步操作处理，一般不关注</p>
    </td>
    </tr>
    <tr id="row9366172811168"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p183665282165"><a name="p183665282165"></a><a name="p183665282165"></a>Compositor</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p5366172811610"><a name="p5366172811610"></a><a name="p5366172811610"></a>合成线程，对栅格化数据进行合成处理。 一般不关注</p>
    </td>
    </tr>
    <tr id="row1436622891619"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p10366192815164"><a name="p10366192815164"></a><a name="p10366192815164"></a>Chrome_ChildIOThread</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p103661828131613"><a name="p103661828131613"></a><a name="p103661828131613"></a>处理文件操作， 一般不关注</p>
    </td>
    </tr>
    </tbody>
    </table>

2.  DevEco Studio Trace抓取。

    DevTools Trace细节丰富，但是不易导出共享。 DevEco Studio Trace 共享能力较好，参考文档：[DevEco Profiler工具简介](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-profiler-V5)。

    1.  进入Profiler 窗口，选中应用进程，点击Frame图标开启会话，点击录制按钮开始录制。

        ![](/img/bVdhmZq)

    2.  点击停止按钮结束录制。

        ![](/img/bVdhmZr)

    3.  录制结果。

        ![](/img/bVdhmZs)

    常用泳道介绍：

    <a name="table44789129328"></a>
    <table><thead align="left"><tr id="row18478131217328"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p24782123328"><a name="p24782123328"></a><a name="p24782123328"></a>泳道名称</p>
    </th>
    <th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p547841293218"><a name="p547841293218"></a><a name="p547841293218"></a>描述</p>
    </th>
    </tr>
    </thead>
    <tbody><tr id="row64788125322"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p54781127322"><a name="p54781127322"></a><a name="p54781127322"></a>mmi_service</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p14478612103220"><a name="p14478612103220"></a><a name="p14478612103220"></a>多模输入信号，可以查看手势信号类型及触点</p>
    </td>
    </tr>
    <tr id="row10478141213216"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p44781212203210"><a name="p44781212203210"></a><a name="p44781212203210"></a>应用主线程泳道</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p6479161220323"><a name="p6479161220323"></a><a name="p6479161220323"></a>应用主逻辑，接收多模信号，生成帧，分发子信号等</p>
    </td>
    </tr>
    <tr id="row10479112103212"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p134793121321"><a name="p134793121321"></a><a name="p134793121321"></a>VizCompositorTh</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p16479191218322"><a name="p16479191218322"></a><a name="p16479191218322"></a>绘制信号监听线程，触发系统Web相关绘制或者执行</p>
    </td>
    </tr>
    <tr id="row104791112193216"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p247951214324"><a name="p247951214324"></a><a name="p247951214324"></a>Compositor</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p10479121215322"><a name="p10479121215322"></a><a name="p10479121215322"></a>合成线程，对栅格化数据进行合成处理</p>
    </td>
    </tr>
    <tr id="row3479212163214"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p13479101263217"><a name="p13479101263217"></a><a name="p13479101263217"></a>CompositorGpuTh</p>
    </td>
    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p12479141263219"><a name="p12479141263219"></a><a name="p12479141263219"></a>GPU光栅化处理，生成信号送图形子系统执行渲染</p>
    </td>
    </tr>
    </tbody>
    </table>

Trace点确认。

点击操作响应时延。

DevTools Trace：

以 pointerup 事件为起点，以页面明显变化帧（链接变色，图标变色等不计算）为结束点。

<p id="p62381527426">Trace 点</p>	<p id="p323818264217">描述</p>
<p id="p1623810214213">[主要]pointerup/mouseup 事件起点</p>	<p id="p112381825428">点击操作起点</p>
<p id="p123852144218">[帧] 明显变化帧终点</p>	<p id="p123815215421">响应变化终点</p>

DevEco Trace

<p id="p101982188434">Trace 点</p>	<p id="p16198121854317">描述</p>	<p id="p71981818104316">备注</p>
<p id="p201981218164311">[mmi_service]H:originEventHandle code:501 起点</p>	<p id="p13198191818436">点击操作离手点</p>	<p id="p111981018114314">多模输入起点</p>
<p id="p71989188438">[应用主线程]H:DispatchTouchEvent (type=1)起点</p>	<p id="p101981018134317">应用接收多模信号</p>	<p id="p919881894312">多模输入终点，应用生成首帧起点</p>
<p id="p41981718194317">[应用主线程]H:GestureProvider::OnTouchEvent \| action=Action::DOWN 起点</p>	<p id="p1619831834319">Web子系统接收手势信号</p>
<p id="p6198141819434">[CompositorGpuTh]H:SkiaOutputSurfaceImplOnGpu::SwapBuffers 终点</p>	<p id="p161984183430">Web子系统生成GPU 信号</p>	<p id="p4198161814318">渲染起点</p>
<p id="p7198918134313">[H:RosenWeb]信号数量增加起点</p>	<p id="p31981818184316">GPU信号进入队列</p>	<p id="p3198121817431">渲染起点（可选）</p>
<p id="p11198161834311">[render_service]H:ReceiveVsync 起点</p>	<p id="p171989181430">图形子系统处理起点</p>	<p id="p16198131854310">渲染起点（可选）</p>
<p id="p111988184431">[Present Fence]H:Waiting for Present Fence 终点</p>	<p id="p14198141813436">上屏结束</p>	<p id="p17198518184310">渲染终点</p>

<p id="p19917142434515">阶段名称</p>	<p id="p18917172414452">参考耗时</p>
<p id="p1491732484515">多模输入</p>	<p id="p14917192424515">8ms</p>
<p id="p1591762474518">应用生成首帧</p>	<p id="p4917132416458">40ms</p>
<p id="p59185246453">渲染</p>	<p id="p6918152418458">24ms</p>

滑动操作响应时延。

DevTools Trace

以touchMove事件为起点，以页面发生滑动帧为终点。

<p id="p81251120154816">Trace 点</p>	<p id="p181251205487">描述</p>
<p id="p51251920194810">[主要] touchmove 事件起点</p>	<p id="p41251420154819">识别滑动手势，滑动操作起点</p>
<p id="p141251320154812">[帧]页面滑动帧终点</p>	<p id="p13125020194819">响应变化终点</p>

DevEco Trace

<p id="p39411346145017">Trace 点</p>	<p id="p129411846145017">描述</p>	<p id="p17941746125010">备注</p>
<p id="p1794194645010">[mmi_service]H:originEventHandle code:502 起点</p>	<p id="p109413461500">滑动手势开始，注意坐标相对500需要变化</p>	<p id="p594144645015">多模输入起点</p>
<p id="p18941946155012">[应用主线程] H:DispatchTouchEvent (type=2) 起点</p>	<p id="p19417463509">应用接收到滑动信号</p>	<p id="p109411346185013">多模输入终点，应用生成首帧起点</p>
<p id="p109411346155016">[应用主线程] H:GestureProvider::OnTouchEvent \| action=Action::MOVE 起点</p>	<p id="p179418469502">Web子系统接收滑动信号起点</p>
<p id="p1294174618500">[应用主线程] H:RenderWidgetHostLatencyTracker::TouchMoveAck \| time={time}</p>	<p id="p1194134665020">Web子系统接收滑动信号终点, 时间为消费信号时间</p>
<p id="p8941646195012">[ThreadPoolForeg]H:OnGpuSwapBuffersCompleted::FirstScrollUpdate \| time={time}</p>	<p id="p294194618500">Web子系统处理滑动GPU信号终点，时间为接收滑动信号到生成图形信号耗时</p>
<p id="p794224611501">[CompositorGpuTh]H:SkiaOutputSurfaceImplOnGpu::SwapBuffers 终点</p>	<p id="p694244610502">Web子系统生成GPU信号</p>	<p id="p594216469505">渲染起点</p>
<p id="p394213462501">[H:RosenWeb]信号数量增加起点</p>	<p id="p594264675010">GPU信号进入队列</p>	<p id="p49422046155016">渲染起点（可选）</p>
<p id="p79421146105014">[render_service]H:ReceiveVsync 起点</p>	<p id="p129421346165020">图形子系统处理起点</p>	<p id="p1794244613503">渲染起点（可选）</p>
<p id="p139421346135011">[Present Fence]H:Waiting for Present Fence 终点</p>	<p id="p12942746145015">上屏结束</p>	<p id="p4942174685010">渲染终点</p>

<p id="p194241205318">阶段名称</p>	<p id="p794201235317">参考耗时</p>
<p id="p11942212115319">多模输入</p>	<p id="p59429128532">8ms</p>
<p id="p1943012125312">应用生成首帧</p>	<p id="p494331295311">30ms</p>
<p id="p1694351265317">渲染</p>	<p id="p19431412145319">24ms</p>

常见问题

应用加载资源后响应。
问题描述：点击操作响应时延超标。
Trace特点：
点击和响应之间存在明显网络请求过程和JS执行处理。
优化方案：
建议应用缓存页面资源或者添加转场操作。
应用执行JS后响应。
问题描述：点击操作响应时延超标。
Trace特点：
点击和响应之间存在明显JS执行处理。
优化方案：
建议应用优化执行逻辑或者添加转场或动画。

基于Web组件的响应时延问题分析思路与案例

HarmonyOS码上奇行

引用和评论

基于ArkUI页面抛滑白块优化解决方案

HarmonyOS 5.0（NEXT）实战体验—"慢小圈"应用开发实战体验全流程

SegmentFault 思否开发者系列沙龙：共筑生态，共创未来

HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

API接口设计的未来趋势：探索技术方向与实践方案

HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

HarmonyOS 应用中复杂业务场景下的接口设计