一种页面加载时长计算方法方法及装置制造方法及图纸

技术编号:31494168 阅读:25 留言:0更新日期:2021-12-18 12:32
本公开提供了一种页面加载时长计算方法及装置,首先响应于目标页面的加载触发事件,对所述目标页面进行加载计时;然后,当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域;其次,基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率;最后,在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时,停止所述加载计时,得到所述目标页面的加载耗时。面的加载耗时。面的加载耗时。

【技术实现步骤摘要】
一种页面加载时长计算方法方法及装置


[0001]本公开涉及计算机
,具体而言,涉及一种页面加载时长计算方法及装置。

技术介绍

[0002]Flutter是一种构建用户界面工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。利用Flutter在开发的页面可以被称作Flutter页面。在Flutter页面的运行信息监控中,页面加载时长是一个非常重要的指标,作为页面加载时长的一种,可交互加载时长能够直接反映用户与界面发生交互所需要的等待的时间。
[0003]普通的web页面在加载过程中需要分别加载多个元素,可以通过监测各个元素的加载完成时间判断页面的加载时间,而Flutter页面的加载过程是一体的,无法通过监听各个元素的加载情况判断整个页面的加载进度,难以确定页面加载时长。

技术实现思路

[0004]本公开实施例至少提供一种页面加载时长计算方法及装置。
[0005]第一方面,本公开实施例提供了一种页面加载时长计算方法,包括:
[0006]响应于目标页面的加载触发事件,对所述目标页面进行加载计时;
[0007]当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域;所述第一页面元素表征所述目标页面对应的用户界面UI树中,叶子节点对应的页面元素;
[0008]基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率;所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素;
[0009]在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时,停止所述加载计时,得到所述目标页面的加载耗时。
[0010]一种可选的实施方式中,所述基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率,包括:
[0011]针对任一所述第二页面元素,根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域;其中,所述叶子节点表征最低层级的孩子节点;
[0012]基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率;
[0013]基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖区域;
[0014]基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域,确定所述目标页面当前的内容覆盖率。
[0015]一种可选的实施方式中,所述根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域,包括:
[0016]计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集,并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
[0017]一种可选的实施方式中,所述基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率,包括:
[0018]基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值,确定所述第二页面元素的内容覆盖率。
[0019]一种可选的实施方式中,所述基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖区域,包括:
[0020]在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下,将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
[0021]一种可选的实施方式中,所述方法还包括:
[0022]在检测到针对所述目标页面的控制操作时,停止所述加载计时,得到所述目标页面的加载耗时;和/或,
[0023]在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时,停止所述加载计时,得到所述目标页面的加载耗时。
[0024]一种可选的实施方式中,所述当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域,包括:
[0025]在所述目标页面的转场动画播放结束后,当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域。
[0026]第二方面,本公开实施例还提供一种页面加载时长计算装置,包括:
[0027]计时触发模块,用于响应于目标页面的加载触发事件,对所述目标页面进行加载计时;
[0028]第一确定模块,用于当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域;所述第一页面元素表征所述目标页面对应的用户界面UI树中,叶子节点对应的页面元素;
[0029]第二确定模块,用于基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率;所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素;
[0030]计时停止模块,用于在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时,停止所述加载计时,得到所述目标页面的加载耗时。
[0031]一种可选的实施方式中,所述第二确定模块在基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率时,用于:
[0032]针对任一所述第二页面元素,根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域;其中,所述叶子节点表征最低层级的孩子节点;
[0033]基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率;
[0034]基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖区域;
[0035]基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域,确定所述目标页面当前的内容覆盖率。
[0036]一种可选的实施方式中,所述第二确定模块在根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域时,用于:
[0037]计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集,并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
[0038]一种可选的实施方式中,所述第二确定模块在基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率时,用于:
本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种页面加载时长计算方法,其特征在于,包括:响应于目标页面的加载触发事件,对所述目标页面进行加载计时;当检测到指令表征目标页面的数据帧的渲染函数回调时,确定所述目标页面的各第一页面元素的内容覆盖区域;所述第一页面元素表征所述目标页面对应的用户界面UI树中,叶子节点对应的页面元素;基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率;所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素;在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时,停止所述加载计时,得到所述目标页面的加载耗时。2.根据权利要求1所述的方法,其特征在于,所述基于所述第一页面元素的内容覆盖区域,以及第二页面元素的可绘制区域,确定所述目标页面当前的内容覆盖率,包括:针对任一所述第二页面元素,根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域;其中,所述叶子节点表征最低层级的孩子节点;基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率;基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖区域;基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域,确定所述目标页面当前的内容覆盖率。3.根据权利要求2所述的方法,其特征在于,所述根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域,确定所述第二页面元素的初始内容覆盖区域,包括:计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集,并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。4.根据权利要求2所述的方法,其特征在于,所述基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域,确定所述第二页面元素的内容覆盖率,包括:基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值,确定所述第二页面元素的内容覆盖率。5.根据权利要求2所述的方法,其特征...

【专利技术属性】
技术研发人员:陈绪伟
申请(专利权)人:北京字节跳动网络技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1