[发明专利]一种测量网页首屏完全渲染时间的方法

说明书

本发明公开了一种测量网页首屏完全渲染时间的方法，方法的实现包括八个步骤：把资源元素和渲染树的节点通过url建立起一个映射关系，并把这个映射关系存储在一个映射表中；依据映射表计算出一个首屏范围内资源元素的url集合；在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，计算出最后完成加载的元素。本发明能够更加准确的测试出用户浏览网页的真实感受，提高网页首屏显示的准确度，准确的测试出首屏范围内的所有元素完全渲染完成时的真实时刻；通过本发明测试出的时间就是首屏范围内所有的元素完全渲染完成的时间，也就是首屏范围内所有的元素完全显示的时间，而这个时间也是用户肉眼所感受到最真实的网页打开第一屏的时间。

技术领域

本发明涉及一种测量方法，尤其涉及一种测量网页首屏完全渲染时间的方法。

背景技术

当前应用性能管理平台(APM)中，描述一个网站性能的一个重要指标就是网站的首屏性能，而首屏性能因为不是W3C规定的标准中网页所应该具有的标准行为和结构。所以各大浏览器厂商在浏览器的事件处理中也没有设计针对首屏性能的相关接口和事件，但对于网页的开发者和网页的浏览者来说，这个性能却能很真实的反应一个网页打开时对用户的主观感受。针对这个需求，各大性能管理平台都增加了这样一个指标，即首屏性能，它指的是在网页渲染时，首屏内元素渲染高度达到指定高度的时间。其主要的计算方法为：用户通过浏览器提供的查询渲染高度的Com接口，以一个固定的周期频率，主动得去获取当前浏览器渲染高度的值，比较该值和用户指定的首屏高度的值，如果查询到的渲染高度大于首屏高度的值，就认为此查询的时间即为首屏性能的值。

虽然计算此指标的方法多种多样，但目前各种算法计算的首屏时间主要有以下几个缺点：

1.首屏性能的值存着误差；首屏性能的计算方法是浏览网页时，实时查询当前浏览器的渲染高度，而现代浏览器为了增加用户使用的友好型，渲染普遍采用批量，大面积的渲染策略，这就导致查询到的首屏高度的值跳动性比较大，例如查询到的值可能是如下序列的值：0,0,500,1800,1800(单位：像素)。假如我们设定的首屏高度为600像素，则我们只能近似的选取我们查到渲染高度为1800像素的时刻作为我们的首屏性能，这就导致我们的首屏性能的值存在很大的误差。

2.首屏性能的指标无法准确的描述当前首屏范围内的内容是否渲染完毕；因为首屏性能的计算方法是通过浏览器的Dom接口，实时查询当前渲染窗口的纵向渲染高度，而横向渲染的数据是不考虑的，这就导致在指定的渲染高度范围内，可能左侧的内容已经渲染完毕，而右侧的内容还没开始渲染，从而无法准确的反应出首屏完全渲染完毕的时间。

3.首屏性能的计算方法有缺陷；因为首屏性能的计算方法是我们通过浏览器提供的Dom接口，以一定的周期频率主动的去查询浏览器当前的渲染高度，而如果这个周期频率设置不太合适，周期太长的话就会导致我们查询到值的时刻并不是浏览器内部真实渲染到此高度的时刻，就会导致存着很大的误差。

发明内容

为了解决以上技术问题，本发明采用的技术方案是：一种测量网页首屏完全渲染时间的方法，方法的实现包括以下步骤：

(1)、在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加载的元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器中；

(2)、在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom树数据，把Dom树中每个节点的具体信息，存储到Dom树的容器中；

(3)、利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL，并建立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表结构如下：

Dom节点资源映射表