CN110717121B - 一种页面首屏时间确定方法及装置 - Google Patents

一种页面首屏时间确定方法及装置 Download PDF

Info

Publication number
CN110717121B
CN110717121B CN201910797671.8A CN201910797671A CN110717121B CN 110717121 B CN110717121 B CN 110717121B CN 201910797671 A CN201910797671 A CN 201910797671A CN 110717121 B CN110717121 B CN 110717121B
Authority
CN
China
Prior art keywords
node
page
monitoring
determining
time
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.)
Active
Application number
CN201910797671.8A
Other languages
English (en)
Other versions
CN110717121A (zh
Inventor
王睿宇
程启健
任翔宇
李明忠
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing QIYI Century Science and Technology Co Ltd
Original Assignee
Beijing QIYI Century Science and Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing QIYI Century Science and Technology Co Ltd filed Critical Beijing QIYI Century Science and Technology Co Ltd
Priority to CN201910797671.8A priority Critical patent/CN110717121B/zh
Publication of CN110717121A publication Critical patent/CN110717121A/zh
Application granted granted Critical
Publication of CN110717121B publication Critical patent/CN110717121B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

本发明实施例提出的一种页面首屏时间确定方法及装置,在接收到服务器根据页面请求返回的页面文档时,触发监听,通过监听来确定每次浏览器重绘前页面文档中发生变化有新增的直接子节点的根页面元素和的子页面元素,并将有新增的直接子节点的根页面元素和子页面元素作为发生变化的子页面元素为候选页面元素,计算候选页面元素的加载时长,并根据候选页面元素中新增的节点的个数和层级数计算候选页面元素的分数和,加载时长,在监听结束后,确定分数最高的候选页面元素的加载时长作为页面首屏时间。通过本发明确定页面首屏时间只需对页面文档中发生变化有新增节点的子页面元素也就是候选页面元素进行计算即可,无需对所有页面元素均进行计算,减少了性能消耗。

Description

一种页面首屏时间确定方法及装置
技术领域
本发明实施例涉及互联网技术领域,具体涉及一种页面首屏时间确定方法及装置。
背景技术
页面性能是衡量用户上网体验的一个重要因素,其中首屏时间是反应页面性能的一个重要指标,是用户能直接感知到的时间点。
目前,世面上大多数确定首屏时间的方法都采用浏览器自带的performance API来计算。然而对于单页面Web,由于数据的异步返回,js(JavaScript)的异步加载,使得performance API的时间默认entry已经不能满足需求。
除了上述方法外,还可以通过自定义打点为页面元素添加时间戳,根据页面元素的时间戳计算加载耗时,进而确定首屏时间,但是这样的方法会造成性能模块和业务模块紧耦合,不利于SPA(single page application单页面应用)的扩展和维护。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题,本发明实施例提供了一种页面首屏时间确定方法、装置、计算机设备及存储介质。
有鉴于此,第一方面,本发明实施例提供一种页面首屏时间确定方法,包括:
在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档的根页面元素和所有子页面元素下是否有新增的直接子节点;
确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素;
计算所述候选页面元素的加载时长,并保存;
根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,并保存;
判断所述监听是否结束;
若所述监听结束,确定分数最高的候选页面元素对应的加载时长为页面首屏时间。
在一个可能的实现方式中,计算所述候选页面元素的加载时长,包括:
获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻;
获取发送所述页面请求的时刻作为第二时刻;
将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长。
在一个可能的实现方式中,根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,包括:
采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点;
按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点;
若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数;
若该新增节点不可见,则不计算该新增节点的子节点的分数;
将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数。
在一个可能的实现方式中,所述预设的节点分数计算方法,包括:
获取待计算节点的直接子节点个数,所述待计算节点为需要计算分数的节点;
确定所述待计算节点的层级数;
根据所述待计算节点的直接子节点个数和层级数按下式计算所述待计算节点的分数:
待计算节点的分数=待计算节点的直接子节点个数*层级数。
在一个可能的实现方式中,判断所述监听是否结束,包括:
获取当前时刻和触发监听的时刻,根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长,判断所述监听的时长是否小于第一预设时长,若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
判断第二预设时长内,所述监听是否监测到有新增的直接子节点的根页面元素或子页面元素,若没有监测到,则确定所述监听结束,若监测到,则确定所述监听没有结束。
在一个可能的实现方式中,所述方法还包括:
将所述页面首屏时间发送至服务器。
第二方面,本发明另一个实施例提供一种页面首屏时间确定装置,包括:
监听触发模块,用于在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档的根页面元素和所有子页面元素下是否有新增的直接子节点;
候选页面元素确定模块,用于确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素;
时长计算模块,用于计算所述候选页面元素的加载时长,并保存;
分数计算模块,用于根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,并保存;
判断模块,用于判断所述监听是否结束;
页面首屏时间确定模块,用于若所述监听结束,确定分数最高的候选页面元素对应的加载时长为页面首屏时间。
在一个可能的实现方式中,所述时长计算模块计算所述候选页面元素的加载时长,包括:
获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻;
获取发送所述页面请求的时刻作为第二时刻;
将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长。
在一个可能的实现方式中,所述分数计算模块根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,包括:
采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点;
按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点;
若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数;
若该新增节点不可见,则不计算该新增节点的子节点的分数;
将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数。
在一个可能的实现方式中,所述预设的节点分数计算方法,包括:
获取待计算节点的直接子节点个数,所述待计算节点为需要计算分数的节点;
确定所述待计算节点的层级数;
根据所述待计算节点的直接子节点个数和层级数按下式计算所述待计算节点的分数:
待计算节点的分数=待计算节点的直接子节点个数*层级数。
在一个可能的实现方式中,所述判断模块判断所述监听是否结束,包括:
获取当前时刻和触发监听的时刻,根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长,判断所述监听的时长是否小于第一预设时长,若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
判断第二预设时长内,所述监听是否监测到有新增的直接子节点的根页面元素或子页面元素,若没有监测到,则确定所述监听结束,若监测到,则确定所述监听没有结束。
在一个可能的实现方式中,所述装置还包括:
发送模块,用于将所述页面首屏时间发送至服务器。
第三方面,本发明实施例还提供一种计算机设备,包括:处理器和存储器,所述处理器用于执行所述存储器中存储的数据处理程序,以实现第一方面所述的页面首屏时间确定方法。
第四方面,本发明实施例还提供一种存储介质,所述存储介质存储有一个或者多个程序,所述一个或者多个程序可被一个或者多个处理器执行,以实现第一方面所述的页面首屏时间确定方法。
相比现有技术,本发明实施例提出的一种页面首屏时间确定方法,在接收到服务器根据页面请求返回的页面文档时,触发监听,通过监听来确定每次浏览器重绘前页面文档中有新增的直接子节点的根页面元素和子页面元素,并将有新增的直接子节点的根页面元素和子页面元素作为候选页面元素,计算候选页面元素的加载时长,并根据候选页面元素中新增的节点的个数和层级数计算候选页面元素的分数,在监听结束后,确定分数最高的候选页面元素的加载时长作为页面首屏时间。通过本发明确定页面首屏时间只需对页面文档中有新增节点的页面元素也就是候选页面元素进行计算即可,无需对所有页面元素均进行计算,减少了性能消耗。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种页面首屏时间确定方法的流程图;
图2为本发明实施例提供的一种页面首屏时间确定装置的框图;
图3为本发明实施例提供的一种计算机设备框图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明的一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。
首屏时间是指从用户发起网页浏览操作到用户使用终端的屏幕完整呈现网页内容所消耗的时间,以屏幕尺寸为800x600像素的设备为例,首屏时间指的是从用户发起网页浏览操作到设备的屏幕中页面显示高度达到600像素且此区域有内容显示所消耗的时间,其中,终端可以以各种形式来实施。例如,本发明中描述的终端可以包括诸如移动电话、智能电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、导航装置等等的终端以及诸如数字TV、台式计算机等等的固定终端。下面,假设终端是终端。然而,本领域技术人员将理解的是,除了特别用于移动目的的元件之外,根据本发明的实施方式的构造也能够应用于固定类型的终端。
从用户在浏览器输入地址(即发起网页浏览操作)到页面最终显示到浏览器中,会经过网络请求、服务器端数据处理和返回以及浏览器渲染展示的过程。
浏览器渲染的过程包括:浏览器收到服务器端返回的HTML(Hyper Text MarkupLanguage超文本标记语言)文件和响应信息后,首先HTML文件会通过HTML解析器解析成DOM(Document Object Model文档对象模型)Tree,同时css(Cascading Style Sheets层叠样式表)会通过css解析器解析成样式规则;DOM Tree和样式规则结合生成Render Tree也就是渲染树;生成渲染树之后就开始了布局过程,确定渲染树中每个节点在屏幕上的确切坐标;再下一步就是绘制,即遍历渲染树,并使用UI(User Interface用户界面)后端层绘制每个节点,最终将页面展示出来。
performance API(前端性能监控)是w3c提供的用来测量网页和Web应用程序的性能api。其中performance timing提供了延时相关的性能信息,可以高精度测量网站性能,通过timing可以计算DNS查询、TCP链接、加载等各阶段的性能数据。目前,世面上大多数首屏时间都采用浏览器自带的来计算,具体包括:
首屏时间=首屏内容渲染结束时间点-开始请求时间点。
开始请求时间点可以通过Performance Timing.navigation Start获取,首屏内容渲染结束的时间点可以通过在HTML文档中对应首屏内容的标签结束位置,使用内联的JavaScript代码记录当前时间戳作为首屏内容渲染结束的时间点。
但是上述方式只适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况,但是有时候首屏数据需要通过异步请求获得,例如单页面Web,由于数据的异步返回,js(JavaScript)的异步加载,通过上述方式已不能确定首屏时间。
因此,本发明提供了一种页面首屏时间的确定方法,根据页面文档中DOM元素的变化,来确定首屏内容渲染结束的时间点,适用于确定单页面web的页面首屏时间。
图1为本发明实施例提供的一种页面首屏时间确定方法的流程图,如图1所示,该页面首屏时间确定方法包括如下步骤:
S101.在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档中的的根页面元素和所有子页面元素下是否有新增的直接子节点。
首屏时间是从用户发起网页浏览操作到首屏(第一屏)完整呈现网页内容所消耗的时间,其中网页浏览操作可以为用户在浏览器中输入网址,用户输入完网址后,客户端会根据网址生成一个用于向服务器请求数据的页面请求发送给服务器,用于从服务器获取用户想要的内容,而服务器则会响应于这个页面请求返回相应的页面文档。
页面文档包括HTML文件,HTML文件包括一个根页面元素和根页面元素下的多个子页面元素也就是DOM元素,根页面元素也属于DOM元素,DOM全称是Document Object Model文档对象模型。DOM就是针对HTML和XML提供的一个API,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构、样式和内容,所以当DOM发生变化时,就说明页面文档发生了变化,也就说明浏览器显示的网页内容发生了变化。
本申请通过监听DOM元素,来确定显示的网页内容的变化。
在本申请实施例中,在接收到服务器根据页面请求返回的页面文档时,触发监听,保证了可以监听到页面文档中的所有元素变化。
由于在页面在加载过程中,浏览器会发生多次重绘(更新元素属性),在每次浏览器重绘前检测根页面元素和子页面元素是否发生变化(即检测是否有新增的直接子节点),保证了页面元素的每次变化都可以被检测到。
在一个可能的实现方式中,利用Mutation Observer监听DOM元素的变动,observer的配置设置为{child List:true,sub tree:true},其中,child List:true用于观察目标节点的子节点,确定目标节点是否新增或者移除了某个子节点,sub tree:true用于观察目标节点的所有后代节点的变化,这样以DOM元素为目标节点,就保证了只有当DOM元素中有节点新增或删除变化时,observer才会监听到。
S102.确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素。
在监听过程中,如果检测到了某一个DOM元素有新增的直接子节点,就将这个DOM元素作为候选页面元素,例如检测到根页面元素下有新增的直接子节点,就确定根页面元素为候选页面元素,其中根页面元素的直接子节点就是以根页面元素为父节点的节点。
通过这种方式,可以将有新增的直接子节点的DOM元素与没有新增的直接子节点的DOM元素区分开。
本申请实施例目的是确定首屏加载过程中内容增加最多的时刻,并将该时刻确定为首屏内容渲染结束的时刻,进而以此来确定页面首屏时间。因此,只对候选页面元素进行分析就可以确定出内容增加最多的时刻,所以本实施例通过步骤S101和S102确定出候选页面元素后,在后续过程中只需对候选页面元素进行分析即可,不需要对所有页面元素都进行分析,减少了计算量,进而减少了性能的消耗。
在一个可能的实现方式中,在每次浏览器重绘前对所有DOM元素进行监听时,通过监听检测当前的DOM元素与上一次浏览器重绘后的DOM元素相比是否有新增的直接子节点,如果DOM元素与上次浏览器重绘后的DOM元素相比有新增的直接子节点,就将当前DOM元素作为候选页面元素,如果是第一次浏览器重绘前的监听,就通过监听将当前DOM元素与初始DOM元素进行比较,如果有新增的直接子节点,就将当前DOM元素作为候选页面元素。
S103.计算所述候选页面元素的加载时长,并保存。
在本实施例中,每个候选页面元素分别对应着一个加载时长,候选页面元素的加载时长指的是从发送页面请求的时刻到通过监听检测到候选页面元素有新增的直接子节点的时刻之间的时长,具体可以通过下述方式计算:
获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻;
获取发送所述页面请求的时刻作为第二时刻;
将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长。
S104.根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选子页面元素的分数,并保存。
在本实施例中,根据候选页面元素中新增的节点,通过下述方式,计算候选页面元素的分数:
步骤1:采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点(也就是所述候选页面元素中新增的直接子节点)。
步骤2:按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点(也就是节点高度为0的节点)。
因为新增节点是否可见与新增节点对应的内容是否在浏览器页面上显示相关,若新增节点不可见,则新增节点对应的内容就不会在浏览器的页面中显示,也就与浏览器的页面首屏时间无关,此时就不需要再去计算该新增节点对应的子节点的分数了,反之,如果新增节点可见,则需要继续计算该新增节点的子节点的分数。
在一个可能的实现方式中,可以通过下述方式确定新增节点是否可见:
确定浏览器窗口的顶部坐标;
确定浏览器窗口的底部坐标;
确定新增节点的中心坐标;
当新增节点的中心坐标的X及Y坐标均小于浏览器的顶部坐标,且大于浏览器窗口的底部坐标时,那么就可以确定新增节点在浏览器窗口的可见区域,也就是新增节点可见,否则新增节点不可见,至于浏览器窗口的顶部坐标、底部坐标和新增节点的中心坐标的确定方法有现有的成熟技术,此处不再赘述。
步骤3:若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数。
步骤4:若该新增节点不可见,则不计算该新增节点的子节点的分数。
步骤5:将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数。
例如:候选页面元素中新增根节点可见,新增根节点有两个新增子节点1和2,这两个新增子节点1和2均不可见,则候选页面元素的分数就等于新增根节点的分数加上两个新增子节点的分数,以此类推,如果候选页面元素中新增根节点可见,新增根节点有两个新增子节点1和2,新增子节点1可见,新增子节点2不可见,新增子节点1有1个新增子节点3,而新增子节点3不可见,则候选页面元素对应的分数就是新增根节点的分数、新增子节点1和2的分数以及新增子节点3的分数的和。
在一个可能的实现方式中,上述预设的计算方法中的预设的节点分数计算方法,包括如下步骤:
步骤1:获取待计算节点的子节点个数,所述待计算节点为需要计算分数的节点。
其中,待计算节点可以是新增根节点也可以是新增根节点的子节点。
步骤2:确定所述待计算节点的层级数。
待计算节点的层级数可以通过下述方式确定:当待计算节点的父节点不为空时,层级数增加1,然后再判断其父节点的父节点是否为空,以此类推,直到父节点为空时,计算停止,得到的层级数即为待计算节点的层级数。
步骤3:根据所述待计算节点的子节点个数和层级数按下式计算所述待计算节点的分数;
待计算节点的分数=待计算节点的子节点个数*层级数。
由于节点的可见性直接与节点对应的页面内容是否在浏览器中加载相关,而且如果子节点对应的父节点是一组元素的container(集合/集成),那么子节点是否可见更能代表节点对应的页面内容是否在浏览器中加载,因此层次更深的子节点比其父节点的权重应该更高,基于上述原因,本实施例采用上述公式计算节点的分数。
在本实施例中,根据候选页面元素中新增的节点计算候选页面元素的分数是为了确定候选页面元素中新增的内容的多少,根据上述方式计算候选页面元素的分数,分数越高则说明候选页面元素内容加载的越多。
通过步骤S103和S104可以计算得到每个候选页面元素对应的加载时长和分数,其中,S103和S104的先后顺序可以调换,或者S103和S104可以同时执行。
S105.判断所述监听是否结束。
在一个可能的实现方式中,可以通过实时获取当前时刻,根据当前时刻计算监听时长,通过将监听时长与第一预设时长比较来确定监听是否结束,具体可以包括:
获取当前时刻。
获取触发监听的时刻。
根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长。
判断所述监听的时长是否小于第一预设时长。
若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
若所述监听的时长小于所述第一预设时长,则确定所述监听没有结束。
其中,第一预设时长是根据经验或多次试验确定的值,具体取值不做限定。
在一个可能的实现方式中,还可以通过检测页面加载是否稳定来判断监听是否结束,具体可以包括:
判断第二预设时长内,所述监听是否监听到发生变化的子页面元素,若没有监听到发生变化的子页面元素,则确定所述监听结束,若监听到发生变化的子页面元素,则确定所述监听没有结束。
其中第二预设时长是根据经验或多次试验确定的值,具体取值不做限定。
当第二预设时长内没有检测到发生变化的子页面元素时,则确定此时页面加载稳定,可以结束监听。
判断监听是否结束的目的是为了确定首屏页面加载是否完成,只有在首屏页面加载完成后才可以计算页面首屏时间。
若所述监听结束,执行步骤S106。
S106.确定分数最高的候选页面元素的加载时长作为页面首屏时间。
监听结束后,将通过S103和S104计算得到的所有候选页面元素分数进行比较,分数越大说明其层次越深或者对应的DOM元素越多,层次越深则加载的越晚,所以本申请确定分数最高的候选页面元素为页面内容加载最多的页面元素,分数最高的候选页面元素对应第一时刻(检测到有新增的直接子节点的时刻)就是首屏内容渲染结束的时刻,因此分数最高的候选页面元素对应的加载时长就是页面首屏时间。
在一个可能的实现方式中,单页面Web中通过上述方式确定首屏时间时,当用户访问网站或刷新页面时,网站会通过上述方式计算首屏时间并将得到的首屏时间发送给服务器存储,方便后续对其他操作调用首屏时间。
在一个可能的实现方式中,一般单页面web的页面性能参数会和其它pv(PageView访问量)、uv(Unique Visitor独立访客)等数据一起投递、存储到hive(基于Hadoop的一个数据仓库工具)中做线下的分析,但是不利于实时的监控,因此可利用Apache Flink(由Apache软件基金会开发的开源流处理框架)将单页面web的页面性能参写入ES(ElasticSearch),利用kibana(是在ElasticSearch中有了相当多的数据之后,进行分析这些数据用的工具)等技术,可以做实时的监控和分析。
本申请实施例提供的一种页面首屏时间确定方法,通过监听页面文档中页面元素,确定发生变化的页面元素,根据发生变化的页面元素的新增节点数量以及层级数,计算发生变化的页面元素的分数,根据发生变化的页面元素的分数确定首屏中最后加载的页面元素,并将最后加载的页面元素对应的加载时长作为首屏时间,通过本申请只需对发生变化的页面元素进行计算即可,无需对所以页面元素进行计算,减少了性能消耗,而且本方法适用于对单页面web的首屏时间确定。
基于与上述页面首屏时间确定方法相同的发明构思,本发明实施例还提供了一种用于实现上述页面首屏时间确定方法的页面首屏时间确定装置,如图2所示,该页面首屏时间确定装置200,可以包括:
监听触发模块201,用于在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档的根页面元素和所有子页面元素下是否有新增的直接子节点;
候选页面元素确定模块202,用于确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素;
时长计算模块203,用于计算所述候选页面元素的加载时长,并保存;
分数计算模块204,用于根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,并保存;
判断模块205,用于判断所述监听是否结束;
页面首屏时间确定模块206,用于若所述监听结束,确定分数最高的候选页面元素对应的加载时长为页面首屏时间。
在一个可能的实现方式中,所述时长计算模块203计算所述候选页面元素的加载时长,包括:
获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻;
获取发送所述页面请求的时刻作为第二时刻;
将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长。
在一个可能的实现方式中,所述分数计算模块204根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,包括:
采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点;
按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点;
若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数;
若该新增节点不可见,则不计算该新增节点的子节点的分数;
将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数。
在一个可能的实现方式中,所述预设的节点分数计算方法,包括:
获取待计算节点的直接子节点个数,所述待计算节点为需要计算分数的节点;
确定所述待计算节点的层级数;
根据所述待计算节点的直接子节点个数和层级数按下式计算所述待计算节点的分数:
待计算节点的分数=待计算节点的直接子节点个数*层级数。
在一个可能的实现方式中,所述判断模块205判断所述监听是否结束,包括:
获取当前时刻和触发监听的时刻,根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长,判断所述监听的时长是否小于第一预设时长,若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
判断第二预设时长内,所述监听是否监测到有新增的直接子节点的根页面元素或子页面元素,若没有监测到,则确定所述监听结束,若监测到,则确定所述监听没有结束。
在一个可能的实现方式中,所述装置还包括:
发送模块,用于将所述页面首屏时间发送至服务器。
在本申请另一实施例中,还提供了一种计算机设备,如图3所示,包括处理器301、通信接口302、存储器303和通信总线304,其中,处理器301,通信接口302,存储器303通过通信总线304完成相互间的通信;
存储器303,用于存放计算机程序;
处理器301,用于执行存储器303上所存放的程序时,实现如下步骤:
终端中待检测应用读取第一终端标识;
所述待检测应用获取所述终端中的其他应用读取的第二终端标识;
比较所述第一终端标识与所述第二终端标识是否相同;
若不相同,则确定所述待检测应用为分身应用;
若相同,则确定所述待检测应用为非分身应用。
上述计算机设备提到的通信总线304可以是外设部件互连标准(PeripheralComponent Interconnect,简称PCI)总线或扩展工业标准结构(Extended IndustryStandard Architecture,简称EISA)总线等。该通信总线304可以分为地址总线、数据总线、控制总线等。为便于表示,图3中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口302用于上述计算机设备与其他设备之间的通信。
存储器303可以包括随机存取存储器(Random Access Memory,简称RAM),也可以包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器301可以是通用处理器,包括中央处理器(Central ProcessingUnit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital Signal Processing,简称DSP)、专用集成电路(Application SpecificIntegrated Circuit,简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本申请另一实施例中,还提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有数据处理方法程序,所述数据处理方法程序被处理器执行时实现上述任一所述的应用检测方法的步骤。
本发明实施例在具体实现时,可以参阅上述各个实施例,具有相应的技术效果。
可以理解的是,本文描述的这些实施例可以用硬件、软件、固件、中间件、微码或其组合来实现。对于硬件实现,处理单元可以实现在一个或多个专用集成电路(ApplicationSpecific Integrated Circuits,ASIC)、数字信号处理器(Digital Signal Processing,DSP)、数字信号处理设备(DSP Device,DSPD)、可编程逻辑设备(Programmable LogicDevice,PLD)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)、通用处理器、控制器、微控制器、微处理器、用于执行本申请所述功能的其它电子单元或其组合中。
对于软件实现,可通过执行本文所述功能的单元来实现本文所述的技术。软件代码可存储在存储器中并通过处理器执行。存储器可以在处理器中或在处理器外部实现。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本发明的范围。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。

Claims (6)

1.一种页面首屏时间确定方法,其特征在于,包括:
在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档的根页面元素和所有子页面元素下是否有新增的直接子节点;
确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素;
计算所述候选页面元素的加载时长,包括:获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻,获取发送所述页面请求的时刻作为第二时刻,将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长,并保存;
根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,包括:采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点,按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点,若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数,若该新增节点不可见,则不计算该新增节点的子节点的分数,将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数,并保存;
判断所述监听是否结束;
若所述监听结束,确定分数最高的候选页面元素对应的加载时长为页面首屏时间;
所述预设的节点分数计算方法,包括:
获取待计算节点的直接子节点个数,所述待计算节点为需要计算分数的节点;
确定所述待计算节点的层级数;
根据所述待计算节点的直接子节点个数和层级数按下式计算所述待计算节点的分数:
待计算节点的分数=待计算节点的直接子节点个数*层级数。
2.根据权利要求1所述的页面首屏时间确定方法,其特征在于,判断所述监听是否结束,包括:
获取当前时刻和触发监听的时刻,根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长,判断所述监听的时长是否小于第一预设时长,若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
判断第二预设时长内,所述监听是否监测到有新增的直接子节点的根页面元素或子页面元素,若没有监测到,则确定所述监听结束,若监测到,则确定所述监听没有结束。
3.根据权利要求1所述的页面首屏时间确定方法,其特征在于,所述方法还包括:
将所述页面首屏时间发送至服务器。
4.一种页面首屏时间确定装置,其特征在于,包括:
监听触发模块,用于在接收到服务器根据页面请求返回的页面文档时,触发监听,所述监听用于在每次浏览器重绘前检测所述页面文档的根页面元素和所有子页面元素下是否有新增的直接子节点;
候选页面元素确定模块,用于确定有新增的直接子节点的根页面元素和子页面元素为候选页面元素;
时长计算模块,用于计算所述候选页面元素的加载时长,包括:获取检测到所述候选页面元素有新增的直接子节点的时刻作为第一时刻,获取发送所述页面请求的时刻作为第二时刻,将所述第一时刻与所述第二时刻的差值,作为所述候选页面元素的加载时长,并保存;
分数计算模块,用于根据所述候选页面元素中新增的节点的个数和层级数,计算所述候选页面元素的分数,包括:采用预设的节点分数计算方法,计算所述候选页面元素中新增根节点的分数,其中,所述新增根节点为所述候选页面元素中新增的所在层级数最低的节点,按照从所述新增根节点到叶子结点的顺序进行遍历,判断所述候选页面元素中的新增节点是否可见,其中,所述叶子结点为所述候选页面元素中新增的所在层级数最高的节点,若该新增节点可见,则采用所述预设的节点分数计算方法,计算该新增节点的直接子节点的分数,若该新增节点不可见,则不计算该新增节点的子节点的分数,将所述候选页面元素中计算得到的所有分数求和得到所述候选页面元素的分数,并保存;
判断模块,用于判断所述监听是否结束;
页面首屏时间确定模块,用于若所述监听结束,确定分数最高的候选页面元素对应的加载时长为页面首屏时间;
所述预设的节点分数计算方法,包括:
获取待计算节点的直接子节点个数,所述待计算节点为需要计算分数的节点;
确定所述待计算节点的层级数;
根据所述待计算节点的直接子节点个数和层级数按下式计算所述待计算节点的分数:
待计算节点的分数=待计算节点的直接子节点个数*层级数。
5.根据权利要求4所述的页面首屏时间确定装置,其特征在于,所述判断模块判断所述监听是否结束,包括:
获取当前时刻和触发监听的时刻,根据所述当前时刻和所述触发监听的时刻,确定所述监听的时长,判断所述监听的时长是否小于第一预设时长,若所述监听的时长不小于所述第一预设时长,则确定所述监听结束;
判断第二预设时长内,所述监听是否监测到有新增的直接子节点的根页面元素或子页面元素,若没有监测到,则确定所述监听结束,若监测到,则确定所述监听没有结束。
6.根据权利要求4所述的页面首屏时间确定装置,其特征在于,所述装置还包括:
发送模块,用于将所述页面首屏时间发送至服务器。
CN201910797671.8A 2019-08-27 2019-08-27 一种页面首屏时间确定方法及装置 Active CN110717121B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910797671.8A CN110717121B (zh) 2019-08-27 2019-08-27 一种页面首屏时间确定方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910797671.8A CN110717121B (zh) 2019-08-27 2019-08-27 一种页面首屏时间确定方法及装置

Publications (2)

Publication Number Publication Date
CN110717121A CN110717121A (zh) 2020-01-21
CN110717121B true CN110717121B (zh) 2022-07-12

Family

ID=69209542

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910797671.8A Active CN110717121B (zh) 2019-08-27 2019-08-27 一种页面首屏时间确定方法及装置

Country Status (1)

Country Link
CN (1) CN110717121B (zh)

Families Citing this family (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111290912A (zh) * 2020-01-22 2020-06-16 北京百度网讯科技有限公司 单页面应用性能监控方法、装置和电子设备
CN111538885B (zh) * 2020-04-24 2023-10-24 腾讯音乐娱乐科技(深圳)有限公司 页面监听方法、装置、电子设备及存储介质
CN111581558B (zh) * 2020-04-27 2024-03-05 北京达佳互联信息技术有限公司 页面加载时长的确定方法、装置、设备及存储介质
CN111639289B (zh) * 2020-05-13 2024-02-23 北京三快在线科技有限公司 一种网页加载方法及装置
CN112131493A (zh) * 2020-08-27 2020-12-25 长沙市到家悠享网络科技有限公司 页面首屏时间确定方法、装置、电子设备以及存储介质
CN112346944B (zh) * 2020-10-22 2021-07-02 北京基调网络股份有限公司 一种监控网页用户操作体验的方法、设备及存储介质
CN112507261A (zh) * 2020-12-18 2021-03-16 无线生活(杭州)信息科技有限公司 首屏时间计算方法及装置
CN113641924B (zh) * 2021-10-13 2022-02-08 恒生电子股份有限公司 网页可交互时间点检测方法、装置、电子设备及存储介质
CN114003471B (zh) * 2022-01-04 2022-04-08 深圳市明源云科技有限公司 页面加载分析方法、设备及可读存储介质
DE202022101830U1 (de) 2022-04-05 2022-05-18 Iftikar Ahmed Tragbares medizinisches Gerät zur Überwachung der Bildschirmzeit mit Internet-of-Things-Sensor

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106656666A (zh) * 2016-12-13 2017-05-10 中国联合网络通信集团有限公司 一种获取网页首屏时间的方法及装置
CN108322359A (zh) * 2018-01-08 2018-07-24 阿里巴巴集团控股有限公司 一种页面首屏时间的获取方法和装置
CN108671547A (zh) * 2018-04-24 2018-10-19 腾讯科技(深圳)有限公司 一种获取应用的首屏时间的方法、装置及存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8626909B2 (en) * 2012-05-22 2014-01-07 Microsoft Corporation Page phase time

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106656666A (zh) * 2016-12-13 2017-05-10 中国联合网络通信集团有限公司 一种获取网页首屏时间的方法及装置
CN108322359A (zh) * 2018-01-08 2018-07-24 阿里巴巴集团控股有限公司 一种页面首屏时间的获取方法和装置
CN108671547A (zh) * 2018-04-24 2018-10-19 腾讯科技(深圳)有限公司 一种获取应用的首屏时间的方法、装置及存储介质

Also Published As

Publication number Publication date
CN110717121A (zh) 2020-01-21

Similar Documents

Publication Publication Date Title
CN110717121B (zh) 一种页面首屏时间确定方法及装置
US10318095B2 (en) Reader mode presentation of web content
US20190278787A1 (en) Personalized content delivery system
US9756140B2 (en) Tracking user behavior relative to a network page
US9727656B2 (en) Interactive sitemap with user footprints
US9195372B2 (en) Methods, systems, and computer program products for grouping tabbed portion of a display object based on content relationships and user interaction levels
US8898296B2 (en) Detection of boilerplate content
US20110302524A1 (en) Progress indicators for loading content
US20220121723A1 (en) Distributed systems and methods for facilitating website remediation and promoting assistive technologies and detecting compliance issues
US11100069B2 (en) Element identification in a tree data structure
CN105786455B (zh) 一种数据处理方法、装置及终端
CN104063401A (zh) 一种网页样式地址合并的方法和装置
CN104881452B (zh) 一种资源地址的嗅探方法、装置及系统
CN110781427A (zh) 一种首屏时间的计算方法、装置、设备和存储介质
JP5734332B2 (ja) 広告情報提供装置
CN110708270B (zh) 异常链接检测方法以及装置
US8402367B1 (en) Smart reload pages
US11836212B2 (en) Systems and methods for rendering interactive web pages
CN112052368B (zh) 自动提取列表数据的方法、系统、存储介质及电子设备
CN113076395B (zh) 语义模型训练、搜索显示方法、装置、设备及存储介质
CN113849758A (zh) 网页指标的生成方法、装置、电子设备及存储介质
US9753901B1 (en) Identifying important document content using geometries of page elements
CN111290912A (zh) 单页面应用性能监控方法、装置和电子设备
CN106033446B (zh) 网页内容展示方法及网页内容展示装置
CN111125590A (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
GR01 Patent grant
GR01 Patent grant