一种测量网页首屏完全渲染时间的方法

摘要

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

主权项

一种测量网页首屏完全渲染时间的方法，其特征在于：所述方法的实现包括以下步骤：(1)、在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加载的元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器中；(2)、在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom树数据，把Dom树中每个节点的具体信息，存储到Dom树的容器中；(3)、利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL，并建立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表结构如下：Dom节点资源映射表KeyValueDom节点ID资源Url(4)、通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整渲染树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射关系表，表结构如下：渲染节点坐标映射表KeyValue渲染节点ID节点显示坐标{x，y，width，height)(5)、通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对象，并建立Dom节点和渲染节点的映射关系；建立如下关系的关系映射表：渲染节点和Dom节点映射表KeyValue渲染节点IDDom节点ID(6)、根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标的关系表，其中Dom节点中的非可视化节点和渲染节点中的匿名节点因为不涉及到显示和资源，建立的最终映射表结构如下：资源url和显示坐标映射表KeyValue资源url显示节点坐标{x，y，width，height)(7)、当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的值，确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏范围区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过对元素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成一个首屏范围内资源元素的url集合；(8)、在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次查找最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染时间的值。