CN111538885A - 页面监听方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面监听方法、装置、电子设备及存储介质，该方法可包括：在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分，将首次统计到渲染得分大于得分阈值的时刻作为页面的首次内容绘制FCP时刻。其中，有效元素为位于页面的首屏，面积大于面积阈值且包括文本的元素；有效元素或为位于页面的首屏，面积大于面积阈值且包括图片的元素；有效元素或为位于页面的首屏，面积大于面积阈值且包括文本和图片的元素。通过统计页面已加载的有效元素的数量，作为渲染得分，并将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻，无须对不同页面配置不同的FCP时刻的采集代码，降低开发成本。

Description

页面监听方法、装置、电子设备及存储介质

技术领域

本发明涉及数据处理领域，尤其涉及一种页面监听方法、装置、电子设备及存储介质。

背景技术

随着计算机互联网的快速发展，越来越多的人们利用互联网来获取信息。同时，规模庞大的互联网能够提供丰富的信息和各种各样的服务，为人们的生活提供诸多便利，页面便是互联网向用户提供信息和服务的一种主要途径。

为了方便监听页面的加载性能，需要采集页面加载的时间信息，例如页面的首次内容绘制(first contentful paint，FCP)时刻，目前常见的采集方式是在页面代码中首次绘制出可见元素的代码之后配置采集代码，采集并上报FCP时刻。这种方式需要开发人员根据页面代码确定采集代码在页面代码中的位置，不同页面的采集代码在页面代码中的位置不同，不同页面的采集代码需要开发人员分别进行确定，开发成本较高。

发明内容

本发明实施例提供了一种页面监听方法、装置、电子设备及存储介质，通过监听页面元素，确定页面加载的时间信息FCP时刻，无需对不同页面配置不同采集代码，降低了开发成本。

第一方面，本发明实施例提供了一种页面监听方法，该方法可包括：在页面的加载时段内统计所述页面已加载的有效元素的数量，作为渲染得分；所述有效元素为位于所述页面的首屏，面积大于面积阈值且包括文本的元素；所述有效元素或为位于所述页面的首屏，面积大于所述面积阈值且包括图片的元素；所述有效元素或为位于所述页面的首屏，面积大于所述面积阈值且包括文本和图片的元素；将首次统计到所述渲染得分大于得分阈值的时刻作为所述页面的FCP时刻。

本申请实施例中，通过在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分，并将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻，无须对不同页面配置不同的FCP时刻的采集代码，降低开发成本。

在一个可选的实现方式中，所述方法还包括：将所述加载时段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序；计算每两个相邻渲染得分之间的差值，并确定各个差值中的最大差值；将所述最大差值对应的两个相邻渲染得分中的后一个渲染得分的获得时间点作为所述页面的首次有意义绘制FMP时刻。

在该实现方式中，通过渲染得分，确定页面的FMP时刻，无须在页面代码中配置采集代码，进一步采集页面加载的时间信息，降低开发成本。

在一个可选的实现方式中，所述方法还包括：

确定加载所述页面的线程在所述FMP时刻之后首次处于空闲状态的目标时段，所述目标时段的时长大于或等于第一时长阈值，并将所述目标时段的起始时刻作为所述页面的TTI。

在该实现方式中，通过确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，并将目标时段的起始时刻作为页面的TTI，进一步确定页面加载的时间信息。

在一个可选的实现方式中，所述将加载所述页面的线程在所述FMP时刻之后首次出现的空闲时刻作为可交互时刻TTI，包括：

在所述FMP时刻之后，在所述线程的异步任务队列中添加M个检测任务，所述检测任务用于确定所述线程处于空闲的时段，所述M为正整数；

在所述检测任务添加到所述异步任务队列中的初始时刻和所述检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，确定所述线程在所述第一时段内处于空闲状态；

在通过所述M个检测任务首次检测到处于空闲状态的N个时段，所述N为不大于M的正整数，所述N个时段的起始时刻与结束时刻之间的第二时段的时长大于或等于所述第一时长阈值，且所述第二时段的时长与所述N个时段的时长的差小于或等于第三时长阈值的情况下，确定所述第二时段为所述目标时段。

在该实现方式中，通过在加载页面的线程中添加检测任务来检测线程处于空闲状态的时段，进而确定线程在FMP时之后首次处于空闲状态的目标时段，并将目标时段的起始时刻作为页面的TTI，准确的检测线程处于空闲的目标时段，提高确定页面的TTI的准确性。

在一个可选的实现方式中，所述在所述页面的加载时段内统计所述页面已加载的有效元素节点的数量，包括：

在所述页面的加载时段内，且在监听到所述页面新增DOM节点之后，统计所述页面已加载的有效元素的数量。

在该实现方式中，在监听到页面新增DOM节点之后，开始统计页面已加载的有效元素的数量，减少统计到得到渲染得分为0的时刻，提高统计有效元素的效率。

在一个可选的实现方式中，所述统计所述页面已加载的有效元素节点的数量，包括：

从所述页面的DOM的节点列表中查找包括所述有效元素的DOM节点，将包括所述有效元素的DOM节点的数量作为所述页面已加载的有效元素的数量。

在该实现方式中，通过从页面的DOM的节点列表中查找包括有效元素的DOM节点，并将包括有效元素的DOM节点的数量作为有效元素的数量，能准确统计页面已加载的有效元素的数量。

在一个可选的实现方式中，所述方法还包括：

将向服务器请求加载所述页面的时刻作为所述页面的加载时段的起始时刻。

在该实现方式中，将向服务器请求加载页面的时刻作为该页面的加载时段的起始时刻，并从向服务器请求加载页面的时刻起开始统计页面的渲染得分，能确保统计到渲染得分首次大于0的时刻和增长值最大的时刻，提高确定页面加载的时间信息的准确性。

第二方面，本发明实施例提供了一种页面监听装置，该页面监听装置包括：统计模块，在页面的加载时段内统计所述页面已加载的有效元素节点的数量，作为渲染得分；所述有效元素节点为位于页面首屏，面积大于面积阈值且包括文本的元素节点；所述有效元素节点或为位于页面首屏，面积大于所述面积阈值且包括图片的元素节点；所述有效元素节点或为位于页面首屏，面积大于所述面积阈值第一值且包括文本和图片的元素节点；

所述统计模块，还用于将首次统计到所述渲染得分大于得分阈值的时刻作为所述页面的FCP时刻。

在一个可选的实现方式中，所述页面监听装置还包括：

排序模块，用于将所述加载时段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序；

计算模块，用于计算每两个相邻渲染得分之间的差值，并确定各个差值中的最大差值；

所述计算模块，还用于将所述最大差值对应的两个相邻渲染得分中的后一个渲染得分的获得时间点作为所述页面的首次有意义绘制FMP时刻。

在一个可选的实现方式中，所述页面监听装置还包括：确定模块，用于确定加载所述页面的线程在所述FMP时刻之后首次处于空闲状态的目标时段，所述目标时段的时长大于或等于第一时长阈值，并将所述目标时段的起始时刻作为所述页面的TTI。

在一个可选的实现方式中，所述确定模块，具体用于：在所述FMP时刻之后，在所述线程的异步任务队列中添加M个检测任务，所述检测任务用于确定所述线程处于空闲的时段，所述M为正整数；在所述检测任务添加到所述异步任务队列中的初始时刻和所述检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，确定所述线程在所述第一时段内处于空闲状态；在通过所述M个检测任务首次检测到处于空闲状态的N个时段，所述N为不大于M的正整数，所述N个时段的起始时刻与结束时刻之间的第二时段的时长大于或等于所述第一时长阈值，且所述第二时段的时长与所述N个时段的时长的差小于或等于第三时长阈值的情况下，确定所述第二时段为所述目标时段。

在一个可选的实现方式中，所述统计单元，还用于在所述页面的加载时段内，且在监听到所述页面新增文档对象模型DOM节点之后，统计所述页面已加载的有效元素的数量。

在一个可选的实现方式中，所述统计单元，具体用于

从所述页面的DOM的节点列表中查找包括所述有效元素的DOM节点，将包括所述有效元素的DOM节点的数量作为所述页面已加载的有效元素的数量。

在一个可选的实现方式中，所述页面的加载时段的起始时刻为将向服务器请求加载所述页面的时刻。

第三方面，本发明实施例提供了一种电子设备，该电子设备包括接收器和发送器，还包括：处理器，适于实现一条或多条指令；以及，计算机存储介质，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由所述处理器加载并执行如上述第一方面以及上述第一方面中可选的实现方式的方法。

第四方面，本申请实施例提供了一种计算机程序产品，所述计算机程序产品包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如上述第一方面以及上述第一方面中可选的实现方式的方法，或如上述第二方面以及上述第二方面中可选的实现方式的方法。

第五方面，本发明实施例提供了一种计算机存储介质，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由处理器加载并执行如上述第一方面以及上述第一方面中可选的实现方式的方法。

附图说明

为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种页面监听方法的应用场景示意图；

图2为本发明实施例提供的一种页面监听方法流程图；

图3为本发明实施例提供的另一种页面监听方法流程图；

图4为本发明实施例提供的又一种页面监听方法流程图；

图5本发明实施例还提供的一种页面监听装置的结构示意图；

图6本发明实施例还提供的一种电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明实施例方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。

本发明的说明书实施例和权利要求书中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本发明实施例提供了页面监听方法。为更清楚的描述本发明的方案，下面先介绍一些与页面监听相关的知识。

超文本标记语言(hypertext marked language，HTML)是由万维网(world wideweb，WWW)的发明者创立的一种标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，如UNIX和Windows。使用HTML语言，将所需要表达的信息按一种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

HTML元素是组成HTML文档的基本对象，它是通过使用HTML标签进行定义的。HTML标签是HTML语言中最基本的单位，用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。为HTML元素提供各种附加信息的就是HTML属性，它是以"属性名＝属性值"这种名值对的形式出现，而且HTML属性总是在HTML元素的开始标签中进行定义。

根据万维网联盟(world wide web consortium，W3C)的HTML文档对象模型(document object model，DOM)标准，HTML页面中的所有内容都是节点，HTML文档是一个文档节点，HTML元素是元素节点，HTML属性是属性节点。DOM是W3C制定的标准接口规范，是一种能处理HTML文件的标准接口。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，DOM将HTML元素定义为对象，DOM接口以对象方法和对象属性的形式实现。DOM可直接调用DOM实现的方法，进行DOM操作，例如：树的每个节点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了节点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的节点和内容。

性能监测是前端页面性能的重要一环，通过监测可以确定页面性能瓶颈，从而有针对性地展开具体的优化工作。前端页面性能指标包括：首次内容绘制(first contentfulpaint，FCP)时刻，首次有意义绘制(first meaningful paint，FMP)时刻和可交互时刻(time to interactive，TTI)。

FCP时刻，是指浏览器在页面首屏首次绘制出可见元素的时刻。

FMP时刻，是指页面绘制出主要元素的时刻。页面中通常有一部分元素的重要性大于其余的元素，这部分元素为页面的主要元素。页面的主要元素通常会被浏览器优先加载出来。

可交互时刻(time to interactive，TTI)，是指页面已经渲染完成，且能够响应用户交互的时刻，因为用户与页面进行交互产生的任务会占用页面线程一段时长，因此从可交互时刻开始的一段时长内页面的线程处于空闲状态，可交互时刻通常是指页面渲染完成之后页面线程首次出现的一段空闲时间段的起始时刻。

首屏，在英文中的含义是指在折叠之后能够看到的部分，起源于出版领域，可以理解为头版。在出版领域，报纸在运输和分发过程中是被折叠起来的，所以折叠后的报纸能被看到的部分通常为报纸的重要内容，读者根据报纸的头版来决定是否购买报纸。首屏的概率延伸到互联网领域，用来指代在用户不进行任务操作的情况下页面显示的内容，例如在用户不滚动页面的情况下页面显示的内容。

本申请提供的页面监听方法，可以应用于如图1所示的应用场景中，应用环境涉及包括终端100和服务器200，终端100通过网络与服务器200通信，其中，服务器200包括代理服务器、站点服务器和后台服务器。终端100通过代理服务器向站点服务器发送网页加载请求，通过代理服务器向站点服务器请求页面资料，终端100接收代理服务器返回的网页资源，即可加载网页资源进行显示。终端在加载页面资源的过程中，监听页面加载的时间信息，例如TTI，并将时间信息发送至后台服务器。

该代理服务器和后台服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。该终端100包括但不限于笔记本计算机、台式计算机、智能电话、平板电脑等具有数据处理能力的移动终端或者固定终端。网络包括但不限于遵循诸如传输控制协议和互联网协议、用户数据报协议、超文本传输协议和/或文件传输协议配置的互联网、交互式电视网络、无线保真网络、无线局域网、局域网和/或城域网等。

图2为本发明实施例提供的一种页面监听方法流程图。如图2所示，该方法可包括：

201、页面监听装置在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分。

页面监听装置在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分。渲染得分即为页面已加载的有效元素的数量，渲染得分在页面的加载时段内随着时间的增加而增加。有效元素为位于页面首屏，面积大于面积阈值且包括文本的元素节点，有效元素或为位于页面首屏，面积大于面积阈值且包括图片的元素节点，有效元素或为位于页面首屏，面积大于面积阈值且包括文本和图片的元素节点。

面积阈值通过元素在页面上的可视面积范围确定，面积阈值可以是0，也可以是0.01、0.5、0.1316或1平方厘米，此处不做限制，具体可根据实际情况进行调整。

页面监听装置在页面加载时段内统计页面已加载的有效元素的数量。页面已加载的有效元素的数量是指截止到页面监听装置统计有效元素的数量的时刻，页面已加载的有效元素的数量。

在一种实现方式中，页面监听装置在页面的加载时段内统计页面已加载的有效元素的数量，具体为：页面监听装置在页面的加载时段内监听该页面加载的元素，并统计页面已加载的有效元素的数量。在一些实施例中，页面监听装置通过监听设备界面的元素，统计页面已加载的有效元素的数量。在另一些实施例中，页面监听装置通过监听页面的DOM的节点列表，统计该页面已加载的有效元素的数量。

在一种实现方式中，终端在页面的加载时段内，按照统计周期统计该页面已加载的有效元素的数量。在一些实施例中，统计周期根据浏览器的时钟精度确定，统计周期大于或等于浏览器的时钟精度，举例说明，Chrome浏览器一个版本的时钟精度为1毫秒，终端在使用Chrome浏览器加载页面的情况下，统计周期大于或等于1毫秒；IE9的时钟精度为4毫秒，终端在使用IE9浏览器加载页面的情况下，统计周期大于或等于4毫秒。

需要说明的是，页面的加载时段是从服务器加载页面的开始时刻至服务器完成页面加载的时刻。在一种实现方式中，页面监听装置将向服务器请求加载页面的时刻作为页面的加载时段的起始时刻，在一些实施例中，页面监听装置向服务器请求加载页面的时刻是页面监听装置向服务器发送加载页面请求的时刻，在另一些实施例中，页面监听装置向服务器请求加载页面的时刻是页面监听装置收到服务器对该加载页面请求的响应内容的时刻。

202、页面监听装置将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻。

得分阈值通过FCP时刻的含义确定，FCP时刻表示页面首次绘制出可见元素的时刻，因此得分阈值可设置为大于或等于0且小于1的数值，例如，得分阈值可以设置为0.1、0.4、0.05或其他数值，具体此处不做限制，可根据实际情况进行调整。

本申请实施例中，通过在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分，并将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻，无需对不同页面配置不同的FCP时刻的采集代码，降低开发成本。

图3为本发明实施例提供的另一种页面监听方法流程图。如图3所示，该方法可包括：

301、页面监听装置在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分。

在一种实现方式中，页面监听装置在页面的加载时段内，且页面监听装置监听到页面新增DOM节点之后，统计页面已加载的有效元素的数量。在该实现方式中，页面监听装置通过调用DOM接口，访问页面的DOM的节点列表，通过监听DOM的节点列表是否新增DOM节点，判断页面是否已经加载元素，在页面监听装置监听到页面的DOM的节点列表新增DOM节点之后，页面监听装置确定页面已经加载元素并开始统计页面的有效元素。通过该实现方式页面监听装置在页面的加载时段内，且监听到页面新增DOM节点之后，开始统计页面已加载的有效元素的数量，提高页面监听装置统计页面有效元素的效率。

在另一种实现方式中，页面监听装置在进入页面的加载时段之后，开始统计页面已加载的有效元素的数量，直至页面的加载时段结束。在该实现方式中，页面监听装置通过在进入页面的加载时段之后，开始统计页面已加载的有效元素的数量，能够保证统计有效元素的数量的精确性。

在一种实现方式中，页面监听装置统计页面的有效元素的数量，具体为：页面监听装置从页面的DOM的节点列表中查找有效元素的DOM节点，将包括有效元素的DOM节点的数量作为该页面已加载的有效元素的数量。在一些实施例中，页面监听装置通过遍历页面DOM的节点列表中所有的节点，从该页面的DOM的节点列表中确定包括有效元素的元素节点，得到包括有效元素的元素节点的数量，作为页面已加载的有效元素的数量。需要说明的是，DOM的节点列表中的一个元素节点对应HTML页面中的一个元素，因此页面的DOM的节点列表中包括有效元素的元素节点数量，表示页面已加载的有效元素。在另一些实施例中，页面监听装置从节点列表的元素节点中查找包括有效元素的元素节点，在该实施例中，页面监听装置在筛选出节点列表的元素节点之后，从节点列表的元素节点中确定包括有效元素的元素节点，得到包括有效元素的元素节点的数量，作为页面已加载的有效元素的数量。

302、页面监听装置将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻。

得分阈值通过FCP时刻的含义确定，FCP时刻表示页面首次绘制出可见元素的时刻，因此得分阈值可设置为0，也可以设置为0.1、0.4、0.05或其他数值，具体此处不做限制，可根据实际情况进行调整。

303、页面监听装置将所述加载时间段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序。

页面监听装置按时间戳从小到大的顺序对加载时段内的至少两个时刻排序，得到第一序列。终端在第一序列中每个时刻统计得到截止到每个时刻页面的渲染得分，获得至少两个渲染得分。举例说明，第一序列包括4个时刻，分别为：2019年11月28日13时28分的1秒、1.02秒、1.21秒和1.109秒，终端在1秒统计到的渲染得分为2，在1.02秒统计到的渲染得分为5，在1.21秒统计到的渲染得分为19，在1.109分统计到的渲染得分为15。终端按时间戳从小到大的顺序对该加载时段内的四个时刻排序，得到的第一序列为2019年11月28日13时28分的1秒、1.02秒、1.109秒和1.21秒。

页面监听装置将所述加载时间段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序，例如上述示例的第一序列中各个渲染得分为2、5、15和19，一个渲染得分的获得时间点，为该渲染得分在第一序列中对应的时刻。

304、页面监听装置计算每两个相邻渲染得分之间的差值，并确定各个差值中的最大差值。

页面监听装置计算第一序列中每个时刻的增长值，第一时刻为第一序列中的任一时刻，在第一时刻是第一序列的第一个时刻的情况下，第一时刻的增长值为页面监听装置在第一时刻统计得到的渲染得分；在第一时刻不是第一序列的第一个时刻的情况下，此时的第一时刻可以称为第二时刻，计算第二时刻的渲染得分与第一时刻的渲染得分的差，得到第二时刻的增长值，第一时刻为第一序列中第二时刻的前一个时刻。可见，本步骤是在确定第一序列中首个时刻的渲染得分后，根据每个前一时刻的渲染得分，计算每个后一时刻的渲染得分的增长值。每两个相邻渲染得分之间的差值对应第一序列中每两个相邻时刻的后一时刻的渲染得分的增长值。

在一种实现方式中，页面监听装置在加载时段的至少两个时刻包括第一时刻和第二时刻的情况下，且第一序列的第一个时刻为第一时刻的情况下，将第一时刻的渲染得分作为第一时刻的增长值，计算第二时刻的渲染得分与第一时刻的渲染得分的差，得到第二时刻的增长值。举例说明，页面的加载时段包括2019年11月29日9点24分的5秒和5.12秒，页面监听装置在5秒时统计得到的渲染得分为6，页面监听装置在5.12秒统计得到的渲染得分为11。在页面监听装置按时间戳从小到大的顺序对两个时刻进行排序之后，第一序列的第一个时刻为5秒，第二个时刻为5.12秒，则页面监听装置将5秒的渲染得分6作为5秒的增长值，计算5.12秒的增长值为5.12秒的渲染得分11与5秒的渲染得分6的差：11-6＝5。

305、页面监听装置将最大差值对应的两个相邻渲染得分中的后一个渲染得分的获得时间点作为该页面的FMP时刻。

具体的，页面监听装置在页面的加载时段包括第一时刻和第二时刻的情况下，页面监听装置将第一时刻的增长值和第二时刻的增长值中最大值对应的时刻作为页面的FMP时刻。最大差值对应的相邻渲染得分中的后一个渲染得分为增加值最大的时刻对应的渲染得分，最大差值对应最大的增长值。

在另一种实现方式中，在页面的加载时段包括两个以上的时刻的情况下，页面监听装置将该两个以上的时刻的所有增长值中最大值对应的时刻作为FMP时刻。

306、页面监听装置确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，目标时段的时长大于或等于第一时长阈值，并将目标时段的起始时刻作为页面的TTI。

第一时长阈值根据用户与页面进行交互占用线程的时长确定。在一种实现方式中，第一时长阈值为用户与页面进行交互占用线程的时长的最小值，用户与页面进行交互占用线程的时长的最小值为历史时长数据的最小值，该历史时长数据包括用户与页面进行交互占用线程的多个时长，该历史时长数据通过页面监听装置收集至少两次用户与页面进行交互占用线程的时长得到。在另一种实现方式中，第一时长阈值为用户与页面进行交互占用线程的平均时长，该平均时长为历史时长数据的平均值，该历史时长数据包括用户与该页面进行交互占用线程的多个时长。

需要说明的是，加载页面的线程与处理用户与页面进行交互的线程为同一个线程，在加载页面的线程处于空闲状态的情况下，加载页面的线程才能执行用户与页面进行交互产生的交互任务。

在一种实现方式中，页面监听装置确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，具体为：页面监听装置在页面的FMP时刻之后，至少两次从加载页面的线程的任务队列中获取任务，得到至少两个获取不到任务的时刻。线程的任务队列包括同步任务队列和异步任务队列，同步任务队列中的任务执行的优先级高于异步任务队列中的任务。在页面监听装置获取不到任务的情况下，页面监听装置确定在进行获取任务的获取时刻，该线程处于空闲状态。在页面监听装置将至少两个获取不到任务的获取时刻按时间戳从小到大的顺序进行排序之后，在相邻的两个获取时刻之间的第三时段的时长小于或等于第四时长阈值的情况下，页面监听装置确定在该第三时段内线程处于空闲状态。页面监听装置通过至少两个获取不到任务的时刻确定线程处于空闲状态的目标时段。在一些实施例中，第四时长阈值小于或等于线程中任务执行时长的最小值，举例说明，在线程中任务执行耗时最短为20毫秒的情况下，第四时间阈值可以是20毫秒，也可以是18毫秒、10毫秒或其他值。

在另一种实现方式中，页面监听装置确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，具体为：页面监听装置在页面的FMP时刻之后，在加载页面的线程的异步任务队列中增加检测任务，检测任务用于确定从检测任务添加到异步任务队列中的时刻至检测任务的完成时刻，线程是否处于空闲状态。在检测任务添加到异步任务队列中的时刻到检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，页面监听装置确定线程在该第一时段内处于空闲状态。页面监听装置通过检测任务确定线程处于空闲状态的目标时段。在一些实施例中，第二时长阈值为该检测任务被执行多次的平均时长。可以理解的是，在检测任务添加到异步任务队列至检测任务被完成的时长小于第二时长阈值的情况下，页面线程的同步任务队列和异步任务队列在将检测任务添加到异步任务队列之前，都没有需要执行的任务，页面线程处于空闲状态。处于空闲状态的页面线程可以马上执行检测任务，以使检测任务添加到异步任务队列至检测任务被完成的时长为该检测任务被执行的时长。

本申请实施例，通过在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分，通过渲染得分确定页面加载的FCP时刻和FMP时刻，并在FMP时刻之后进一步确定页面的TTI，通过渲染得分进一步确定页面加载的时间信息，降低开发成本。

图4为本发明实施例提供的又一种页面监听方法流程图。除上述图2和图3所示的页面监听方法，本发明实施例还可包括如图4所示的页面监听方法，该方法用于确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，该目标时段的时长大于或等于第一时长阈值，并将目标时段的起始时刻作为页面的TTI。该方法可包括：

401、页面监听装置在FMP时刻之后，在线程的异步任务队列中添加M个检测任务。

检测任务用于确定线程处于空闲的时段，M为正整数。在一些实施例中，M根据检测任务的执行时长和第一时长阈值确定，任务的执行时长为页面监听装置执行该任务的时长。M大于或等于第一时长阈值除以检测任务的执行时长得到的值。

可以理解的是，由于一个检测任务在执行时长小于第二时长阈值的情况下，页面监听装置才能确定该检测任务的执行时长内页面线程处于空闲状态，而检测任务的执行时长通常小于目标时段的时长，则页面监听装置需要多个检测任务才能检测到时长超过该目标时段的空闲时段。在M个检测任务的总执行时长大于或等于第一时长阈值的情况下，页面监听装置才能通过M个检测任务确定处于空闲状态的目标时段。需要说明的是，TTI时刻之后的一段时长，页面线程得处于空闲状态，才能实现页面与用户交互。因此，第一时长阈值是实现用户交互占用页面线程时间的阈值。

在一种实现方式中，页面监听装置将M个检测任务依次添加到异步任务队列中，页面监听装置每次在异步任务队列中添加一个检测任务，在检测到检测任务完成之后，在该异步任务队列中添加另一个检测任务，直至检测到处于空闲状态的目标时段。在该实现方式中，页面监听装置在异步任务队列中依次增加M个检测任务，页面监听装置通过每个检测任务进行检测的过程互不影响，提高页面监听装置确定线程处于空闲状态的时段的精确性。

在另一种实现方式中，检测任务执行完成之后生成一个完成标识，页面监听装置将M个检测任务按照添加周期分别添加到异步任务队里中，添加周期大于一个检测任务的执行时长小于两个检测任务的执行时长，在一个添加周期页面监听装置检测到上个添加周期的检测任务的完成标识的情况下，页面监听装置将下一个检测任务添加到线程的异步任务队列中。在该实现方式中，页面监听装置无需实时检测检测任务是否完成，提高页面监听装置在异步任务队列中增加检测任务的效率。

402、页面监听装置在检测任务添加到异步任务队列中的初始时刻和检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，确定线程在第一时段内处于空闲状态。

第二时长阈值可根据检测任务的执行时长确定。检测任务的执行时长为页面线程开始执行该检测任务至该检测任务被执行完成的时长。在一些实施例中，第二时长阈值为该检测任务被执行多次的平均时长。在另一些实施例中，第二时长阈值为该平均时长加上误差值。

可以理解的是，在第一时段的时长小于或等于第二时长阈值的情况下，加载页面的线程在第一时段内无法执行除检测任务之外的任务，因此，在第一时段的时长小于或等于第二时长阈值的情况下，加载页面的线程的任务队列在第一时段内且不添加检测任务的情况下没有任务，加载页面的线程在第一时段内处于空闲状态。

403、页面监听装置在通过M个检测任务首次检测到处于空闲状态的N个时段，N个时段的起始时刻与结束时刻之间的第二时段的时长大于或等于第一时长阈值，且第二时段的时长与N个时段的时长的差小于或等于第三时长阈值的情况下，确定第二时段为目标时段，并将第二时段的起始时刻作为页面的TTI。

其中，N为不大于M的正整数，可以理解的是，页面监听装置通过M个检测任务最多能检测到M个空闲时段，因此，N为不大于M的正整数。第三时长阈值可根据线程中任务执行的时长确定。任务的执行时长为页面线程开始执行该任务至该任务被执行完成的时长。第三时长阈值用于指示任务的平均执行时长或最小执行时长。在一些实施例中，第三时长阈值为该线程中至少两个任务的执行时长的平均值。在另一些实施例中，第三时长阈值为线程中至少两个任务的执行时长的最小值。可以理解的是，在第二时段包括线程处于空闲状态的N个时段，N个时段的时长为N个时段的时长之和，N个时段的时长小于或等于第二时段的时长，在第二时段的时长与N个时段的时长的差小于第三时长阈值的情况下，线程在第二时段内，除检测任务外无法执行完成其他任务，进而页面监听装置可确定页面线程在第二时段内处于空闲状态。

举例说明，第一时长阈值为1秒，第三时长阈值为0.1秒，页面监听装置在页面的FMP时刻之后通过检测任务检测到两个处于空闲的时段：同一分钟内的0.1秒到0.61秒和0.63秒至1.141秒，则页面监听装置确定第二时段为0.1秒至1.141秒，第二时段的时长为1.141-0.1＝1.041秒，第二时段的时长大于第一时长阈值，2个处于空闲时段的时长为(0.61-0.1)+(1.141-0.0.63)＝1.021秒，计算得到第二时段的时长与2个处于空闲状态的时长的差为1.041-1.021＝0.02秒，小于第三时长阈值，因此页面监听装置将第二时段作为目标时段，将第二时段的起始时刻0.1秒作为页面的TTI。

本申请实施例，通过在加载页面的线程中增加检测任务，来确定页面空闲的时段，并将时长大于第一时长阈值的目标时段的起始时刻作为页面的TTI，准确得到页面的TTI。

基于上述页面监听方法实施例的描述，本发明实施例还公开了一种页面监听装置。该页面监听装置可以执行图2至图4中页面监听装置执行的方法。请参见图5，页面监听装置可以运行如下模块：

统计模块501，用于在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分；有效元素为位于页面首屏，面积大于面积阈值且包括文本的元素节点；有效元素节点或为位于页面首屏，面积大于面积阈值且包括图片的元素节点；有效元素节点或为位于页面首屏，面积大于面积阈值第一值且包括文本和图片的元素节点；

统计模块501，还用于将首次统计到渲染得分大于得分阈值的时刻作为首次内容绘制FCP时刻。

本申请实施例中，通过在页面的加载时段内统计页面已加载的有效元素的数量，作为渲染得分，并将首次统计到渲染得分大于得分阈值的时刻作为页面的FCP时刻，无须对不同页面配置不同的FCP时刻的采集代码，降低开发成本。

在一种实施方式中，页面监听装置还包括：排序模块502，将所述加载时段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序；

计算模块503，用于计算每两个相邻渲染得分之间的差值，并确定各个差值中的最大差值；

计算模块503，还用于将所述最大差值对应的两个相邻渲染得分中的后一个渲染得分的获得时间点作为所述页面的首次有意义绘制FMP时刻。

在一种实施方式中，页面监听装置还包括：确定模块504，用于确定加载页面的线程在FMP时刻之后首次处于空闲状态的目标时段，目标时段的时长大于或等于第一时长阈值，并将目标时段的起始时刻作为页面的TTI。

在一个可选的实现方式中，确定模块504，具体用于：在FMP时刻之后，在线程的异步任务队列中添加M个检测任务，检测任务用于确定线程处于空闲的时段，M为正整数；在检测任务添加到异步任务队列中的初始时刻和检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，确定线程在第一时段内处于空闲状态；在通过M个检测任务首次检测到处于空闲状态的N个时段，N为不大于M的正整数，N个时段的起始时刻与结束时刻之间的第二时段的时长大于或等于第一时长阈值，且第二时段的时长与N个时段的时长的差小于或等于第三时长阈值的情况下，确定第二时段为目标时段，并将目标时段的起始时刻作为TTI。

在一个可选的实现方式中，统计单元501，还用于在页面的加载时段内，且在监听到页面新增文档对象模型DOM节点之后，统计页面已加载的有效元素的数量。

在一个可选的实现方式中，统计单元501，具体用于从页面的DOM的节点列表中查找DOM节点包括的有效元素，得到页面已加载的有效元素的数量。

在一个可选的实现方式中，所述页面的加载时段的起始时刻为将向服务器请求加载所述页面的时刻。

应理解以上页面监听装置以及分类模型训练装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。例如，以上各个模块可以为单独设立的处理元件，也可以集成同一个芯片中实现，此外，也可以以程序代码的形式存储于控制器的存储元件中，由处理器的某一个处理元件调用并执行以上各个模块的功能。此外各个模块可以集成在一起，也可以独立实现。这里的处理元件可以是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。该处理元件可以是通用处理器，例如中央处理器(英文：central processing unit，简称：CPU)，还可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(英文：application-specific integrated circuit，简称：ASIC)，或，一个或多个微处理器(英文：digital signal processor，简称：DSP)，或，一个或者多个现场可编程门阵列(英文：field-programmable gate array，简称：FPGA)等。

图6是本申请实施例提供的一种电子设备结构示意图，该电子设备600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(centralprocessing units，CPU)622(例如，一个或一个以上处理器)和存储器632，一个或一个以上存储应用程序642或数据644的存储介质630(例如一个或一个以上海量存储设备)。其中，存储器632和存储介质630可以是短暂存储或持久存储。存储在存储介质630的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器622可以设置为与存储介质630通信，在电子设备600上执行存储介质630中的一系列指令操作。电子设备600可以为本申请提供的图像处理装置。

电子设备600还可以包括一个或一个以上电源626，一个或一个以上有线或无线网络接口650，一个或一个以上输入输出接口656，和/或，一个或一个以上操作系统641，例如Windows ServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM等等。

上述实施例中由页面监听装置所执行的步骤可以基于该图6所示的电子设备结构。

此外，这里需要指出的是：本发明实施例还提供了一种计算机存储介质，且计算机存储介质中存储有前文提及的页面监听装置所执行的计算机程序，且计算机程序包括程序指令，当处理器执行程序指令时，能够执行前文图2至图4所对应实施例中对页面监听方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本发明所涉及的计算机存储介质实施例中未披露的技术细节，请参照本发明方法实施例的描述。

在本申请的实施例中提供另一种计算机程序产品，上述计算机程序产品包括程序指令，当处理器执行程序指令时，能够执行前文图2至图4所对应实施例中对页面监听方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本发明所涉及的计算机存储介质实施例中未披露的技术细节，请参照本发明方法实施例的描述。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

1.一种页面监听方法，其特征在于，包括：

在页面的加载时段内统计所述页面已加载的有效元素的数量，作为渲染得分；所述有效元素为位于所述页面的首屏，面积大于面积阈值且包括文本的元素；所述有效元素或为位于所述页面的首屏，面积大于所述面积阈值且包括图片的元素；所述有效元素或为位于所述页面的首屏，面积大于所述面积阈值且包括文本和图片的元素；

将首次统计到所述渲染得分大于得分阈值的时刻作为所述页面的首次内容绘制FCP时刻。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

将所述加载时段内获得的各个渲染得分，按照获得时间点的先后顺序依次排序；

计算每两个相邻渲染得分之间的差值，并确定各个差值中的最大差值；

将所述最大差值对应的两个相邻渲染得分中的后一个渲染得分的获得时间点作为所述页面的首次有意义绘制FMP时刻。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

确定加载所述页面的线程在所述FMP时刻之后首次处于空闲状态的目标时段，所述目标时段的时长大于或等于第一时长阈值，并将所述目标时段的起始时刻作为所述页面的可交互时刻TTI。

4.根据权利要求3所述的方法，其特征在于，

所述确定加载所述页面的线程在所述FMP时刻之后首次处于空闲状态的目标时段，包括：

在所述FMP时刻之后，在所述线程的异步任务队列中添加M个检测任务，所述检测任务用于确定所述线程处于空闲的时段，所述M为正整数；

在所述检测任务添加到所述异步任务队列中的初始时刻和所述检测任务的完成时刻之间的第一时段的时长小于或等于第二时长阈值的情况下，确定所述线程在所述第一时段内处于空闲状态；

在通过所述M个检测任务首次检测到处于空闲状态的N个时段，N个时段的起始时刻与结束时刻之间的第二时段的时长大于或等于所述第一时长阈值，且所述第二时段的时长与所述N个时段的时长的差小于或等于第三时长阈值的情况下，确定所述第二时段为所述目标时段；所述N为不大于M的正整数。

5.根据权利要求1所述的方法，其特征在于，所述在所述页面的加载时段内统计所述页面已加载的有效元素的数量，包括：

在所述页面的加载时段内，且在监听到所述页面新增文档对象模型DOM节点之后，统计所述页面已加载的有效元素的数量。

6.根据权利要求5所述的方法，其特征在于，所述统计所述页面已加载的有效元素的数量，包括：

从所述页面的DOM的节点列表中查找包括所述有效元素的DOM节点，将包括所述有效元素的DOM节点的数量作为所述页面已加载的有效元素的数量。

7.根据权利要求1-6任一项所述的方法，其特征在于，所述方法还包括：

将向服务器请求加载所述页面的时刻作为所述页面的加载时段的起始时刻。

8.一种页面监听装置，其特征在于，包括：

统计模块，用于在页面的加载时段内统计所述页面已加载的有效元素的数量，作为渲染得分；所述有效元素为位于页面首屏，面积大于面积阈值且包括文本的元素节点；所述有效元素节点或为位于页面首屏，面积大于所述面积阈值且包括图片的元素节点；所述有效元素节点或为位于页面首屏，面积大于所述面积阈值第一值且包括文本和图片的元素节点；

所述统计模块，还用于将首次统计到所述渲染得分大于得分阈值的时刻作为首次内容绘制FCP时刻。

9.一种电子设备，包括接收器和发送器，其特征在于，还包括：

处理器，适于实现一条或多条指令；以及，

计算机存储介质，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由所述处理器加载并执行如权利要求1至7任一项所述的刑侦案件的分类方法。

10.一种计算机存储介质，其特征在于，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由处理器加载并执行如权利要求1至7任一项所述的页面监听方法。

Images