【入门到精通】鸿蒙next开发:基于Web组件的响应时延问题分析与案例实战

往期鸿蒙5.0全套实战文章必看:(文中附带全栈鸿蒙5.0学习资料)


 场景导入

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

性能指标

标准价值和影响:

标准项名称

检测原因和背景说明

是否必须遵守

应用或元服务应用内点击操作响应快

保障应用启动完成及时,看护用户极致流畅体验

必须

应用或元服务内滑动操作响应快

保障应用上架版本相较历史版本基线无劣化

必须

指标分级:

标准项名称

S标

A标

B标

应用或元服务应用内点击操作响应快

100ms

150ms

250ms

应用或元服务内滑动操作响应快

抛滑(速度大于300mm/s ) 触屏:80ms拖滑(速度小于100mm/s) 触屏:60ms

抛滑(速度大于300mm/s ) 触屏:120ms拖滑(速度小于100mm/s) 触屏:100ms

抛滑(速度大于300mm/s ) 触屏:180ms拖滑(速度小于100mm/s) 触屏:150ms

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

1.png

性能衡量起始点介绍

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

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

Trace 解读

1. Trace 抓取。

    a. Chrome DevTools抓取。

Web组件支持使用DevTools工具调试前端页面,参考文档:使用Devtools工具调试前端页面

  • 打开调试开关。
hdc shell param set web.debug.devtools true
  • 查找devtools远程调试所需的domain socket名称,该名称与进程号有关,重启调试应用后,需要重复此步骤,以完成端口转发。
hdc shell "cat /proc/net/unix | grep devtools" 
// 显示 @webview_devtools_remote_14876
  • 配置端口映射, 添加映射[pid]替换成实际的进程id。
hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid] 
// hdc fport tcp:9222 localabstract:webview_devtools_remote_14876
  • 查看映射。
hdc fport ls
  • 验证端口转发是否成功。

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

调试效果如下:

2.png

  • 点击inspect 进入调试页面。

3.png

  • 点击录制按钮进入录制。

4.png

  • 点击停止按钮结束录制。

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

常见泳道介绍:

泳道名称

描述

网络

网络请求,显示资源或数据请求

页面送帧,可以查看对比页面变化

动画

页面中加载的动画效果时间条

互动

操作事件,可视化展示点击或滑动操作

主要

网页排版、解析、JavaScript执行等

线程池

系统或应用异步操作处理,一般不关注

Compositor

合成线程,对栅格化数据进行合成处理。 一般不关注

Chrome_ChildIOThread

处理文件操作, 一般不关注

b. DevEco Studio Trace抓取。

DevTools Trace细节丰富,但是不易导出共享。 DevEco Studio Trace 共享能力较好,参考文档:DevEco Profiler工具简介

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

5.png

  • 点击停止按钮结束录制。

6.png

  • 录制结果。

7.png

​常用泳道介绍

泳道名称

描述

mmi_service

多模输入信号,可以查看手势信号类型及触点

应用主线程泳道

应用主逻辑,接收多模信号,生成帧,分发子信号等

VizCompositorTh

绘制信号监听线程,触发系统Web相关绘制或者执行

Compositor

合成线程,对栅格化数据进行合成处理

CompositorGpuTh

GPU光栅化处理,生成信号送图形子系统执行渲染

2. Trace点确认。

a. 点击操作响应时延。

DevTools Trace:

8.png

​以 pointerup 事件为起点,以页面明显变化帧(链接变色,图标变色等不计算)为结束点。

Trace 点

描述

[主要]pointerup/mouseup 事件起点

点击操作起点

[帧] 明显变化帧终点

响应变化终点

DevEco Trace

9.png

Trace 点

描述

备注

[mmi_service]H:originEventHandle code:501 起点

点击操作离手点

多模输入起点

[应用主线程]H:DispatchTouchEvent (type=1)起点

应用接收多模信号

多模输入终点,应用生成首帧起点

[应用主线程]H:GestureProvider::OnTouchEvent | action=Action::DOWN 起点

Web子系统接收手势信号

[CompositorGpuTh]H:SkiaOutputSurfaceImplOnGpu::SwapBuffers 终点

Web子系统生成GPU 信号

渲染起点

[H:RosenWeb]信号数量增加起点

GPU信号进入队列

渲染起点(可选)

[render_service]H:ReceiveVsync 起点

图形子系统处理起点

渲染起点(可选)

[Present Fence]H:Waiting for Present Fence 终点

上屏结束

渲染终点

阶段名称

参考耗时

多模输入

8ms

应用生成首帧

40ms

渲染

24ms

b. 滑动操作响应时延。

DevTools Trace:

10.png

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

Trace 点

描述

[主要] touchmove 事件起点

识别滑动手势,滑动操作起点

[帧]页面滑动帧 终点

响应变化终点

DevEco Trace

11.png

Trace 点

描述

备注

[mmi_service]H:originEventHandle code:502 起点

滑动手势开始,注意坐标相对500需要变化

多模输入起点

[应用主线程] H:DispatchTouchEvent (type=2) 起点

应用接收到滑动信号

多模输入终点,应用生成首帧起点

[应用主线程] H:GestureProvider::OnTouchEvent | action=Action::MOVE 起点

Web子系统接收滑动信号起点

[应用主线程] H:RenderWidgetHostLatencyTracker::TouchMoveAck | time={time}

Web子系统接收滑动信号终点, 时间为消费信号时间

[ThreadPoolForeg]H:OnGpuSwapBuffersCompleted::FirstScrollUpdate | time={time}

Web子系统处理滑动GPU信号终点,时间为接收滑动信号到生成图形信号耗时

[CompositorGpuTh]H:SkiaOutputSurfaceImplOnGpu::SwapBuffers 终点

Web子系统生成GPU信号

渲染起点

[H:RosenWeb]信号数量增加起点

GPU信号进入队列

渲染起点(可选)

[render_service]H:ReceiveVsync 起点

图形子系统处理起点

渲染起点(可选)

[Present Fence]H:Waiting for Present Fence 终点

上屏结束

渲染终点

阶段名称

参考耗时

多模输入

8ms

应用生成首帧

30ms

渲染

24ms

 常见问题

1、应用加载资源后响应。

问题描述:点击操作响应时延超标。

Trace特点:点击和响应之间存在明显网络请求过程和JS执行处理。

优化方案:建议应用缓存页面资源或者添加转场操作。

2、应用执行JS后响应。

问题描述:点击操作响应时延超标。

Trace特点:点击和响应之间存在明显JS执行处理。

13.png

优化方案:建议应用优化执行逻辑或者添加转场或动画。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值