CN108322359A - 一种页面首屏时间的获取方法和装置 - Google Patents

Abstract

本说明书实施例提供一种页面首屏时间的获取方法和装置，其中的方法包括：在接收到服务器根据页面请求返回的页面时，在页面中的DOM节点注入时间获取标签，该标签用于触发获取页面渲染到DOM节点时的时间戳；执行页面的渲染过程，其中，当渲染到所述DOM节点时，执行对应的时间获取标签，得到对应DOM节点的时间戳；选取页面的各个DOM节点中的目标节点对应的时间戳作为第一时间；将第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送页面请求的时间。

Description

一种页面首屏时间的获取方法和装置

技术领域

本公开涉及计算机技术领域，特别涉及一种页面首屏时间的获取方法和装置。

背景技术

首屏时间(First Screen Time)，是指用户看到第一屏显示完整的时间，该第一屏即整个网页顶部大小为当前屏幕窗口的区域。首屏时间对用户体验有着很大的影响，可以衡量页面是否能在用户耐心消磨完之前展示出来，影响着用户的使用满意度。因此，页面首屏时间一直是提升页面性能的重要参考指标，监控获取用户打开产品时准确的首屏时间是十分重要的事情。

相关技术中，对于页面首屏时间的获取，较多的方案是启用一个定时器，定时截取屏幕的画面，对各个时间点的截图进行对比，当页面截图比较不再变化时，则认为首屏已经加载完成，得到页面首屏时间。

发明内容

有鉴于此，本公开提供一种页面首屏时间的获取方法和装置，以使得首屏时间的获取更加准确。

具体地，本说明书一个或多个实施例是通过如下技术方案实现的：

第一方面，提供一种页面首屏时间的获取方法，所述方法包括：

在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

第二方面，提供一种页面首屏时间的获取装置，所述装置包括：

脚本注入模块，用于在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

时间获取模块，用于执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

节点确定模块，用于选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

时间计算模块，用于将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

第三方面，提供一种页面首屏时间的获取设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

本说明书一个或多个实施例的页面首屏时间的获取方法和装置，通过使用webview给页面注入时间获取标签的方式来记录页面渲染过程的时间点，可以低消耗、高精度的获取页面首屏的时间，并且，不依赖于页面截屏像素颜色信息，对有动画、轮播图等动态页面也可以准确的测量。

附图说明

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

图1为本说明书一个或多个实施例提供的一种页面首屏时间的获取方法；

图2为本说明书一个或多个实施例提供的一种页面首屏时间的获取装置；

图3为本说明书一个或多个实施例提供的一种页面首屏时间的获取装置。

具体实施方式

为了使本技术领域的人员更好地理解本说明书一个或多个实施例中的技术方案，下面将结合本说明书一个或多个实施例中的附图，对本说明书一个或多个实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是一部分实施例，而不是全部的实施例。基于本说明书一个或多个实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本公开保护的范围。

页面首屏时间是浏览器显示第一屏页面所消耗的时间，以800*600像素尺寸为例，从开始加载到浏览器页面显示高度达到600像素且此区域内有内容显示的时间。本说明书一个或多个实施例提供了一种页面首屏时间的获取方法，该方法能够高精度的获取到页面首屏时间，以更好的监控首屏时间的指标。

图1为本说明书一个或多个实施例提供的一种页面首屏时间的获取方法，该方法可以由用于加载和渲染页面的浏览器执行。例如，在移动端设备上，可以通过Webview来渲染页面，该页面首屏时间的获取方法也可以由Webview执行。如图1所示，该方法可以包括如下处理：

在步骤100中，接收服务器根据页面请求返回的页面。

例如，在用户点击了页面显示选项，或者输入了页面地址时，Webview可以向服务器请求页面信息。服务器可以根据该页面请求，向Webview返回页面。该页面可以是HTML页面文档。

在步骤102中，在页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳。

本步骤中，根据W3C的HTMLDOM标准，HTML页面文档中的所有内容都是节点。例如，整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，等。HTMLDOM将HTML页面文档视作树结构，这种结构被称为节点树，也叫DOM树(HTMLDOM Tree)。DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素可被修改，也可以创建或删除节点。本步骤中，Webview可以修改DOM树中的各个DOM节点。

例如，Webview既可以向页面中的所有DOM节点注入时间获取标签，也可以只向页面中预定数量的多个DOM节点注入时间获取标签，该预定数量的多个DOM节点至少包括页面首屏中的节点。比如，在向节点注入时，可以沿着DOM树由上到下的顺序依次进行注入，一般情况下，页面首屏的DOM节点的数量不超过50个，所以，当注入的节点数量达到50个时，可以认为已经为页面首屏中的各个DOM节点实现了时间获取标签的注入。

本步骤中，时间获取标签的作用可以是用于触发获取页面渲染到所述DOM节点时的时间戳，比如，在页面渲染的过程中，当渲染到该DOM节点时，执行该时间获取标签，即可得到渲染到该节点时的时间。实际实施中，可以在每个DOM节点的div结束处添加script标签，例如，<script>window.timeArr.push(newDate().gettime())</script>。这样，在页面渲染时，执行到该DOM节点处时，可以执行上述script标签就可以得到对应的时间戳。

此外，在本步骤中，Webview还可以获取页面首屏显示对应的屏幕高度，并存储所述屏幕高度。例如，如果用户在通过自己的手机屏幕显示页面首屏，那么这个高度可以是手机显示屏的高度，该屏幕高度可以用像素表示，比如600像素。通过Webview提前获取和缓存屏幕高度，可以在后续的步骤中直接拿来使用，处理上可以更加快速。

在步骤104中，执行页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳。

例如，Webview可以解析页面，构建DOM树。其中，当构建到DOM树中的其中一个DOM节点时，如果该节点的结束处添加了时间获取标签，就可以执行该标签，得到对应该DOM节点的时间戳。一个DOM节点对应的时间戳，可以用来表示当页面渲染到该DOM节点时的时间。

在步骤106中，选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间。

如上面的步骤104所述，页面中的多个DOM节点都得到了对应的时间戳，那么哪一个时间戳可以表示页面首屏加载结束的时间，可以是由所述的多个DOM节点中找到最节点屏幕高度的节点。比如，仍以手机为例，手机的屏幕高度是600像素，可以获取每个DOM节点距离手机屏幕的顶部之间的距离，这个距离越接近600像素，越能够接近首屏加载结束的时间，当然，要找到最接近600像素的节点，作为目标节点。该目标节点的时间戳即能够表示页面首屏加载结束的时间，可以将该目标节点对应的时间戳称为第一时间。

例如，可以按照如下方式获得目标节点：

可以获取页面中的各个DOM节点分别对应的屏幕距离，所述屏幕距离是所述DOM节点在显示的页面首屏中距离屏幕顶部的距离。例如，可以通过如下代码获取每个DOM节点离屏幕顶部的距离：dom.offset().top。并将屏幕距离最接近屏幕高度的DOM节点，作为目标节点。其中的屏幕高度可以是步骤102中Webview获取到的高度。

在步骤108中，将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

本步骤可以用第一时间减去第二时间，得到页面首屏时间。该第一时间相当于页面首屏加载结束的时间，即endTime，第二时间是页面首屏加载开始的时间，可以用发送所述页面请求的时间，相当于startTime。

其中，所述第二时间，可以按照如下方式获取：通过Web Performance API接口获取所述第二时间。例如，可以利用通用的Web Performance API中的performance.timing.responseStart作为用户请求页面的开始时间。

本方法通过使用webview给页面注入时间获取标签的方式来记录页面渲染过程的时间点，可以低消耗、高精度的获取页面首屏的时间，并且，不依赖于页面截屏像素颜色信息，对有动画、轮播图等动态页面也可以准确的测量。

为了实现上述页面首屏时间的获取方法，本说明书一个或多个实施例还提供了一种页面首屏时间的获取装置，该装置可以应用于渲染页面的浏览器比如Webview。如图2所示，该装置可以包括：脚本注入模块21、时间获取模块22、节点确定模块23和时间计算模块24。

脚本注入模块21，用于在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

时间获取模块22，用于执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

节点确定模块23，用于选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

时间计算模块24，用于将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

在一个例子中，脚本注入模块21，具体用于在所述页面中预定数量的多个DOM节点注入时间获取标签，所述预定数量的多个DOM节点至少包括页面首屏中的节点。

在一个例子中，如图3所示，该装置还可以包括：高度获取模块25，用于获取页面首屏显示对应的屏幕高度，并存储所述屏幕高度。

在一个例子中，所述高度获取模块25，还用于：获取所述各个DOM节点分别对应的屏幕距离，所述屏幕距离是所述DOM节点在显示的页面首屏中距离屏幕顶部的距离；将所述屏幕距离最接近所述屏幕高度的DOM节点，作为所述目标节点。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书一个或多个实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

上述方法实施例所示流程中的各个步骤，其执行顺序不限制于流程图中的顺序。此外，各个步骤的描述，可以实现为软件、硬件或者其结合的形式，例如，本领域技术人员可以将其实现为软件代码的形式，可以为能够实现所述步骤对应的逻辑功能的计算机可执行指令。当其以软件的方式实现时，所述的可执行指令可以存储在存储器中，并被设备中的处理器执行。

例如，对应于上述方法，本说明书一个或多个实施例同时提供一种页面首屏时间的获取设备，该设备可以包括处理器、存储器、以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器通过执行所述指令，用于实现如下步骤：

在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

本领域内的技术人员应明白，本说明书一个或多个实施例可提供为方法、系统、或计算机程序产品。因此，本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书一个或多个实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书一个或多个实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于服务端设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书一个或多个实施例的较佳实施例而已，并不用以限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开保护的范围之内。

Claims (10)

1.一种页面首屏时间的获取方法，所述方法包括：

在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

2.根据权利要求1所述的方法，所述在所述页面中的DOM节点注入时间获取标签，包括：

在所述页面中预定数量的多个DOM节点注入时间获取标签，所述预定数量的多个DOM节点至少包括页面首屏中的节点。

3.根据权利要求1所述的方法，所述方法还包括：

在执行所述页面的渲染过程之前，还获取页面首屏显示对应的屏幕高度，并存储所述屏幕高度。

4.根据权利要求3所述的方法，选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，包括：

获取所述各个DOM节点分别对应的屏幕距离，所述屏幕距离是所述DOM节点在显示的页面首屏中距离屏幕顶部的距离；

将所述屏幕距离最接近所述屏幕高度的DOM节点，作为所述目标节点。

5.根据权利要求1所述的方法，所述第二时间，按照如下方式获取：通过WebPerformance API接口获取所述第二时间。

6.一种页面首屏时间的获取装置，所述装置包括：

脚本注入模块，用于在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

时间获取模块，用于执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

节点确定模块，用于选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

时间计算模块，用于将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。

7.根据权利要求6所述的装置，

所述脚本注入模块，具体用于在所述页面中预定数量的多个DOM节点注入时间获取标签，所述预定数量的多个DOM节点至少包括页面首屏中的节点。

8.根据权利要求6所述的装置，所述装置还包括：

高度获取模块，用于获取页面首屏显示对应的屏幕高度，并存储所述屏幕高度。

9.根据权利要求8所述的装置，所述高度获取模块，还用于：

获取所述各个DOM节点分别对应的屏幕距离，所述屏幕距离是所述DOM节点在显示的页面首屏中距离屏幕顶部的距离；

将所述屏幕距离最接近所述屏幕高度的DOM节点，作为所述目标节点。

10.一种页面首屏时间的获取设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

在接收到服务器根据页面请求返回的页面时，在所述页面中的DOM节点注入时间获取标签，所述时间获取标签用于触发获取页面渲染到所述DOM节点时的时间戳；

执行所述页面的渲染过程，其中，当渲染到所述DOM节点时，执行所述时间获取标签，得到对应所述DOM节点的时间戳；

选取所述页面的各个DOM节点中的目标节点对应的时间戳，作为第一时间，所述第一时间是能够表示页面首屏加载结束的时间；

将所述第一时间与第二时间的时间差，作为页面首屏时间，所述第二时间是发送所述页面请求的时间。