一种测量网页首屏完全渲染时间的方法
一种测量网页首屏完全渲染时间的方法
【技术领域】
[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对应的映射关系，把这个映射关系存储在一个映射表中，表结 构 如下：
[0035] Dom节点资源映射表
[0037] 4.通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整渲染 树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射关 系表，表结构如下：
[0038] 渲染节点坐标映射表
[0039]
[0040] 5.通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对象， 并建立Dom节点和渲染节点的映射关系。建立如下关系的关系映射表：
[0041] 渲染节点和Dom节点映射表
[0043] 6.根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标的 关系表，其中Dom节点中的非可视化节点和植染（Render)节点中的匿名节点因为不涉及到 显示和资源，这里忽略。建立的最终映射表结构如下：
[0044] 资源url和显示坐标映射表
[0046] 建立资源url及对应的显不坐标和完成时间的关系图，如图1所不。
[0047] 7.当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的 值，确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏 范围区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过 对元素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成 一个首屏范围内资源元素的url集合。
[0048] 8.在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次查 找最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染时 间的值。测量首屏完全渲染时间的工作时序图，如图2所示。
[0049] 首屏：在浏览器中初始化浏览窗口的范围。
[0050] D0M:文档对象模型（DocumentObjectModel)的缩写，简称D0M。
[0051] Com:组件对象模型（ComponentObjectModel)是微软公司为了计算机工业的软 件生产更加符合人类的行为方式开发的一种新的软件开发技术。
[0052] 完全渲染：在指定的浏览器窗口范围内，应该显示的内容完全显示出来的状态。
[0053] 本发明所定义的完全渲染时间，极大的改善了描述首屏时间的方法，具体体现在 以下几个方面。
[0054] 1.计算时机有优势；因为完全渲染时间是在浏览网页结束时才计算出的时间，此 时浏览器首屏范围内的所有内容已经全部渲染，而传统的首屏时间是在浏览器开始加载时 实时测试的时间，不能保证首屏范围内的所有元素都加载完成。
[0055] 2.数据的准确度有很大提高；完全渲染时间计算的时间是在页面加载完成时首 屏范围内所有元素加载完成的时间，所以不管是垂直方向的元素，还是水平方向的元素，都 已经完全加载完成，其不存在哪一个元素的加载时间没有考虑的情况，而且我们获取的元 素的加载完成时间是浏览器内部加载元素时自己记录的元素完成时间，不是我们在浏览器 外部通过自己主动去按一定的频率查询到的时间，所以我们计算出的完全渲染时间其实是 浏览器内部自己记录下的时间，极大的提高了首屏首屏时间的准确性。
[0056] 上述实施方式并非是对本发明的限制，本发明也并不仅限于上述举例，本技术领 域的技术人员在本发明的技术方案范围内所做出的变化、改型、添加或替换，也均属于本发 明的保护范围。
【主权项】
1. 一种测量网页首屏完全渲染时间的方法，其特征在于：所述方法的实现包括以下步 骤： (1) 、在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加载的 元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器中； (2) 、在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom树数 据，把Dom树中每个节点的具体信息，存储到Dom树的容器中；(3) 、利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL，并建 立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表结构 如下： Dom节点资源映射表 (4) 、通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整渲染 树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射关 系表，表结构如下： 渲染节点坐标映射表(5) 、通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对象，并 建立Dom节点和渲染节点的映射关系；建立如下关系的关系映射表： 渲染节点和Dom节点映射表(6) 、根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标的 关系表，其中Dom节点中的非可视化节点和渲染节点中的匿名节点因为不涉及到显示和资 源，建立的最终映射表结构如下： 资源url和显示坐标映射表(7) 、当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的值， 确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏范围 区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过对元 素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成一个 首屏范围内资源元素的url集合； (8)、在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次查找 最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染时间 的值。
【专利摘要】本发明公开了一种测量网页首屏完全渲染时间的方法，方法的实现包括八个步骤：把资源元素和渲染树的节点通过url建立起一个映射关系，并把这个映射关系存储在一个映射表中；依据映射表计算出一个首屏范围内资源元素的url集合；在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，计算出最后完成加载的元素。本发明能够更加准确的测试出用户浏览网页的真实感受，提高网页首屏显示的准确度，准确的测试出首屏范围内的所有元素完全渲染完成时的真实时刻；通过本发明测试出的时间就是首屏范围内所有的元素完全渲染完成的时间，也就是首屏范围内所有的元素完全显示的时间，而这个时间也是用户肉眼所感受到最真实的网页打开第一屏的时间。
【IPC分类】G06F17/30
【公开号】CN104899336
【申请号】CN201510373936
【发明人】赵栋
【申请人】北京博睿宏远科技发展有限公司
【公开日】2015年9月9日
【申请日】2015年7月1日
【技术领域】
[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对应的映射关系，把这个映射关系存储在一个映射表中，表结 构 如下：
[0035] Dom节点资源映射表
[0037] 4.通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整渲染 树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射关 系表，表结构如下：
[0038] 渲染节点坐标映射表
[0039]
[0040] 5.通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对象， 并建立Dom节点和渲染节点的映射关系。建立如下关系的关系映射表：
[0041] 渲染节点和Dom节点映射表
[0043] 6.根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标的 关系表，其中Dom节点中的非可视化节点和植染（Render)节点中的匿名节点因为不涉及到 显示和资源，这里忽略。建立的最终映射表结构如下：
[0044] 资源url和显示坐标映射表
[0046] 建立资源url及对应的显不坐标和完成时间的关系图，如图1所不。
[0047] 7.当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的 值，确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏 范围区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过 对元素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成 一个首屏范围内资源元素的url集合。
[0048] 8.在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次查 找最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染时 间的值。测量首屏完全渲染时间的工作时序图，如图2所示。
[0049] 首屏：在浏览器中初始化浏览窗口的范围。
[0050] D0M:文档对象模型（DocumentObjectModel)的缩写，简称D0M。
[0051] Com:组件对象模型（ComponentObjectModel)是微软公司为了计算机工业的软 件生产更加符合人类的行为方式开发的一种新的软件开发技术。
[0052] 完全渲染：在指定的浏览器窗口范围内，应该显示的内容完全显示出来的状态。
[0053] 本发明所定义的完全渲染时间，极大的改善了描述首屏时间的方法，具体体现在 以下几个方面。
[0054] 1.计算时机有优势；因为完全渲染时间是在浏览网页结束时才计算出的时间，此 时浏览器首屏范围内的所有内容已经全部渲染，而传统的首屏时间是在浏览器开始加载时 实时测试的时间，不能保证首屏范围内的所有元素都加载完成。
[0055] 2.数据的准确度有很大提高；完全渲染时间计算的时间是在页面加载完成时首 屏范围内所有元素加载完成的时间，所以不管是垂直方向的元素，还是水平方向的元素，都 已经完全加载完成，其不存在哪一个元素的加载时间没有考虑的情况，而且我们获取的元 素的加载完成时间是浏览器内部加载元素时自己记录的元素完成时间，不是我们在浏览器 外部通过自己主动去按一定的频率查询到的时间，所以我们计算出的完全渲染时间其实是 浏览器内部自己记录下的时间，极大的提高了首屏首屏时间的准确性。
[0056] 上述实施方式并非是对本发明的限制，本发明也并不仅限于上述举例，本技术领 域的技术人员在本发明的技术方案范围内所做出的变化、改型、添加或替换，也均属于本发 明的保护范围。
【主权项】
1. 一种测量网页首屏完全渲染时间的方法，其特征在于：所述方法的实现包括以下步 骤： (1) 、在浏览器中网页加载的过程中，通过浏览器开发者工具的接口，采集网页加载的 元素瀑布图数据，记录每个元素加载完成的时间，并把此数据保存到指定的元素容器中； (2) 、在当前网页加载完成的时刻，通过浏览器的接口，获取当前网页完整的Dom树数 据，把Dom树中每个节点的具体信息，存储到Dom树的容器中；(3) 、利用浏览器中渲染引擎提供的接口，查找每个Dom节点所依赖的资源的URL，并建 立当前Dom节点和资源Url对应的映射关系，把这个映射关系存储在一个映射表中，表结构 如下： Dom节点资源映射表 (4) 、通过浏览器渲染引擎所提供的接口，获取当前页面在加载完成时刻的完整渲染 树，并把每个渲染节点在浏览器窗口中的绝对坐标和当前的渲染节点ID建立一个映射关 系表，表结构如下： 渲染节点坐标映射表(5) 、通过浏览器渲染引擎的接口中，查找每个渲染树节点所依赖的Dom节点对象，并 建立Dom节点和渲染节点的映射关系；建立如下关系的关系映射表： 渲染节点和Dom节点映射表(6) 、根据之前几步建立的三张关系映射表，最终建立起资源url和渲染区域坐标的 关系表，其中Dom节点中的非可视化节点和渲染节点中的匿名节点因为不涉及到显示和资 源，建立的最终映射表结构如下： 资源url和显示坐标映射表(7) 、当获取了元素节点坐标和完成时间关系的映射表以后，根据首屏高度指定的值， 确定首屏范围的区域坐标，然后再依次选取元素节点坐标关系表中的节点坐标和首屏范围 区域做比较，如果二者的区域范围有交集，则我们认为此元素节点在首屏范围内，通过对元 素节点进行一次遍历之后，我们就获得了首屏范围内所有显示的元素资源url，构造成一个 首屏范围内资源元素的url集合； (8)、在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，依次查找 最后完成加载的元素，这个元素的加载完成的时间即为我们所要计算的首屏完全渲染时间 的值。
【专利摘要】本发明公开了一种测量网页首屏完全渲染时间的方法，方法的实现包括八个步骤：把资源元素和渲染树的节点通过url建立起一个映射关系，并把这个映射关系存储在一个映射表中；依据映射表计算出一个首屏范围内资源元素的url集合；在首屏范围内资源元素集合中，根据元素节点坐标及完成时间关系表，计算出最后完成加载的元素。本发明能够更加准确的测试出用户浏览网页的真实感受，提高网页首屏显示的准确度，准确的测试出首屏范围内的所有元素完全渲染完成时的真实时刻；通过本发明测试出的时间就是首屏范围内所有的元素完全渲染完成的时间，也就是首屏范围内所有的元素完全显示的时间，而这个时间也是用户肉眼所感受到最真实的网页打开第一屏的时间。
【IPC分类】G06F17/30
【公开号】CN104899336
【申请号】CN201510373936
【发明人】赵栋
【申请人】北京博睿宏远科技发展有限公司
【公开日】2015年9月9日
【申请日】2015年7月1日
最新回复(0)