CN113806197A - 一种页面加载时长计算方法方法及装置 - Google Patents
一种页面加载时长计算方法方法及装置 Download PDFInfo
- Publication number
- CN113806197A CN113806197A CN202111108760.0A CN202111108760A CN113806197A CN 113806197 A CN113806197 A CN 113806197A CN 202111108760 A CN202111108760 A CN 202111108760A CN 113806197 A CN113806197 A CN 113806197A
- Authority
- CN
- China
- Prior art keywords
- page
- page element
- content coverage
- area
- target page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000004364 calculation method Methods 0.000 title claims abstract description 27
- 238000009877 rendering Methods 0.000 claims abstract description 31
- 230000006870 function Effects 0.000 claims description 29
- 238000000034 method Methods 0.000 claims description 26
- 238000004590 computer program Methods 0.000 claims description 10
- 230000007704 transition Effects 0.000 claims description 8
- 230000008569 process Effects 0.000 description 7
- 238000012544 monitoring process Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3409—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment for performance assessment
- G06F11/3419—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment for performance assessment by assessing time
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开提供了一种页面加载时长计算方法及装置，首先响应于目标页面的加载触发事件，对所述目标页面进行加载计时；然后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；其次，基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；最后，在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
Description
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种页面加载时长计算方法及装置。
背景技术
Flutter是一种构建用户界面工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。利用Flutter在开发的页面可以被称作Flutter页面。在Flutter页面的运行信息监控中，页面加载时长是一个非常重要的指标，作为页面加载时长的一种，可交互加载时长能够直接反映用户与界面发生交互所需要的等待的时间。
普通的web页面在加载过程中需要分别加载多个元素，可以通过监测各个元素的加载完成时间判断页面的加载时间，而Flutter页面的加载过程是一体的，无法通过监听各个元素的加载情况判断整个页面的加载进度，难以确定页面加载时长。
发明内容
本公开实施例至少提供一种页面加载时长计算方法及装置。
第一方面，本公开实施例提供了一种页面加载时长计算方法，包括：
响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率，包括：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
一种可选的实施方式中，所述根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域，包括：
计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集，并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
一种可选的实施方式中，所述基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率，包括：
基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值，确定所述第二页面元素的内容覆盖率。
一种可选的实施方式中，所述基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域，包括：
在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下，将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
一种可选的实施方式中，所述方法还包括：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域，包括：
在所述目标页面的转场动画播放结束后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域。
第二方面，本公开实施例还提供一种页面加载时长计算装置，包括：
计时触发模块，用于响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
第一确定模块，用于当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
第二确定模块，用于基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
计时停止模块，用于在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述第二确定模块在基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率时，用于：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
一种可选的实施方式中，所述第二确定模块在根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域时，用于：
计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集，并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
一种可选的实施方式中，所述第二确定模块在基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率时，用于：
基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值，确定所述第二页面元素的内容覆盖率。
一种可选的实施方式中，所述第二确定模块在基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域时，用于：
在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下，将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
一种可选的实施方式中，所述计时停止模块还用于：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述第一确定模块具体用于：
在所述目标页面的转场动画播放结束后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域。
第三方面，本公开实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
本公开实施例提供的页面加载时长计算方法及装置，首先响应于目标页面的加载触发事件，对所述目标页面进行加载计时；然后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；其次，基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；最后，在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。本公开通过确定第一目标页面的各个元素的内容覆盖区域，以及各个第二页面元素的可绘制区域，确定目标页面的内容覆盖率，并根据内容覆盖率确定目标页面是否加载完成，实现整体加载页面的目标页面加载时长确定。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种页面加载时长计算方法的流程图；
图2示出了本公开实施例所提供的另一种页面加载时长计算方法的流程图；
图3示出了本公开实施例所提供的一种页面加载时长计算装置的示意图；
图4示出了本公开实施例所提供的一种电子设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
经研究发现，普通的web页面在加载过程中需要分别加载多个元素，可以通过监测各个元素的加载完成时间判断页面的加载时间，而Flutter页面的加载过程是一体的，无法通过监听各个元素的加载情况判断整个页面的加载进度，难以确定页面加载时长。
基于上述研究，本公开提供了一种页面加载时长计算方法及装置，通过确定第一目标页面的各个元素的内容覆盖区域，以及各个第二页面元素的可绘制区域，确定目标页面的内容覆盖率，并根据内容覆盖率确定目标页面是否加载完成，实现整体加载页面的目标页面加载时长确定。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面加载时长计算方法进行详细介绍，本公开实施例所提供的页面加载时长计算方法的执行主体一般为具有一定计算能力的计算机设备。在一些可能的实现方式中，该页面加载时长计算方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
参见图1所示，为本公开实施例提供的页面加载时长计算方法的流程图，所述方法包括步骤S101～S104，其中：
S101、响应于目标页面的加载触发事件，对所述目标页面进行加载计时。
该步骤中，在浏览器访问目标页面，或触发滑动指令等改变目标页面展示内容的操作时，会向服务器或缓存请求并加载页面数据，开始加载后，发生加载触发事件，浏览器开始绘制页面，此时开始对目标页面进行加载计时。
这里，有些页面在加载时会先展示与页面内容无关的转场动画，可以将加载触发事件设置为转场动画之后，避免对无关的转场动画进行计时。
S102、当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素。
在进行绘制的过程中，浏览器会逐帧进行绘制，页面通常需要多个数据帧的绘制才能加载完毕，若页面中有动画部分，页面在加载完毕后还会继续进行数据帧的绘制，每当一个数据帧的绘制完成时，会触发渲染函数的回调。
该步骤中，每当检测到有指令表征渲染函数的回调，即表示浏览器完成了一次数据帧的绘制，此时，可以确定目标页面的各第一页面元素的内容覆盖区域。
这里，第一页面元素表征目标页面对应的用户界面UI树中叶子节点对应的页面元素，叶子节点为UI树中的最下级节点，第一页面元素即目标页面的最下级页面元素。第一页面元素的内容覆盖区域即为页面中在渲染函数回调时存在第一页面元素对应的页面内容的区域。确定内容覆盖区域后，可以得到内容覆盖区域的坐标、面积等信息。通常，在检测到第一页面元素的内容覆盖区域时，即可确定发生了内容绘制，可以通过确定第一次检测到内容覆盖区域时来确定首次内容绘制的用时。
S103、基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素。
其中，第二页面元素能够表征叶子节点的各层级父亲节点对应的页面元素，叶子节点可能存在一个或多个父亲节点，一个父亲节点也可以存在多个叶子节点，父亲节点的下一层级节点被称为该父亲节点的孩子节点，各个父亲节点都设置有可绘制区域，绘制的页面元素的内容通常处于可绘制区域之内。
该步骤中，基于第一页面元素的内容覆盖区域，以及各个第二页面元素的可绘制区域，可以确定目标页面当前的内容覆盖率，具体的，S103可以包括以下步骤：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
该步骤中，可以分别确定各个第二页面元素的内容覆盖率，再根据各个第二页面元素的内容覆盖率确定第二页面元素的内容覆盖率，最后根据各个最上层及的父亲节点对应的第二页面元素的内容覆盖区域及目标页面的可会知区域，确定目标页面的内容覆盖率。
由于确定第二页面元素的内容覆盖区域需要第二页面元素的孩子节点对应的页面元素的内容覆盖区域，因此，可以先利用叶子节点的内容覆盖区域，以及叶子节点的上一层级的父亲节点的可绘制区域，确定该父亲节点的内容覆盖区，再由下至上逐个层级递归确定各个第二页面元素的内容覆盖率。
示例性的，可以先确定该第二页面元素对应的父亲节点的初始内容覆盖率，具体的，可以将该第二页面元素对应的各个孩子节点的内容覆盖面积的并集，将得到的并集作为该第二页面元素的初始内容覆盖面积若第二页面元素仅包含一个孩子节点，则直接将该孩子节点的内容覆盖面积作为第二页面元素的初始内容覆盖面积。这里，取内容覆盖面积并集的孩子节点为内容节点。
得到第二页面元素的初始内容覆盖面积之后，可以确定上述初始内容覆盖面积与该第二页面元素的可绘制区域的面积的比值，得到第二页面元素的内容覆盖率。
其中，第二页面元素的可绘制区域可以是预先设定好的，第二页面元素的页面内容仅可在可绘制区域中绘制，通常，可绘制区域的面积大于或等于初始内容覆盖面。
在得到第二页面元素的内容覆盖率之后，可以根据确定的内容覆盖率及可绘制区域确定第二页面元素的内容覆盖区域，具体的，若内容覆盖率大于或等于预设的第二预设阈值，则可以直接将可绘制区域作为第二页面的内容覆盖区域，若内容覆盖率小于第二预设阈值，则可以将第二页面的内容覆盖区域设置为空。
在得到各个最上层级的父亲节点对应的第二页面元素的内容覆盖区域后，即可确定其与目标页面的可绘制区域之间的面积比值，得到目标页面当前的内容覆盖率。
若第二页面元素的已绘制内容足够多，则可以视为该第二页面元素已经绘制完毕，该第二页面元素则可以被认为是有效内容，若第二页面元素的已绘制内容不足，则认为该第二页面元素是无效内容，这样，逐层递归得到最高层级的父亲节点的内容覆盖区域，再确定其并集与目标页面的可绘制区域的面积之比，即可得到目标页面的内容覆盖率。
S104、在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
该步骤中，若目标页面当前的内容覆盖率大于或等于第一预设阈值，则说明有足够多的第二页面元素都绘制了有效内容，因此，可以确定目标页面加载完成，此时即可停止加载计时，得到目标页面的加载耗时。
上述方式在页面内容较为丰富时的可靠程度较高，但在页面内容较少的情况下，即使目标页面的内容覆盖率达不到第一预设阈值，页面也可能已经加载完成，为此，可以通过以下步骤提前确定目标页面加载完成：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
该步骤中，若检测到了针对目标页面的控制操作，则说明目标页面已经处于可操作性的状态，可以判断此时目标页面已经加载完成；若检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔，则说明浏览器已经停止了对目标页面的绘制渲染，也可以说明目标页面已经加载完成。
本公开实施例通过确定第一目标页面的各个元素的内容覆盖区域，以及各个第二页面元素的可绘制区域，确定目标页面的内容覆盖率，并根据内容覆盖率确定目标页面是否加载完成，实现整体加载页面的目标页面加载时长确定。
参见图2所示，为本公开实施例所提供的另一种页面加载时长计算方法的流程图，上述方法首先响应于加载触发事件，在每次检测到数据帧的渲染函数回调时，递归遍历UI树中的各个节点，并计算每个内容节点的内容覆盖率，最终得到目标页面的内容覆盖率，当内容覆盖率符合预设阈值时停止计时，计算得到加载耗时；若检测到用户操作或绘制结束，则立即停止计时，确定目标页面的加载耗时。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与页面加载时长计算方法对应的页面加载时长计算装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面加载时长计算方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图3所示，为本公开实施例提供的一种页面加载时长计算的示意图，所述装置包括：
计时触发模块310，用于响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
第一确定模块320，用于当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
第二确定模块330，用于基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
计时停止模块340，用于在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，第二确定模块330在基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率时，用于：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
一种可选的实施方式中，所述第二确定模块330在根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域时，用于：
计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集，并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
一种可选的实施方式中，所述第二确定模块330在基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率时，用于：
基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值，确定所述第二页面元素的内容覆盖率。
一种可选的实施方式中，所述第二确定模块330在基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域时，用于：
在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下，将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
一种可选的实施方式中，所述计时停止模块340还用于：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述第一确定模块320具体用于：
在所述目标页面的转场动画播放结束后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
对应于图1中的页面加载时长计算方法，本公开实施例还提供了一种电子设备400，如图4所示，为本公开实施例提供的电子设备400结构示意图，包括：
处理器41、存储器42、和总线43；存储器42用于存储执行指令，包括内存421和外部存储器422；这里的内存421也称内存储器，用于暂时存放处理器41中的运算数据，以及与硬盘等外部存储器422交换的数据，处理器41通过内存421与外部存储器422进行数据交换，当所述电子设备400运行时，所述处理器41与所述存储器42之间通过总线43通信，使得所述处理器41执行以下指令：
响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述处理器41执行的指令中，所述基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率，包括：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
一种可选的实施方式中，所述处理器41执行的指令中，所述根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域，包括：
计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集，并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
一种可选的实施方式中，所述处理器41执行的指令中，所述基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率，包括：
基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值，确定所述第二页面元素的内容覆盖率。
一种可选的实施方式中，所述处理器41执行的指令中，所述基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域，包括：
在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下，将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
一种可选的实施方式中，所述处理器41还用于执行：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
一种可选的实施方式中，所述处理器41执行的指令中，所述当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域，包括：
在所述目标页面的转场动画播放结束后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面加载时长计算方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面加载时长计算方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种页面加载时长计算方法，其特征在于，包括：
响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
2.根据权利要求1所述的方法，其特征在于，所述基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率，包括：
针对任一所述第二页面元素，根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域；其中，所述叶子节点表征最低层级的孩子节点；
基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率；
基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域；
基于各个最上层级的所述父亲节点对应的第二页面元素的内容覆盖区域以及所述目标页面的可绘制区域，确定所述目标页面当前的内容覆盖率。
3.根据权利要求2所述的方法，其特征在于，所述根据所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域，确定所述第二页面元素的初始内容覆盖区域，包括：
计算所述第二页面元素对应父亲节点的各个下一层级的孩子节点对应的页面元素的内容覆盖区域并集，并将得到的所述内容覆盖区域并集作为所述第二页面元素的初始内容覆盖区域。
4.根据权利要求2所述的方法，其特征在于，所述基于所述第二页面元素的初始内容覆盖区域及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖率，包括：
基于所述第二页面元素的初始内容覆盖区域的面积与所述第二页面元素的可绘制区域的面积之间的比值，确定所述第二页面元素的内容覆盖率。
5.根据权利要求2所述的方法，其特征在于，所述基于所述第二页面元素的内容覆盖率以及所述第二页面元素的可绘制区域，确定所述第二页面元素的内容覆盖区域，包括：
在所述第二页面元素的内容覆盖率大于或等于第二预设阈值的情况下，将所述第二页面元素的可绘制区域作为所述第二页面元素的内容覆盖区域。
6.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在检测到针对所述目标页面的控制操作时，停止所述加载计时，得到所述目标页面的加载耗时；和/或，
在检测到当前时刻距离最后一次渲染函数回调之间的时间间隔大于或等于预设时间间隔时，停止所述加载计时，得到所述目标页面的加载耗时。
7.根据权利要求1所述的方法，其特征在于，所述当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域，包括：
在所述目标页面的转场动画播放结束后，当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域。
8.一种页面加载时长计算装置，其特征在于，包括：
计时触发模块，用于响应于目标页面的加载触发事件，对所述目标页面进行加载计时；
第一确定模块，用于当检测到指令表征目标页面的数据帧的渲染函数回调时，确定所述目标页面的各第一页面元素的内容覆盖区域；所述第一页面元素表征所述目标页面对应的用户界面UI树中，叶子节点对应的页面元素；
第二确定模块，用于基于所述第一页面元素的内容覆盖区域，以及第二页面元素的可绘制区域，确定所述目标页面当前的内容覆盖率；所述第二页面元素表征所述叶子节点的各层级父亲节点对应的页面元素；
计时停止模块，用于在所述目标页面当前的内容覆盖率大于或等于第一预设阈值时，停止所述加载计时，得到所述目标页面的加载耗时。
9.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一所述的页面加载时长计算方法的步骤。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任意一项所述的页面加载时长计算方法方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111108760.0A CN113806197B (zh) | 2021-09-22 | 2021-09-22 | 一种页面加载时长计算方法方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111108760.0A CN113806197B (zh) | 2021-09-22 | 2021-09-22 | 一种页面加载时长计算方法方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113806197A true CN113806197A (zh) | 2021-12-17 |
| CN113806197B CN113806197B (zh) | 2024-04-12 |
Family
ID=78940038
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111108760.0A Active CN113806197B (zh) | 2021-09-22 | 2021-09-22 | 一种页面加载时长计算方法方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113806197B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114896013A (zh) * | 2022-05-12 | 2022-08-12 | 北京达佳互联信息技术有限公司 | 页面加载时长确定方法、装置、电子设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130063766A1 (en) * | 2011-09-12 | 2013-03-14 | Doniel M. Lax | Page complexity analyzer |
| CN112131493A (zh) * | 2020-08-27 | 2020-12-25 | 长沙市到家悠享网络科技有限公司 | 页面首屏时间确定方法、装置、电子设备以及存储介质 |
| CN112487338A (zh) * | 2020-12-11 | 2021-03-12 | 杭州安恒信息技术股份有限公司 | 一种网页页面的fmp的确定方法、装置、设备及介质 |
-
2021
- 2021-09-22 CN CN202111108760.0A patent/CN113806197B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130063766A1 (en) * | 2011-09-12 | 2013-03-14 | Doniel M. Lax | Page complexity analyzer |
| CN112131493A (zh) * | 2020-08-27 | 2020-12-25 | 长沙市到家悠享网络科技有限公司 | 页面首屏时间确定方法、装置、电子设备以及存储介质 |
| CN112487338A (zh) * | 2020-12-11 | 2021-03-12 | 杭州安恒信息技术股份有限公司 | 一种网页页面的fmp的确定方法、装置、设备及介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114896013A (zh) * | 2022-05-12 | 2022-08-12 | 北京达佳互联信息技术有限公司 | 页面加载时长确定方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113806197B (zh) | 2024-04-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8769398B2 (en) | Animation control methods and systems | |
| JP2021511592A (ja) | アプリケーションプログラム処理方法、装置、記憶媒体及びコンピュータデバイス | |
| CN107908336B (zh) | 列表控件的刷新方法、装置、存储介质及终端 | |
| JP2016508268A (ja) | 個人専用リアル・タイム推奨システム | |
| US20090327965A1 (en) | Selection of items in a virtualized view | |
| WO2014086210A1 (zh) | 触摸屏解锁方法及装置 | |
| US10620974B2 (en) | Gallery control with dynamically determined control template replica sizes | |
| CN111767002B (zh) | 页面展示方法、装置、设备及存储介质 | |
| WO2014137948A1 (en) | Data visualization | |
| CN103902258A (zh) | 一种在网页中实现自定义菜单显示的方法及装置 | |
| WO2023035793A1 (zh) | 一种关卡信息的展示方法、装置、计算机设备及存储介质 | |
| CN110990435A (zh) | 数据同步方法、装置和计算机可读存储介质 | |
| CN106708478B (zh) | 滚动视图显示方法及装置 | |
| CN113806197A (zh) | 一种页面加载时长计算方法方法及装置 | |
| CN103677893B (zh) | 开机的映像文件的大小缩减方法及运算装置 | |
| CN115080016A (zh) | 基于ue编辑器的扩展功能实现方法、装置、设备及介质 | |
| CN111857854A (zh) | 关机资源加载方法、装置、存储介质和电子设备 | |
| CN114138292A (zh) | 一种系统升级方法、存储介质及终端设备 | |
| CN111381745B (zh) | 页面切换方法、装置、设备 | |
| CN111767206B (zh) | 一种内容单元露出呈现率的统计方法、装置及电子设备 | |
| CN111951355A (zh) | 一种动画处理方法、装置、计算机设备及存储介质 | |
| CN113342420A (zh) | 一种固件配置方法、装置、设备及存储介质 | |
| CN110955473A (zh) | 显示加载提示信息的方法及装置 | |
| CN110393913A (zh) | 一种在触摸终端上执行用户操作的方法及设备 | |
| CN107239391B (zh) | 一种应用程序的测试方法、装置及终端 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |