CN114254222A - 一种统计单页应用的可交互时间的方法、装置及电子设备 - Google Patents

Abstract

本发明实施例公开一种统计单页应用的可交互时间的方法、装置及电子设备，涉及数据处理领域，该方法包括：电子设备在接收到用户输入的请求的情况下，可以通过系统网络请求获取文件信息；之后可以根据文件信息建立节点树；并且，可以确定节点树中不同批节点的渲染时间和权重；以及可以确定系统网络请求的信息；之后，电子设备可以根据每一批节点的渲染时间、权重和系统网络请求的信息确定可交互时间。本发明实施例，可以提高单页应用的可交互时间的计算准确性。

Description

一种统计单页应用的可交互时间的方法、装置及电子设备

技术领域

本发明涉及数据处理领域，尤其涉及一种统计单页应用的可交互时间的方法、装置及电子设备。

背景技术

随着万维网(world wide web，WWW)技术的发展，相关的网络(Web)应用也越来越广泛。如单页Web应用，对于单页Web应用，浏览器一开始会加载必须的超文本标记语言(hypertext markup language，HTML)文本、层叠样式表(cascading style sheets，CSS)文件、脚本(javascript，JS)文件等文件，之后可以通过JS脚本动态生成页面元素(节点)并渲染用户界面。

Web应用的性能(如界面加载速度等)关系到用户的点击率以及留存率等。因此，在Web应用的测试阶段以及上线阶段可以通过一些评估指标对Web应用的性能进行评估，以便可以监控Web应用的性能，进而可以采取相应措施，对其进行优化，提高用户的体验。其中，Web应用的一个重要评估指标为可交互时间(time to interactive，TTI)。

目前，对于传统的Web应用，其主要的用户界面内容通过HTML文本预先写好，也即是页面元素(如文本(txet)标签节点、段落(paragraph，p)标签节点等)都已经在HTML文本中预先写好。当HTML文本渲染完成，用户即可以进行正常的交互，因此，可以通过浏览器提供的事件接口(application programming interface，API)进行监控，如文档加载事件(DOMContentLoaded)。当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件会被触发，因此，当该事件被触发时，可以确定TTI。但对于单页应用，由于单页Web应用的用户界面的大部分内容通过JS脚本等动态生成并渲染出来，HTML文本只包含用户界面的小部分内容。因此，通过浏览器的事件接口确定的TTI不准确。

发明内容

本发明实施例公开了一种统计单页应用的可交互时间的方法、装置及电子设备，用于提高单页应用的可交互时间的计算准确性。

第一方面公开一种统计单页应用的可交互时间的方法，该统计单页应用的可交互时间的方法可以应用于电子设备，也可以应用于电子设备中的模块(例如，芯片)，下面以应用于电子设备为例进行描述。该方法可以包括：在接收到用户输入的请求的情况下，根据该用户输入的请求通过系统网络请求获取文件信息；根据该文件信息建立节点树；确定该节点树中不同批节点的渲染时间和权重；确定该系统网络请求的信息；根据该渲染时间、该权重和该系统网络请求的信息确定TTI。

本发明实施例中，电子设备在接收到用户的输入请求的情况下，可以通过系统网络请求获取必要的文件信息，之后可以通过文件信息构建节点树。并且，电子设备可以监控节点树的节点变化，在监控到节点变化的情况下，可以统计该批节点的渲染时间以及权重。电子设备还可以监控自身网络请求，获取系统网络请求的信息，之后，可以根据每一批节点的渲染时间、每一批节点的权重和系统网络请求的信息确定可交互时间。可见，通过监控节点的变化以及监控网络请求，得到每一批节点的渲染时间、每一批节点的权重和系统网络请求的信息，然后计算可交互时间，可以提高单页应用的可交互时间的计算准确性。

作为一种可能的实施方式，该节点树包括N批节点，N为正整数；该确定该节点树中不同批节点的渲染时间和权重包括：获取该节点树中每个节点的渲染时间和标识，渲染时间相同的节点属于同一批节点；根据该节点的标识确定属于同一批节点的权重。

本发明实施例中，电子设备可以获取节点树中每一个节点的渲染时间以及标识，其中，渲染时间相同的节点属于同一批节点，之后，可以通过节点的标识确定每一批节点的权重，以便计算可交互时间。

作为一种可能的实施方式，该根据该节点的标识确定属于同一批节点的权重包括：根据该节点的标识确定该节点在该节点树中的深度；根据该节点的深度确定该节点的权重；将属于同一批次的节点的权重和确定为同一批节点的权重。

本发明实施例中，由于节点的深度越大，其对于页面的渲染可能越重要(即对页面内容的呈现以及用户的交互越重要)，因此，节点的权重与节点的深度有关(例如，节点的权重可以为节点的深度)。电子设备可以根据节点的标识确定节点的深度，进而可以根据节点的深度确定节点的权重，并可以将同一批次节点的权重和确定为该批节点的权重，以便计算可交互时间。

作为一种可能的实施方式，该根据该节点的标识确定属于同一批节点的权重包括：根据该节点的标识与权重之间的对应关系，确定该标识对应的节点的权重；将属于同一批次的节点的权重和确定为同一批节点的权重。

本发明实施例中，由于不同类别的节点对于页面的渲染(即对页面内容的呈现以及用户的交互)重要程度不一样，因此，不同类别的节点对应的权重不一样，越重要的节点对应的权重越大，节点的标识与节点的权重存在对应关系。因此，电子设备可以根据节点的标识确定节点的权重，并可以将同一批次的所有节点的权重和确定为该批节点的权重，以便计算可交互时间。

作为一种可能的实施方式，该系统网络请求的信息包括该系统网络请求的起始时间和结束时间，该根据该渲染时间、该权重和该系统网络请求的信息确定TTI包括：根据该渲染时间、该权重、该起始时间和该结束时间确定TTI。

作为一种可能的实施方式，该确定该系统网络请求的信息包括：获取网络请求的信息，该网络请求的信息包括M个网络请求的起始时间和结束时间，该M个网络请求包括该系统网络请求，M为正整数；将该M个网络请求中最早的网络请求的起始时间确定为该系统网络请求的起始时间；根据该M个网络请求的起始时间和结束时间确定大于或等于阈值的空闲时间，将该空闲时间的起始时间确定为该系统网络请求的结束时间。

本发明实施例中，电子设备可以获取所有网络请求的起始时间以及结束时间，之后可以将所有网络请求中最早的网络请求的起始时间确定为系统网络请求的起始时间。同时，由于网络请求中可以包括系统网络请求和用户网络请求，而用户网络请求与系统网络请求之间存在较长的空闲时间，因此可以通过设定一个阈值，在空闲时间大于或等于阈值情况下，将空闲时间之前的最后一个网络请求的结束时间(即空闲时间的起始时间)确定为系统网络请求的结束时间，从而得到准确的系统网络请求的结束时间。

作为一种可能的实施方式，该根据该渲染时间、该权重、该起始时间和该结束时间确定TTI包括：在该结束时间之前不存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之后的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后不存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间确定为第一时间，该结束时间之后的渲染波峰对应的时间确定为第二时间；在该第一时间与该结束时间的差值的绝对值小于或等于该第二时间与该结束时间的差值的绝对值的情况下，将该第一时间与该起始时间之间的差值确定为TTI；在该第一时间与该结束时间的差值的绝对值大于该第二时间与该结束时间的差值的绝对值的情况下，将该第二时间与该起始时间之间的差值确定为TTI。

本发明实施例中，电子设备可以先判断在结束时间之前和之后是否存在权重不为0的批节点，在判断出在结束时间之前存在权重不为0的批节点，在结束时间之后不存在权重不为0的批节点的情况下，表明在系统网络请求的结束时间之前与视窗内容(即用户页面可见的内容)相关的节点已经渲染完成，可以将结束时间之前的渲染波峰对应的时间与起始时间之间的差值确定为可交互时间；在判断出在结束时间之前不存在权重不为0的批节点，在结束时间之后存在权重不为0的批节点的情况下，表明在系统网络请求的结束时间之后与视窗内容相关的节点才开始渲染，可以将结束时间之后的渲染波峰对应的时间与起始时间之间的差值确定为可交互时间；在判断出在结束时间之前存在权重不为0的批节点，在结束时间之后也存在权重不为0的批节点的情况下，表明在结束时间之前以及之后都有节点渲染，可以将距离结束时间较近的渲染波峰对应的时间与起始时间之间的差值确定为可交互时间。

第二方面公开一种统计单页应用的可交互时间的装置，该装置可以为电子设备，也可以为电子设备中的模块(例如，芯片)。该装置可以包括：获取单元，用于在接收到用户输入的请求的情况下，根据该用户输入的请求通过系统网络请求获取文件信息；建立单元，用于根据该文件信息建立节点树；确定单元，用于确定该节点树中不同批节点的渲染时间和权重；该确定单元，还用于确定该系统网络请求的信息；该确定单元，还用于根据该渲染时间、该权重和该系统网络请求的信息确定TTI。

作为一种可能的实施方式，该节点树包括N批节点，N为正整数；该确定单元确定该节点树中不同批节点的渲染时间和权重包括：获取该节点树中每个节点的渲染时间和标识，渲染时间相同的节点属于同一批节点；根据该节点的标识确定属于同一批节点的权重。

作为一种可能的实施方式，该确定单元根据该节点的标识确定属于同一批节点的权重包括：根据该节点的标识确定该节点在该节点树中的深度；根据该节点的深度确定该节点的权重；将属于同一批次的节点的权重和确定为同一批节点的权重。

作为一种可能的实施方式，该确定单元根据该节点的标识确定属于同一批节点的权重包括：根据节点与权重之间的对应关系，确定该标识对应的节点的权重；将属于同一批次的节点的权重和确定为同一批节点的权重。

作为一种可能的实施方式，该系统网络请求的信息包括该系统网络请求的起始时间和结束时间，该确定单元根据该渲染时间、该权重和该系统网络请求的信息确定TTI包括：根据该渲染时间、该权重、该起始时间和该结束时间确定TTI。

作为一种可能的实施方式，该获取单元，还用于获取网络请求的信息，该网络请求的信息包括M个网络请求的起始时间和结束时间，该M个网络请求包括该系统网络请求，M为正整数；该确定单元确定该系统网络请求的信息包括：将该M个网络请求中最早的网络请求的起始时间确定为该系统网络请求的起始时间；根据该M个网络请求的起始时间和结束时间确定大于或等于阈值的空闲时间，将该空闲时间的起始时间确定为该系统网络请求的结束时间。

作为一种可能的实施方式，该确定单元根据该渲染时间、该权重、该起始时间和该结束时间确定TTI包括：在该结束时间之前不存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之后的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后不存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间确定为第一时间，该结束时间之后的渲染波峰对应的时间确定为第二时间；在该第一时间与该结束时间的差值的绝对值小于或等于该第二时间与该结束时间的差值的绝对值的情况下，将该第一时间与该起始时间之间的差值确定为TTI；在该第一时间与该结束时间的差值的绝对值大于该第二时间与该结束时间的差值的绝对值的情况下，将该第二时间与该起始时间之间的差值确定为TTI。

第三方面公开一种电子设备，该电子设备可以包括存储器、处理器和通信模块，该通信模块用于与其它电子设备以及服务器进行通信；该存储器，用于存储计算机程序，该计算机程序包括程序指令；当该处理器执行该存储器存储的计算机程序时，使得该处理器执行第一方面或第一方面的任一实施方式公开的统计单页应用的可交互时间的方法。

第四方面公开一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序或计算机指令，当该计算机程序或计算机指令运行时，实现如上述各方面公开的统计单页应用的可交互时间的方法。

第五方面公开一种芯片，包括处理器，用于执行存储器中存储的程序，当程序被执行时，使得芯片执行上面的方法。

作为一种可能的实施方式，存储器位于芯片之外。

第六方面公开一种计算机程序产品，该计算机程序产品包括计算机程序代码，当该计算机程序代码被运行时，使得上述统计单页应用的可交互时间的方法被执行。

附图说明

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

图1是本发明实施例公开的一种网络架构示意图；

图2是本发明实施例公开的一种节点树示意图；

图3是本发明实施例公开的一种节点树、CSS规则树以及渲染树的示意图；

图4是本发明实施例公开的一种统计单页应用的可交互时间的方法的流程示意图；

图5是本发明实施例公开的一种网络请求的示意图；

图6是本发明实施例公开的一种渲染信息的示意图；

图7是本发明实施例公开的另一种渲染信息的示意图；

图8是本发明实施例公开的一种统计单页应用的可交互时间的装置的结构示意图；

图9是本发明实施例公开的一种电子设备的结构示意图。

具体实施方式

本发明实施例公开了一种统计单页应用的可交互时间的方法、装置及电子设备，用于提高单页应用的可交互时间的计算准确性。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或者特性可以包含在本实施例申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是相同的实施例，也不是与其它实施例互斥的独立的或是备选的实施例。本领域技术人员可以显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。本申请的说明书和权利要求书及所述附图中术语“第一”、“第二”、“第三”等是区别于不同的对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元，或者可选地，还包括没有列出的步骤或单元，或者可选地还包括这些过程、方法、产品或设备固有的其它步骤或单元。

附图中仅示出了与本申请相关的部分而非全部内容。在更加详细地讨论示例性实施例之前，应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

在本说明书中使用的术语“部件”、“模块”、“系统”、“单元”等用于表示计算机相关的实体、硬件、固件、硬件和软件的组合、软件或执行中的软件。例如，单元可以是但不限于在处理器上运行的进程、处理器、对象、可执行文件、执行线程、程序和/或分布在两个或多个计算机之间。此外，这些单元可从在上面存储有各种数据结构的各种计算机可读介质执行。单元可例如根据具有一个或多个数据分组(例如来自与本地系统、分布式系统和/或网络间的另一单元交互的第二单元数据。例如，通过信号与其它系统交互的互联网)的信号通过本地和/或远程进程来通信。

为了更好地理解本发明实施例，下面先对本发明实施例使用的网络架构进行描述。

请参阅图1，图1是本发明实施例公开的一种网络架构示意图。如图1所示，该网络架构可以包括服务器和电子设备。服务器可以包括一个或多个服务器(图1中示意出了一个)。电子设备可以包括一个或多个电子设备(图1中示意出了一个)。

如图1所示，电子设备与服务器之间可以进行通信，以便于电子设备可以与服务器之间进行数据的传输。

需要说明的是，图1所示的网络架构中不限于仅包括图中所示的电子设备以及服务器。

应理解，图1所示的网络架构只是示例性说明，并不对其构成限定。

可以理解的是，电子设备可以为终端设备。其中，终端设备可以称之为用户设备(user equipment，UE)、移动台(mobile station，MS)、移动终端(mobile terminal，MT)等，是一种可以向用户提供数据连通性的设备。终端设备可以为手持终端、笔记本电脑、可穿戴设备(如智能手表、智能手环、计步器等)，车载设备(如汽车、高铁等)、虚拟现实(virtualreality，VR)设备、增强现实(augmented reality，AR)设备、工业控制(industrialcontrol)中的无线终端、智能家居设备(如冰箱、电视、空调、电表等)、智能机器人、无人驾驶(self driving)中的无线终端、远程手术(remote medical surgery)中的无线终端、智能电网(smart grid)中的无线终端、运输安全(transportation safety)中的无线终端、智慧城市(smart city)中的无线终端，或智慧家庭(smart home)中的无线终端、飞行设备(如智能机器人、无人机等)或其他可以接入网络的设备。

服务器可以为计算机设备，计算机设备包括但不限于终端设备或云服务器。本发明实施例提供的方法可以由计算机设备执行。

为了更好地理解本发明实施例，下面先对本发明实施例的相关技术进行描述。

电子设备可以接收用户作用于键盘的输入操作(输入请求)，如接收用户输入的一个网址(即统一资源定位器(uniform resource locator，URL))，之后，响应于用户的输入，电子设备可以向服务器发送用于请求资源的请求。相应地，服务器可以接收到电子设备发送的请求，之后，服务器可以根据该请求向电子设备发送对应的资源，资源可以包括超文本标记语言(hypertext markup language，HTML)文件、可扩展超文本标记语言(extensiblehypertext markup language，XHTML)文件、可扩展标记语言(extensible markuplanguage，XML)文件、层叠样式表(cascading style sheets，CSS)文件和脚本(javascript，JS)文件以及必要的初始化数据等。之后，当电子设备接收到服务器发送的资源，会开始解析相应的资源，然后渲染显示用户界面(即呈现在电子设备屏幕上的页面)。

文档对象模型(document object model，DOM)是中立于平台和语言的标准编程接口。可以通过程序和脚本动态地访问和更新文档(如HTML文档、XML文档)的内容、结构、样式。比如，在网络(Web)应用开发中，通过JS脚本(即JS代码程序)来访问、创建、删除或者修改HTML的文档结构。Web应用也可以理解为提供服务的各种网站。

多页Web应用(multi page application，MPA)，简称多页应用，指有多个独立的页面的应用，每个页面必须重新加载JS、CSS等相关资源，才能完成页面的渲染显示。多页应用的页面跳转，服务器后台都会返回一个新的HTML文档，需要整页资源刷新。

单页Web应用(single page application，SPA)，简称单页应用，指的是使用单个HTML文档实现多个页面切换和功能的应用。这些不同的页面只有一个HTML文档作为入口，在开始只需加载一次HTML、JS、CSS等相关资源，然后使用JS脚本完成页面元素(节点)的生成以及渲染。单页应用的页面跳转，就是切换相关组件，仅刷新局部资源，也即是通过JS脚本等修改页面元素以及渲染显示页面。因此，单页应用的页面切换较快，用户的体验较好。

对于HTML文本，也可以称为HTML文档，HTML文档可以包括HTML标签(如文本(txet)标签、段落(paragraph，p)标签)及文本内容。HTML标签也可以称作HTML元素，HTML文档也可以称作Web页面。HTML文档中所有内容可以都看作节点，整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，每个注释是注释节点。整个HTML文档可以看作一棵节点树，也可以称为DOM树(tree)。请参见图2，图2是本发明实施例公开的一种节点树示意图。如图2所示，整个HTML文档可以是文档(document)标签节点，也可以简称为文档节点，文档节点可以是节点树的根节点。超文本标记语言(html)标签节点可以是文档节点的一个子节点，相应地，文档节点是html节点的父节点。同理，html标签节点可以是文档头部(head)标签节点和文档主体(body)标签节点的父节点，标题(title)标签节点可以是head标签节点的子节点；body标签节点可以是p标签节点和划分(division，div)标签节点的父节点，相应地，它们可以是body标签节点的子节点；div标签节点可以是text标签节点的父节点，text标签节点可以是div节点的子节点。同一级的标签节点可以称为兄弟节点，也可以称为同胞节点(如head节点和body节点)。标签节点也可以简称为节点。

节点树中所有节点可以通过JS脚本进行访问、修改等，因此可以动态的修改文档的结构，从而改变节点树的结构。

应理解，图2所示的节点树只是示例性说明，并不对其构成限定。

Web应用呈现整个页面的过程，会经历解析HTML文本，构建节点树；解析CSS文件，构建CSS树；并且在构建节点树以及CSS树的同时会进行页面的渲染，也即是一边进行资源(包括HTML文本、CSS文件)的解析一边进行渲染显示页面内容。下面对电子设备的页面呈现过程进行详细说明，以便更好地理解本发明实施例。

第一步：电子设备接收到服务器发送的资源。如果该资源包括有HTML文本，电子设备可以对HTML文本进行解析，构建一棵节点树。其中，可以把html标签解析为节点树的标签节点，例如，可以将段落(<p>)标签解析为节点树的一个节点。如果该资源包括有CSS文件，电子设备可以对CSS文件进行解析，构建一棵CSS树。CSS树也可以称为CSS规则树(CSS ruletree)，还可以称为CSS对象模型(CSS object model，CSSOM)树。其中，节点树和CSS树的生成可以是同时进行的，并且节点树以及CSS树的生成过程中可能会被JS脚本的加载执行阻塞，JS脚本可能会增加节点树的节点、修改节点树的结构以及修改CSS树的结构等。

第二步：电子设备可以根据节点树和CSSOM树来生成渲染树(render tree)。渲染树包括标签节点颜色、尺寸等显示属性。并且，渲染树是用于显示页面的，呈现给用户，因此，Web页面不显示的元素可以不包括在渲染树中，例如head标签节点等。除此之外，由于显示(display)属性为无(none)的标签节点不会显示在页面中，因此，这些标签节点也可以不包括在渲染树中，可以理解为这些标签节点不参与渲染树的构建。

请参见图3，图3是本发明实施例公开的一种节点树、CSS规则树以及渲染树的示意图。如图3所示，根据图3中的节点树以及CSS规则树可以构建出渲染树。其中，图3所示的节点树的构建可以参考上述节点树的相关描述，在此不再详细赘述。图3所示节点树除了文档节点、html节点、head节点、body节点以及p节点之外，还可以包括链接(<link>)节点、图像(<img>)节点、跨区域段(<span>)节点、文本节点(“你好，小明”)以及文本节点(“小红”)。CSS规则树主要包括一些样式规则，如body节点的字体大小(font-size)可以为16像素(pixel，px)；p节点的font-size可以为16px，字体大小(font-weight)可以为粗体(bold)；span节点的font-size可以为16px，显示属性(display)可以为无(none)；img节点的font-size可以为16px，浮动属性(float)可以为右(right)。如图3所示，根据上述节点树以及CSS规则树可以构建出渲染树，渲染树中主要包括与页面显示内容有关的节点。如body节点以及body节点的样式规则(font-size：16px)；p节点的样式规则(font-size：16px，font-weight：bold)以及文本内容(“你好，小明”)；img节点的样式规则(font-size：16px，float：right)。

第三步：电子设备构建渲染树之后，根据渲染树可以知道网页中有哪些节点、各个节点的样式规则(CSS属性)以及各个节点之间的关系。因此，电子设备只需要知道渲染树每个节点的具体页面位置(即在电子设备屏幕的显示页面上的位置)跟大小信息，就可以显示页面。因此，在得到渲染树之后，电子设备可以进行布局(layout)，也即是计算每个节点在屏幕中的位置。其中，电子设备进行页面布局基本过程可以是以电子设备可见区域(显示区域)为画布，左上角为(0,0)基础坐标，从左到右，从上到下从DOM的根节点开始渲染，首先通过计算确定显示元素(节点)的大小跟位置。并且，如果当前显示元素有子元素可以先确定子元素的显示信息。在布局结束后，电子设备可以确定每一个元素的位置和大小。

第四步：电子设备确定了每一个元素(节点)的位置和大小之后，可以进行绘制(渲染)，显示页面内容，也即是电子设备通过浏览器的渲染引擎可以遍历渲染树，然后可以通过用户界面(user interface，UI)后端层可以绘制每个节点。绘制完成之后，电子设备页面(即浏览器页面)就可以显示完整的内容。

需要说明的是，上述这个过程是逐步完成的，但为了更好的用户体验，电子设备并不会等到所有的资源文件(如HTML文档、CSS文件等)都解析完成之后再去构建和布局渲染树，而是解析完一部分文件就显示一部分内容，同时，可能还在通过网络下载其它资源，以便可以尽可能早的将内容呈现到用户界面上。具体地，电子设备的节点树的构建以及CSS树的构建可以是同步进行的，并且，渲染树的构建以及布局绘制也可以是在构建渲染树和CSS树的同时进行的。

应理解，图3所示的节点树、CSS规则树以及渲染树只是示例性说明，并不对其构成限定。

TTI也可以称为用户可交互时间，指的是用户从打开一个Web应用开始到用户界面有内容呈现并且用户可以进行正常的交互(如点击、输入等)操作(即应用已进行视觉渲染并能可靠响应用户输入)的一个时间段。TTI也可以理解为从浏览器处理当前网页的启动时间(navigation start)开始到用户界面有大部分内容显示并且用户可以进行正常的交互需要的时间。TTI还可以理解为从电子设备发送第一个系统网络请求开始到用户界面有大部分内容显示并且用户可以进行正常的交互需要的时间。TTI作为一个重要的性能评估指标，其计算的准确性极其重要。如果TTI计算准确，便可以监控Web应用的性能，进而可以采取相应措施，对其进行优化，提高用户的体验。

基于上述网络架构，请参阅图4，图4是本发明实施例公开的一种统计单页应用的可交互时间的方法的流程示意图。如图4所示，该统计单页应用的可交互时间的方法可以包括以下步骤。

401.电子设备通过系统网络请求获取文件信息。

电子设备在接收到用户输入的请求的情况下，可以通过系统网络请求获取文件信息。具体地，电子设备可以接收用户输入的请求(如用户输入的一个网址)，之后，电子设备可以根据用户输入的请求向服务器发送系统网络请求，系统网络请求可以携带用户输入的请求(如URL)，系统网络请求可以为超文本传输协议(hyper texttransfer protocol，HTTP)请求，系统网络请求可以理解为电子设备为获取初始资源(即渲染初始页面的资源)向服务器发送的网络请求。HTTP请求，也可以称为HTTP请求报文，其可以包括请求消息行(request line)、请求消息头部(request header)、请求消息正文(请求体)等。其中，请求消息行中可以包括用户输入的URL，也即是请求的资源路径。相应地，服务器可以接收到来自电子设备的HTTP请求。之后，服务器可以根据接收到的HTTP请求确定对应路径的资源并向电子设备发送对应的HTTP响应。HTTP响应，也可以称为HTTP响应报文，其可以包括响应消息行(responseline)、响应消息头(responseheader)、响应消息正文(响应体)。其中，响应头可以包括此次响应的时间、此次响应返回的文件长度、文件类型等信息，响应消息正文中可以包括服务器返回给电子设备(客户端)的文件信息(即各种文件资源，如HTML文档、JS脚本等)。

402.电子设备根据文件信息建立节点树。

电子设备在获取到文件信息之后，也即是获取到各种资源之后，可以解析资源建立节点树。具体地，电子设备可以解析服务器返回的文件信息构建节点树，如电子设备可以解析HTML文档内容，将HTML文档的标签节点添加到节点树上，以及可以运行JS脚本，构建节点树。同时，电子设备在构建节点树的同时还可以进行节点的渲染，显示用户界面内容。节点树也可以称为DOM树。

举例说明，电子设备获取的文件信息可以为一个HTML文档，其文档内容可以为：

<！DOCTYPE html>

<html>

<head>

<link rel＝"stylesheet"type＝"text/css"href＝"mystyle.css">

</head>

<body>

<p>你好，小明<span>小红</span></p>

<imgsrc＝"smiley-2.gif"alt＝"smiley face">

</body>

</html>

其中，上述HTML文档的第一行<！DOCTYPE html>元素可以声明当前HTML文档的版本为HTML5，<html>元素可以是HTML文档页面的根元素，<head>元素可以包括所有的头部标签元素，如可以插入样式文件(CSS文件)，及各种元(meta)信息。上述<link>元素可以链接到样式表，定义文档与外部资源之间的关系，href＝"mystyle.css"可以定义样式文件的位置(URL)。<body>元素可以包括可见的页面内容。<body>元素包括的<p>元素可以定义一个段落，其可以包括内容(“你好，小明”)，并且该内容可以显示在电子设备的浏览器的网页中(即用户界面)，<p>元素中还可以包括<span>元素，其可以用于对段落中的内容进行组合，将<p>元素中的文本的一部分独立出来，如将段落的部分内容(“小红”)独立出来。上述文档还可以包括<img>元素，其可以定义HTML页面中的图像，用于在电子设备的浏览器的网页中显示图像，其中，src＝"smiley-2.gif"可以规定图像的URL，也即是图像资源的地址，alt＝"smiley face"可以规定图像的替代文本("smiley face")，即无图像显示时可以在页面上显示的文本。HTML元素可以包括一对成对的标签，比如上述文档中的<html>和</html>，以及<p>和</p>等，其中，标签对中的第一个标签是开始标签，第二个标签是结束标签。HTML的元素也可以包括一个非成对的标签，比如<(换行)br>标签，也即是<br>元素。

电子设备可以根据上述HTML文档构建一棵节点树，具体地，电子设备可以按照从上到下，从左到右的顺序依次解析HTML文档的内容，当解析到<！DOCTYPE html>元素时，可以构建节点树的第一个节点，也即是文档(document)节点，当解析到<html>元素时可以在文档节点下面构建一个子节点，即超文本标记语言(html)节点。之后，当电子设备解析到<head>元素时，可以在html节点下面构建一个head子节点，之后，电子设备可以解析到<link>元素，然后可以在head节点下面增加一个link节点。再之后，电子设备可以解析到<body>元素，然后可以在html节点下面增加一个body节点，之后，可以解析到<p>元素，可以在body节点下面新增p节点，之后，可以解析到文本“你好，小明”，电子设备可以在p节点下面新增一个文本节点(“你好，小明”)，之后，电子设备可以解析到<span>元素，可以在p节点下新增span节点，之后，电子设备可以解析到文本“小红”，可以在span节点下新增文本节点(“小红”)，再之后，电子设备可以解析到<img>元素，可以在body节点下面新增img节点，当解析到</html>就表明解析完了整个HTML文档，可以构建出如图3中所示的节点树。

需要说明的是，电子设备可以根据HTML元素的起始标签以及结束标签确定新增的节点在节点树中的位置，如，<p>你好，小明<span>小红</span></p>，可见<span>元素可以包括在<p>元素内，因此，span节点可以是p节点的子节点。电子设备还可以运行JS脚本，根据JS脚本构建节点树，例如，可以通过JS脚本(如createElement函数)在上述p节点下新增一个span节点及相应的文本内容。

403.电子设备确定节点树中不同批节点的渲染时间和权重。

在电子设备接收到服务器返回的文件信息之后，电子设备可以对节点的变化进行监控，以便确定节点树中不同批节点的渲染时间和权重。其中，电子设备对节点(节点树中的节点)的监控可以通过变动观察器(MutationObserver)完成，MutationObserver是一个可以监听节点树结构变化的接口，可以监听节点的增减、节点的修改、属性的变动、文本内容的变动等。

由于节点树的构建和节点树中的节点的渲染可以是同步进行的，因此，可以将节点的生成时间作为节点的渲染时间(即节点进行渲染在页面上的显示时间)。其中，通过变动观察器监控节点新增时，其每次被触发时得到的结果可以是一批节点新增的结果，也即是其返回的结果中可以包括节点树中多个新增的节点。因此，当通过MutationObserver监控到节点树的变化(节点的新增变化)时，也即是监控到一批次节点新增时，可以记录当前触发时间，可以把当前触发时间作为该一批次节点的新增时间，也可以把当前触发时间作为该一批次节点的渲染时间，以及可以递归统计该批次节点的权重和，权重和也即是该批次每一个节点的累加权重。变动观察器每一次触发返回的结果中可以包括一批节点，因此，同一批次的节点可以理解为变动观察器一次触发时返回的结果中包括的所有节点，并且，同一批节点的渲染时间是相同的，也即是渲染时间相同的节点属于同一批节点。

具体地，该节点树可以包括有N个批次的节点，包括第一批次节点、第二批次节点、…、第N批次节点，N为正整数。其中，N个批次节点的渲染时间关系可以为：第一批次节点的渲染时间早于第二批次节点，第二批次节点的渲染时间早于第三批次节点，同理，第N-1批次节点的渲染时间早于第N批次节点的渲染时间。电子设备在分别监控到第一批次节点、第二批次节点、…、第N批次节点新增(即将节点新增到节点树中)的情况下，可以将该批次节点新增的时间(即MutationObserver触发的时间)保存到本地，并将该时间确定为该批次节点的渲染时间，此外，还可以从MutationObserver接口返回的结果中获取该批次节点中每个节点的标识，之后，可以根据节点的标识确定该批次节点的权重。可见，电子设备可以获取节点树中每个节点的渲染时间和标识，之后，可以根据节点的标识确定属于同一批节点的权重。

在一种情况下，节点的权重与节点本身有关，不同的节点对应的权重可能不同。节点与权重之间可以存在对应关系。因此，电子设备可以根据节点与权重之间的对应关系，确定该节点的标识对应的节点的权重，之后，将属于同一批次的所有节点的权重和确定为同一批节点的权重。节点的标识可以为节点的类型，如text节点、div节点。其中，权重的设置规则可以为：对页面内容的呈现以及用户的交互越重要的节点(如text节点等，其主要负责呈现页面的文本内容)，其权重可以设定为一个较大的值；对页面内容的呈现以及用户的交互不重要的节点(如div节点)，其权重可以设定为一个较小的值。例如text节点对应的权重可以为5，按钮(button)节点对应的权重可以为4、div节点对应的权重可以为2等。因此，电子设备本地可以存储有权重索引表，其包括不同节点与权重的对应关系。请参见表1，表1为本发明实施例公开的一种权重索引表。如表1所示，其中，表格的每一行包括有一个标签类型以及对应标签的权重，每一个节点可以对应有一个标签类型。电子设备通过相应的节点的标识可以确定对应节点的权重，以便确定每一批次节点的权重。例如，第一批次节点包括一个div节点、两个text节点以及一个button节点。通过表1可以确定text节点的权重为5、button节点的权重为4、div节点的权重为2。因此，第一批次节点的权重和为2+5+5+4＝16。

标签类型	权重
		text	5
img	5
		button	4
div	2
		…	…
link	0

表1

在另一种情况下，由于节点的深度越深，其对于页面的渲染可能越重要(即对页面内容的呈现以及用户的交互越重要)，在此种情况下，节点的权重与节点的深度有关。因此，电子设备可以根据节点的标识确定节点在节点树中的深度，然后根据节点的深度确定节点的权重，之后将属于同一批次的节点的权重和确定为同一批节点的权重。节点的标识可以为节点的父节点的父节点的标签(即HTML标签)+节点的父节点的标签+节点自身的标签(如：图2所示节点树中text节点的标识可以为body-div-text)，以便确定节点的深度。其中，节点的深度与节点的权重之间的对应关系可以为：节点的权重可以为节点的深度，根节点的权重可以为0，子节点的权重可以为父节点的权重加一，也可以为父节点的权重乘以一个大于1的整数，还可以为其它值(如父节点的权重+兄弟节点的数量)，子节点的权重可以大于父节点的权重。例如，如图2所示的节点树中，节点的权重等于节点的深度，因此，文档(document)节点的深度为0，其权重可以为0；html节点的深度为1，其权重可以为1；head节点以及body节点的深度为2，其权重可以为2。因此，针对每一批次的节点，可以先确定该批次每一个节点的节点深度，然后将节点深度作为对应的节点的权重，之后，将每一个节点的权重相加，得到该批次节点的权重。

在又一种情况下，节点的权重与节点本身和节点深度有关。由于上述根据节点的深度和节点的重要程度确定节点的权重仅考虑了单一的一个方面，因此，电子设备还可以根据节点的深度和节点自身的重要程度综合确定节点的权重。例如，每个节点的权重可以为上述两种情况确定的权重的相加。具体地，每个不同的节点对应有不同的权重，电子设备本地可以存储有节点与权重之间的对应关系，如权重索引表。其中，text节点对应的权重可以为5，img节点对应的权重可以为4等。此外，还可以根据节点的深度确定节点的权重，如节点的深度等于节点的权重。因此，一个深度为4的text节点的权重可以为5+4＝9。

需要说明的是，在计算一批次节点的权重和时，针对该批次的每一个节点(页面元素)，可以先判断当前节点布局是否在电子设备视窗内，也即是是否在Web页面可见范围内(即是否在显示范围内)，由于不在视窗内的内容渲染对于用户来说是没有感知的，因此，如果判断出节点不在视窗内，则在计算该批次节点的权重和时可以不考虑该节点，也即是不累加该节点的权重。

404.电子设备确定系统网络请求的信息。

电子设备接收用户输入的请求之后，可以向服务器发送系统网络请求(如HTTP请求)，以便获取资源(如HTML文本、CSS文件等)。当获取到资源文件之后，浏览器会对资源文件进行解析，渲染出用户页面。在获取完初始所有资源文件后，电子设备会停止发送网络请求，之后可以在接收用户输入(如点击网页上的链接)的情况下，再向服务器发送用户网络请求。其中，系统网络请求可以理解为电子设备获取初始资源(即渲染初始页面的资源)的网络请求，用户网络请求可以理解为在页面渲染大部分完成之后(即页面可交互的情况下)，接收用户作用于页面的输入操作发送的网络请求。系统网络请求之间的时间间隔较短，并且同时可以存在多个系统网络请求。由于电子设备的系统网络请求时间较短，多个系统网络请求之间的时间间隔较短，而人的平均最快反应时间为0.2秒，因此从用户界面(Web页面)显示出可以触发网络请求的内容(如url链接)到用户进行触发(如点击url链接)之间，有一段网络请求空闲时间，也即是系统网络请求与用户网络请求之间存在空闲时间。

电子设备可以监控网络请求，获取网络请求的信息。网络请求的信息可以包括电子设备每一个网络请求的起始时间和结束时间。电子设备可以根据网络请求的信息确定系统网络请求的起始时间以及系统网络请求的结束时间。其中，电子设备对网络请求的监控可以通过资源计时器(PerformanceResourceTiming)完成，PerformanceResourceTiming是一个可以监听网络请求的接口，可以监听加载资源的详细网络计时数据以及监听HTTP请求等。

具体地，电子设备获取的网络请求的信息可以包括M个网络请求的起始时间和结束时间，M个网络请求可以包括系统网络请求，也可以包括用户网络请求，M为正整数。M个网络请求可以包括第一网络请求、第二网络请求、…、第M网络请求。其中，M个网络请求的时间关系可以为：第一网络请求的起始时间早于第二网络请求的起始时间，第二网络请求的起始时间早于第三网络请求的起始时间，同理，第M-1网络请求的起始时间早于第M网络请求的起始时间。电子设备可以将M个网络请求中最早的网络请求的起始时间确定为系统网络请求的起始时间，也即是将第一网络请求的起始时间确定为系统网络请求的起始时间。

由于系统网络请求与用户网络请求之间存在空闲时间，因此，可以通过设定阈值确定系统网络请求的结束时间。由于人的平均最快反应时间为0.2秒，因此，阈值的设定需要大于或等于0.2秒。电子设备可以根据M个网络请求的起始时间和结束时间确定大于或等于阈值的空闲时间，可以将空闲时间的起始时间确定为系统网络请求的结束时间。具体地，电子设备可以从第一网络请求开始，判断是否出现大于阈值的空闲时间。如果出现了大于或等于阈值的空闲时间(即没有网络请求的时间)，可以将空闲时间的起始时间确定为系统网络请求的结束时间。因此，通过网络请求的信息可以确定系统网络请求的结束时间。请参见图5，图5是本发明实施例公开的一种网络请求的示意图。如图5所示，t₀是系统网络请求的起始时间，也即是第一个系统网络请求的起始时间，从t₀开始，在t₁到t₂之间没有网络请求，出现了一段空闲时间，并且t₁-t₂大于等于0.2秒。因此，电子设备可以将空闲时间的起始时间，也即是t₁确定为系统网络请求的结束时间。

应理解，图5所示的网络请求的示意图只是示例性说明，并不对其构成限定。

405.电子设备根据渲染时间、权重和系统网络请求的信息确定TTI。

系统网络请求的信息可以包括系统网络请求的起始时间和结束时间。电子设备可以根据系统网络请求的起始时间、系统网络请求的结束时间、每一批节点的渲染时间以及每一批节点的权重确定TTI。

具体地，电子设备可以先判断在系统网络请求的结束时间之前和系统网络请求的结束时间之后是否存在权重不为0的批节点(即一批次节点，包括第一批次节点、第二批次节点等)，在判断出在系统网络请求的结束时间之前存在权重不为0的批节点，在系统网络请求的结束时间之后不存在权重不为0的批节点的情况下，表明在系统网络请求的结束时间之前与视窗内容(即用户页面可见的内容)相关的节点已经渲染完成。并且，由于权重最大的一批节点绘制完成，用户页面已经显示了大部分的内容，可以理解为此时用户可以进行正常的交互(如输入操作、点击操作)，因此，可以根据权重最大的一批节点对应的时间确定可交互时间。即电子设备可以将系统网络请求的结束时间之前的渲染波峰对应的时间与系统网络请求的起始时间之间的差值确定为可交互时间。其中，不存在权重不为0的批节点存在两种情况，一种情况是不存在批节点，另一种情况是存在批节点，但批节点的权重为0。渲染波峰，也即是所有批次节点的权重中最大的权重。

请参见图6，图6是本发明实施例公开的一种渲染信息的示意图。渲染信息也即是每一批节点的渲染时间以及每一批节点的权重。图6横坐标为时间，纵坐标为权重(即权重和)。如图6所示，t₁为系统网络请求的结束时间，t₀为系统网络请求的起始时间，在系统网络请求的结束时间t₁之前没有权重不为0的时间点，表明t₁之前没有新增节点渲染，在系统网络请求的结束时间t1之后，存在权重和不为0的节点，节点的权重最大值为w₁，对应的时间为t₃，也即是渲染波峰对应的时间为t₃，因此，可以将t₃-t₀确定为可交互时间。

在判断出在系统网络请求的结束时间之前不存在权重不为0的批节点，在系统网络请求的结束时间之后存在权重不为0的批节点的情况下，表明在系统网络请求的结束时间之后与视窗内容相关的节点才开始渲染，电子设备可以将系统网络请求的结束时间之后的渲染波峰对应的时间与系统网络请求的起始时间之间的差值确定为可交互时间。

在判断出在系统网络请求的结束时间之前存在权重不为0的批节点，在系统网络请求的结束时间之后也存在权重不为0的批节点的情况下，表明在系统网络请求的结束时间之前以及之后都有节点渲染。在此种情况下，由于渲染波峰对应的时间与系统网络请求的结束时间距离越近，该时间越有可能已经完成了用户视窗内(即用户可见的Web页面)的页面内容渲染，并且页面内容的渲染是解析系统网络请求获取的初始必要资源(如HTML文档、JS脚本)而完成的。如果渲染波峰在系统网络请求的结束时间之后，同时渲染波峰对应的时间与系统网络请求的结束时间距离很远，该渲染波峰可能不是由系统网络请求获取的初始资源渲染得到的，而是由之后用户网络请求获取的资源渲染而生成的，如通过异步JS和XML(asynchronous javascriptand XML，ajax)请求获取的数据。因此，可以将距离结束时间较近的渲染波峰对应的时间与起始时间之间的差值确定为可交互时间。

具体地，电子设备可以将系统网络请求的结束时间之前的渲染波峰对应的时间确定为第一时间，系统网络请求的结束时间之后的渲染波峰对应的时间确定为第二时间；然后判断第一时间与系统网络请求的结束时间的差值的绝对值和第二时间与系统网络请求的结束时间的差值的绝对值的大小，在第一时间与系统网络请求的结束时间的差值的绝对值小于或等于第二时间与系统网络请求的结束时间的差值的绝对值的情况下，表明第一时间已经完成了大部分页面内容的渲染，可进行用户交互，可以将第一时间与系统网络请求的起始时间之间的差值确定为TTI；在第一时间与系统网络请求的结束时间的差值的绝对值大于第二时间与系统网络请求的结束时间的差值的绝对值的情况下，表明第二时间已经完成了大部分页面内容的渲染，可进行用户交互，将第二时间与系统网络请求的起始时间之间的差值确定为TTI。

请参见图7，图7是本发明实施例公开的另一种渲染信息的示意图。图7横坐标为时间，纵坐标为权重(即权重和)。如图7所示，t₁为系统网络请求的结束时间，t₀为系统网络请求的起始时间，在系统网络请求的结束时间t₁之前有渲染波峰w₂，对应时间为t₄，在系统网络请求的结束时间t₁之后也有渲染波峰w₃，对应时间为t₅，因此可以比较t₄和t₅与t₁差值的绝对值，其中，|t₄-t₁|<|t₅-t₁|，因此可以将t₄与系统网络请求的起始时间的差值t₄-t₀确定为TTI。

应理解，图6、图7所示的渲染信息的示意图只是示例性说明，并不对其构成限定。

可见，电子设备可以通过监控解析资源的过程以及监控网络请求(即对页面元素(节点树的节点)及网络(network)请求(如HTTP请求)进行监控)，得到系统网络请求的起始时间、系统网络请求的结束时间，以及每一批次节点的渲染时间和权重，以便可以更加准确的确定用户可交互时间。可以理解的是，电子设备也可以将部分信息(如每一批次节点的渲染时间和权重、系统网络请求的起始时间、系统网络请求的结束时间等)发送给服务器，之后由服务器来计算TTI。电子设备还可以将TTI计算之后，将计算得到的结果返回给服务器。

其中，上述方法可以通过JS脚本(即一段JS代码)实现。由于不同浏览器的性能可能不一样，以及不同电子设备的网络性能不一样，因此可以监控多个电子设备，获得多个电子设备针对单个Web应用的TTI，并求取它们TTI的平均值作为最终的TTI，使得到的TTI更加的准确、可信，并能够反应平均水平。可以理解的是，针对单页应用，通过上述方法可以有效的收集单页应用下所有页面的可交互时间。之后，可以根据TTI值，对Web应用的性能进行评估，以便进行Web应用的优化。

基于上述网络架构，请参阅图8，图8是本发明实施例公开的一种统计单页应用的可交互时间的装置的结构示意图。其中，该装置可以为电子设备，也可以为电子设备中的模块。

如图8所示，该装置可以包括：

获取单元801，用于在接收到用户输入的请求的情况下，通过系统网络请求获取文件信息；

建立单元802，用于根据该文件信息建立节点树；

确定单元803，用于确定该节点树中不同批节点的渲染时间和权重；

该确定单元803，还用于确定该系统网络请求的信息；

该确定单元803，还用于根据该渲染时间、该权重和该系统网络请求的信息确定TTI。

在一个实施例中，该节点树包括N批节点，N为正整数；该确定单元803确定该节点树中不同批节点的渲染时间和权重包括：

获取该节点树中每个节点的渲染时间和标识，渲染时间相同的节点属于同一批节点；

根据该节点的标识确定属于同一批节点的权重。

在一个实施例中，该确定单元803根据该节点的标识确定属于同一批节点的权重包括：

根据该节点的标识确定该节点在该节点树中的深度；

根据该节点的深度确定该节点的权重；

将属于同一批次的节点的权重和确定为同一批节点的权重。

在一个实施例中，该确定单元803根据该节点的标识确定属于同一批节点的权重包括：

根据节点与权重之间的对应关系，确定该标识对应的节点的权重；

将属于同一批次的节点的权重和确定为同一批节点的权重。

在一个实施例中，该系统网络请求的信息包括该系统网络请求的起始时间和结束时间，该确定单元803根据该渲染时间、该权重和该系统网络请求的信息确定TTI包括：根据该渲染时间、该权重、该起始时间和该结束时间确定TTI。

在一个实施例中，该获取单元801，还用于获取网络请求的信息，该网络请求的信息包括M个网络请求的起始时间和结束时间，该M个网络请求包括该系统网络请求，M为正整数；

该确定单元803确定该系统网络请求的信息包括：

将该M个网络请求中最早的网络请求的起始时间确定为该系统网络请求的起始时间；

根据该M个网络请求的起始时间和结束时间确定大于或等于阈值的空闲时间，将该空闲时间的起始时间确定为该系统网络请求的结束时间。

在一个实施例中，该确定单元803根据该渲染时间、该权重、该起始时间和该结束时间确定TTI包括：

在该结束时间之前不存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之后的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；

或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后不存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间与该起始时间之间的差值确定为TTI；

或者，在该结束时间之前存在权重不为0的批节点，和在该结束时间之后存在权重不为0的批节点的情况下，将该结束时间之前的渲染波峰对应的时间确定为第一时间，该结束时间之后的渲染波峰对应的时间确定为第二时间；

在该第一时间与该结束时间的差值的绝对值小于或等于该第二时间与该结束时间的差值的绝对值的情况下，将该第一时间与该起始时间之间的差值确定为TTI；在该第一时间与该结束时间的差值的绝对值大于该第二时间与该结束时间的差值的绝对值的情况下，将该第二时间与该起始时间之间的差值确定为TTI。

有关上述获取单元801、建立单元802以及确定单元803更详细的描述可以直接参考上述图4所示的方法实施例中电子设备的相关描述直接得到，这里不加赘述。

基于上述网络架构，请参阅图9，图9是本发明实施例公开的一种电子设备的结构示意图。如图9所示，该电子设备可以包括处理器901、存储器902和通信模块903。该电子设备还可以包括显示屏904。存储器902可以是独立存在的，也可以通过总线与处理器901、通信模块903和显示屏904相连接。存储器902也可以和处理器901集成在一起。其中，总线904用于实现这些组件之间的连接。通信模块903可以用于与服务器进行通信。电子设备可以解析服务器返回的资源，在显示屏904上输出用户页面(渲染页面)。存储器902，可以用于存储计算机程序代码，计算机程序代码可以包括程序指令，处理器901可以用于调用程序指令。

在一个实施例中，存储器902中存储的计算机程序指令被执行时，该处理器901用于控制获取单元801执行上述实施例中执行的操作。该处理器901还用于执行上述实施例中建立单元802以及确定单元803执行的操作，通信模块903用于执行上述实施例中获取单元801执行的操作。

本发明实施例还公开一种计算机可读存储介质，其上存储有指令，该指令被执行时执行上述方法实施例中的方法。

本发明实施例还公开一种包括指令的计算机程序产品，该指令被执行时执行上述方法实施例中的方法。

以上所述的具体实施方式，对本申请的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施方式而已，并不用于限定本申请的保护范围，凡在本申请的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本申请的保护范围之内。

Claims (10)

1.一种统计单页应用的可交互时间TTI的方法，其特征在于，包括：

在接收到用户输入的请求的情况下，根据所述用户输入的请求通过系统网络请求获取文件信息；

根据所述文件信息建立节点树；

确定所述节点树中不同批节点的渲染时间和权重；

确定所述系统网络请求的信息；

根据所述渲染时间、所述权重和所述系统网络请求的信息确定TTI。

2.根据权利要求1所述的方法，其特征在于，所述节点树包括N批节点，N为正整数；所述确定所述节点树中不同批节点的渲染时间和权重包括：

获取所述节点树中每个节点的渲染时间和标识，渲染时间相同的节点属于同一批节点；

根据所述节点的标识确定属于同一批节点的权重。

3.根据权利要求2所述的方法，其特征在于，所述根据所述节点的标识确定属于同一批节点的权重包括：

根据所述节点的标识确定所述节点在所述节点树中的深度；

根据所述节点的深度确定所述节点的权重；

将属于同一批次的节点的权重和确定为同一批节点的权重。

4.根据权利要求2所述的方法，其特征在于，所述根据所述节点的标识确定属于同一批节点的权重包括：

根据节点与权重之间的对应关系，确定所述标识对应的节点的权重；

将属于同一批次的节点的权重和确定为同一批节点的权重。

5.根据权利要求1-4任一项所述的方法，其特征在于，所述系统网络请求的信息包括所述系统网络请求的起始时间和结束时间，所述根据所述渲染时间、所述权重和所述系统网络请求的信息确定TTI包括：

根据所述渲染时间、所述权重、所述起始时间和所述结束时间确定TTI。

6.根据权利要求5所述的方法，其特征在于，所述确定所述系统网络请求的信息包括：

获取网络请求的信息，所述网络请求的信息包括M个网络请求的起始时间和结束时间，所述M个网络请求包括所述系统网络请求，M为正整数；

将所述M个网络请求中最早的网络请求的起始时间确定为所述系统网络请求的起始时间；

根据所述M个网络请求的起始时间和结束时间确定大于或等于阈值的空闲时间，将所述空闲时间的起始时间确定为所述系统网络请求的结束时间。

7.根据权利要求5所述的方法，其特征在于，所述根据所述渲染时间、所述权重、所述起始时间和所述结束时间确定TTI包括：

在所述结束时间之前不存在权重不为0的批节点，和在所述结束时间之后存在权重不为0的批节点的情况下，将所述结束时间之后的渲染波峰对应的时间与所述起始时间之间的差值确定为TTI；

或者，

在所述结束时间之前存在权重不为0的批节点，和在所述结束时间之后不存在权重不为0的批节点的情况下，将所述结束时间之前的渲染波峰对应的时间与所述起始时间之间的差值确定为TTI；

或者，

在所述结束时间之前存在权重不为0的批节点，和在所述结束时间之后存在权重不为0的批节点的情况下，将所述结束时间之前的渲染波峰对应的时间确定为第一时间，所述结束时间之后的渲染波峰对应的时间确定为第二时间；

在所述第一时间与所述结束时间的差值的绝对值小于或等于所述第二时间与所述结束时间的差值的绝对值的情况下，将所述第一时间与所述起始时间之间的差值确定为TTI；在所述第一时间与所述结束时间的差值的绝对值大于所述第二时间与所述结束时间的差值的绝对值的情况下，将所述第二时间与所述起始时间之间的差值确定为TTI。

8.一种统计单页应用的可交互时间TTI的装置，其特征在于，包括：

获取单元，用于在接收到用户输入的请求的情况下，根据所述用户输入的请求通过系统网络请求获取文件信息；

建立单元，用于根据所述文件信息建立节点树；

确定单元，用于确定所述节点树中不同批节点的渲染时间和权重；

所述确定单元，还用于确定所述系统网络请求的信息；

所述确定单元，还用于根据所述渲染时间、所述权重和所述系统网络请求的信息确定TTI。

9.一种电子设备，其特征在于，包括：存储器、处理器和通信模块；其中：

所述通信模块用于与其它电子设备进行通信；

所述存储器，用于存储计算机程序，所述计算机程序包括程序指令；

所述处理器用于调用所述程序指令，使得所述电子设备执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序或计算机指令，当所述计算机程序或计算机指令被运行时，实现如权利要求1-7任一项所述的方法。

Images