一种测量网页首屏完全渲染时间的方法
【技术领域】
[0001] 本发明涉及一种测量方法，尤其涉及一种测量网页首屏完全渲染时间的方法。
【背景技术】
[0002] 当前应用性能管理平台（APM)中，描述一个网站性能的一个重要指标就是网站的 首屏性能，而首屏性能因为不是W3C规定的标准中网页所应该具有的标准行为和结构。所 以各大浏览器厂商在浏览器的事件处理中也没有设计针对首屏性能的相关接口和事件，但 对于网页的开发者和网页的浏览者来说，这个性能却能很真实的反应一个网页打开时对用 户的主观感受。针对这个需求，各大性能管理平台都增加了这样一个指标，即首屏性能，它 指的是在网页渲染时，首屏内元素渲染高度达到指定高度的时间。其主要的计算方法为：用 户通过浏览器提供的查询渲染高度的Com接口，以一个固定的周期频率，主动得去获取当 前浏览器渲染高度的值，比较该值和用户指定的首屏高度的值，如果查询到的渲染高度大 于首屏高度的值，就认为此查询的时间即为首屏性能的值。
[0003] 虽然计算此指标的方法多种多样，但目前各种算法计算的首屏时间主要有以下几 个缺点：
[0004] 1.首屏性能的值存着误差；首屏性能的计算方法是浏览网页时，实时查询当前浏 览器的渲染高度，而现代浏览器为了增加用户使用的友好型，渲染普遍采用批量，大面积的 渲染策略，这就导致查询到的首屏高度的值跳动性比较大，例如查询到的值可能是如下序 列的值：〇,〇, 500,1800,1800 (单位：像素）。假如我们设定的首屏高度为600像素，则我们 只能近似的选取我们查到渲染高度为1800像素的时刻作为我们的首屏性能，这就导致我 们的首屏性能的值存在很大的误差。
[0005] 2.首屏性能的指标无法准确的描述当前首屏范围内的内容是否渲染完毕；因为 首屏性能的计算方法是通过浏览器的Dom接口，实时查询当前渲染窗口的纵向渲染高度， 而横向渲染的数据是不考虑的，这就导致在指定的渲染高度范围内，可能左侧的内容已经 渲染完毕，而右侧的内容还没开始渲染，从而无法准确的反应出首屏完全渲染完毕的时间。
[0006] 3.首屏性能的计算方法有缺陷；因为首屏性能的计算方法是我们通过浏览器提 供的Dom接口，以一定的周期频率主动的去查询浏览器当前的渲染高度，而如果这个周期 频率设置不太合适，周期太长的话就会导致我们查询到值的时刻并不是浏览器内部真实渲 染到此高度的时刻，就会导致存着很大的误差。
【发明内容】
[0007] 为了解决上述技术所存在的不足之处，本发明提供了一种基于函数拦截技术的手 机APP性能数据采集方法。
[0008] 为了解决以上技术问题，本发明采用的技术方案是：一种测量网页首屏完全渲染 时间的方法，方法的实现包括以下步骤：
[0009] (1)、在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加 载的元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器 中；
[0010] (2)、在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom 树数据，把Dom树中每个节点的具体信息，存储到Dom树的容器中；
[0011] ⑶、利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL， 并建立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表 结构如下：
[0012] Dom节点资源映射表
[0014] (4)、通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整植 染树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射 关系表，表结构如下：
[0015] 渲染节点坐标映射表
[0017] (5)、通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对 象，并建立Dom节点和渲染节点的映射关系；建立如下关系的关系映射表：
[0018] 渲染节点和Dom节点映射表
[0020] (6)、根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标 的关系表，其中Dom节点中的非可视化节点和渲染节点中的匿名节点因为不涉及到显示和 资源，建立的最终映射表结构如下：
[0021] 资源url和显示坐标映射表
[0023] (7)、当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的 值，确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏 范围区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过 对元素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成 一个首屏范围内资源元素的url集合；
[0024] (8)、在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次 查找最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染 时间的值。
[0025] 本发明能够更加准确的测试出用户浏览网页的真实感受，提高网页首屏显示的准 确度，更加准确的测试出首屏范围内的所有元素完全渲染完成时的真实时刻；通过本发明 测试出的时间就是首屏范围内所有的元素完全渲染完成的时间，也就是首屏范围内所有的 元素显示完成的时间，此时正是用户用肉眼可以看到的首屏范围内的所有元素都渲染完成 的时间。
【附图说明】
[0026] 下面结合附图和【具体实施方式】对本发明作进一步详细的说明。
[0027] 图1为本发明图元素节点坐标及完成时间关系生成流程图。
[0028] 图2为本发明计算完全渲染时间时序框图。
【具体实施方式】
[0029] 首屏完全渲染时间的定义为浏览器加载网页时，在首屏高度范围内的内容完全渲 染完成的时间。
[0030] 本发明的具体实施步骤如下：
[0031] 其测量方法主要有以下几个步骤：
[0032] 1.在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加载 的元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器中。
[0033] 2.在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom树 数据，把Dom树中每个节点的具体信息，存储到Dom树的容器中。
[0034] 3.利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL，并 建立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表结 构