CN103324521A

CN103324521A - 一种测量网页首屏时间的方法

Info

Publication number: CN103324521A
Application number: CN 201310247019
Authority: CN
Inventors: 黄家旺
Original assignee: Zhangjiagang Free Trade Zone Runtong Electronic Technology R & D Co Ltd
Current assignee: Zhangjiagang Free Trade Zone Runtong Electronic Technology R & D Co Ltd
Priority date: 2013-06-20
Filing date: 2013-06-20
Publication date: 2013-09-25

Abstract

本发明公开了一种基于渲染引擎事件的页面首屏时间的计算方法。所述方法包括如下步骤：通过特定方法捕捉浏览器渲染引擎的渲染事件，在渲染事件中通过DOM方法获取页面的当前状态信息，当页面状态不小于特定状态时，继续，否则返回捕捉；在浏览器渲染事件中通过DOM方法获取页面实际高度，当页面实际高度不小于首屏区域的高度时，继续，否则返回捕捉；在浏览器渲染事件中获取当前渲染区域的范围，如果当前渲染区域在首屏范围内时，继续，否则返回捕捉；获取当前页面的屏幕图像，根据屏幕图像判断页面首屏是否被充满，若未被充满，继续监听渲染引擎的渲染事件，若已被充满，则记录首屏时间数值，并停止捕捉浏览器渲染引擎的渲染事件。

Description

一种测量网页首屏时间的方法

技术领域

本发明属于自动化测试领域，具体地，本发明涉及一种测量网页首屏时间的方法，其可以应用在浏览器渲染引擎、页面加载性能的自动化测试或性能监测中。

背景技术

用户对网站的访问，是基于浏览器所获取的网页来实现的。通常，一个网站页面完全加载完毕后，总页面高度从一屏到十几屏不等，总加载时间要比首屏内容加载时间长很多。从用户体验角度来说，首屏时间是用户对一个网站加载性能的重要体验因素。当页面充满首屏区域时，对用户来说就可以看到内容并进行点击、滚动等操作，而不必等到所有内容都加载完毕。因此，从用户发起访问开始，到首屏内容加载完毕的这段时间，对用户体验而言至关重要。通常，将网站被浏览器全屏区域充满所需的时间称为首屏时间。为了对访问过程中网站和本地的一些参数进行衡量，通常需要对首屏时间进行测量。

页面性能监测是基于浏览器应用程序进程(IE、firefox、chrome等)，针对页面开展的一系列性能测试，综合了网络层、会话层、应用层的性能指标；页面性能监测是对浏览器行为进行特征化、对各项指标进行量化的基本手段。

渲染引擎在浏览器软件中负责展现内容(如HTML，XML、图片等)和整理信息(如CSS、HTML标签等)，并将内容格式化输出。渲染引擎首先通过网络获得所请求文档的内容，然后通过解析html、构建dom树、构建render树、布局render树、绘制render树几个步骤完成页面内容的展现。为了获得更好的用户体验，这个过程是逐步完成的，浏览器渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。渲染引擎解析完一部分内容就显示一部分内容，同时，还在通过网络下载其余内容。对于用户而言，页面不是一次性全部展示到屏幕上，而是分批次加载和显示，当页面充满首屏区域时，用户就可以浏览内容并进行点击、滚动等操作了。自动化测试和监测软件为了获取浏览器首屏时间的性能指标，需要实时并精准的监测浏览器渲染引擎的渲染过程。

现有技术解决上述问题的通常方法是采用定时器定时获取页面的屏幕图像，然后逐行逐点扫描进行像素比对，当像素颜色数值不等于白色底色时，累计不等于白色底色的像素数量，同时比对页面上关键点的像素颜色，通过以上条件综合判断页面首屏是否被充满。

上述方法有以下几个缺点：(1)该方法为基于定时器的触发，windows系统上定时器最高精度为55ms，在测量精度上有一定的误差；(2)获取屏幕图像的操作耗用内存和CPU比较多，高频率获取屏幕图像在硬件配置比较低的机器上会影响浏览器进程的性能，即引入监测导致测量结果和实际有比较大的偏差；(3)另外，该方法没有考虑页面背景色、用户自定义windows外观颜色的影响，在部分特殊的页面上产生的测量结果可能和用户肉眼的观察结果不一致。(4)部分网站的页面由于排版、内容的需要，恰好在页面首屏高度附近包含大量空白，实际首屏时间到达时，软件认为首屏区域仍然没有内容或未完全充满。

发明内容

鉴于上述问题，本发明的目的是提供一种低消耗、高效率、高时间精度、高视觉兼容性的用于测量页面首屏时间的性能指标计算方法。

为了解决上述技术问题，本发明提出了一种基于渲染引擎事件的页面首屏时间的计算方法，如图1所示，包括步骤：

(1)通过某种特定方法捕捉浏览器渲染引擎的渲染事件；

(2)在浏览器渲染事件中通过DOM方法获取页面的当前状态信息，当页面状态不小于特定状态时，继续步骤(3)，否则不进行任何判断；

(3)在浏览器渲染事件中通过DOM方法获取页面实际高度，当页面实际高度不小于首屏区域的高度时，继续步骤(4)，否则不进行任何判断；

(4)在浏览器渲染事件中获取当前渲染区域的范围，如果当前渲染区域在首屏范围内时，继续步骤(5)，否则不进行任何判断；

(5)获取当前页面的屏幕图像；

(6)根据屏幕图像判断页面首屏是否被充满，如果首屏未充满，继续监听渲染引擎的渲染事件；当页面首屏已经被充满，记录首屏时间数值，停止捕捉浏览器渲染引擎的渲染事件。

其中所述步骤(1)中特定方法是指不同类型的浏览器由于架构和实现方法不同，捕获渲染事件有不同的实现方法，技术手段依赖于浏览器的实现架构。

所述步骤(2)中特定状态指W3C组织定义的状态常量表中的状态LOADING，参考文献《http://www.w3.org/TR/XMLHttpRequest/》。

所述步骤(6)实现了判断首屏时间到达的具体逻辑，如图2所示，包括如下步骤：

(61)调整判断首屏区域的基础高度；

(62)获取首屏判断的基色列表，其中包括纯白色、用户自定义windows外观颜色、多个关键点坐标颜色；

(63)循环页面基础高度附近和关键点附近的像素，使得每个像素同基色列表进行比对，当像素值和基色列表内颜色均不匹配时，累计像素点数；

(64)当累计像素点数大于特定阈值时，认为页面首屏已经被充满。

所述步骤(61)中还包括：默认基础高度为首屏高度，当基础高度附近恰好为空白时，基础高度向下移动特定像素，移动总偏移量不能超出最大范围，如果超出则回滚到首屏高度，如图3所示。

所述步骤(62)中定义了背景色和关键点坐标信息，关键点的选取规则为在屏幕左上、左中、左右、中左、正中、中右、下左、下中、下右9个关键点，如图4所示。

所述步骤(63)中的循环采取菱形斜网格状稀疏扫描算法，网格间隔依据页面字体像素值确定，尽量节省扫描时间，如图5所示。

本发明所述的测量方法通过浏览器渲染引擎的渲染事件驱动，提高了测量精度和效率，而通过在浏览器渲染事件中通过DOM方法获取页面的当前状态信息和页面实际高度、范围，提高了测量效率；通过在判断屏幕图像的首屏状态时，动态调整首屏判断条件的基础高度、多点采集背景色和关键点信息、并且采用菱形斜网格状稀疏扫描算法，提高了视觉兼容性和测量效率。

附图说明

图1是本发明所述的用于测量网页首屏时间的方法的流程图。

图2是本发明通过图像判断首屏状态的步骤示意图。

图3是本发明中的基础高度动态波动的示意图。

图4是本发明选取关键点的示意图。

图5是本发明菱形斜网格状稀疏扫描结果的示意图。

具体实施方式

下面结合附图对本发明所述的方法进行详细说明。

本发明提供了一种低消耗、高效率、高时间精度、高视觉兼容性的用于测量页面首屏时间的性能指标计算方法，本发明适用于目前所有主流浏览器的首屏时间性能指标的计算，其中包括了IE、firefox、chrome、safari、opera浏览器，下面将结合附图对本发明作进一步的详细描述。

在本发明中，测量软件以扩展件的形式附加到浏览器进程或者以宿主的形式将浏览器控件加载到测量软件进程。

步骤(1)通过某种特定方法捕捉浏览器渲染引擎的渲染事件。

当使用IE浏览器作为测量目标时，首先测量程序作为宿主将IE控件加载到测量进程内，然后利用子类化窗口的技术使用测量程序内部的消息处理函数接管IE控件的消息处理函数。当浏览器渲染引擎通知屏幕绘图时，Windows会给IE控件的消息处理函数发送WM_PAINT绘图消息，此时由于测量程序已经接管了消息处理函数，WM_PAINT绘图消息会被转发到测量程序内部的消息处理函数，内部的消息处理函数首先调用原IE控件的消息处理函数实现真正的绘图操作，然后调用步骤(2)对渲染事件进行判断和处理。

当使用Firefox浏览器作为测量目标时，页面内容每次被绘图后激发相应事件，这个事件叫做MozAfterPaint，由文档对象激发，一直冒泡到window对象。首先将测量程序作为扩展件的形式附加到Firefox浏览器内部，然后利用代码window.addEventListener(″MozAfterPaint″，onAfterPaint，false)注册Firefox浏览器的渲染事件。当浏览器渲染引擎完成实际的绘图操作后，浏览器会发送MozAfterPaint消息到测量程序的onAfterPaint函数，测量程序调用步骤2)对渲染事件进行判断和处理。

步骤(2)在浏览器渲染事件中通过获取浏览器ReadyState方法获取页面的当前状态信息，当页面状态不小于LOADING时，继续步骤(3)，否则不进行任何判断，直接返回步骤(1)。

步骤(3)在浏览器渲染事件中通过获取页面文档的scrollHeight属性获取页面实际高度，当页面实际高度不小于首屏区域的高度时，继续步骤(4)，否则不进行任何判断，直接返回步骤(1)。

步骤(4)在浏览器渲染事件中获取当前渲染区域的范围，如果当前渲染区域在首屏范围内时，继续步骤(5)，否则不进行任何判断，直接返回步骤(1)。

当使用IE浏览器作为测量目标时，当Window检测到窗口被覆盖的地方需要绘图的时候，它会向用户程序发送一个WM_PAINT消息，消息中包括了需要绘图的区域，然后由用户程序来决定如何绘制此范围的内容。窗口过程收到WM_PAINT消息后，并不代表整个客户区都需要被刷新，有可能客户区被覆盖的区域只有一小块，这个区域叫做“无效区域”，windows API函数BeginPaint函数的第二个参数是一个绘图信息结构的缓冲区地址，windows会在这里返回绘图信息结构，结构中包含了无效区域的位置和大小，通过调用BeginPaint函数，可以获取当前渲染区域的范围。

当使用Firefox浏览器作为测量目标时，MozAfterPaint事件提供两个属性：clientRects和boundingClientRect，这两个属性用来表明什么范围被重画，使用getClientRects和getBoundingClientRect两个方法获取绘图的坐标范围。

步骤(5)获取当前页面的屏幕图像：当使用IE浏览器作为测量目标时，使用OleDraw函数获取IE控件的屏幕图像。

当使用Firefox浏览器作为测量目标时，使用HTML5的canvas特性获取Firefox的屏幕图像。

步骤(6)根据屏幕图像判断页面首屏是否被充满，如果首屏未充满，继续监听渲染引擎的渲染事件。

获取屏幕图像后，首先调整判断首屏区域的基础高度，默认基础高度为首屏高度，当上次进行过首屏判断但是发现首屏被充满时，基础高度向下移动20像素，移动总偏移量不能超出100像素，如果超出则回滚到首屏高度，如图3所示。

获取首屏判断的基色列表，其中包括纯白色、用户自定义windows外观颜色、屏幕左上、左中、左右、中左、正中、中右、下左、下中、下右9个关键点颜色，如图4所示。

采取菱形斜网格状稀疏扫描算法循环页面基础高度附近和关键点附近的像素，使得每个像素同基色列表进行比对，当像素值和基色列表内颜色均不匹配时，累计像素点数，如图5所示，当累计像素点数大于特定阈值时，认为页面首屏已经被充满。

当页面首屏已经被充满，记录首屏时间数值，停止捕捉浏览器渲染引擎的渲染事件。

以上内容仅为本发明的较佳实施例，对于本领域技术人员而言，依据本实用新型的思想，在具体实现方式和应用范围上可以对其进行一定程度的改变，本说明书的内容不应理解为对本发明的限制。

Claims

1.一种测量网页首屏时间的方法，包括如下步骤：

(1)基于当前浏览器，采用适于当前浏览器的方法捕捉浏览器渲染引擎的渲染事件；

(2)在浏览器渲染事件中通过DOM方法获取页面的当前状态信息，当页面状态不小于特定状态时，继续步骤(3)，否则不进行任何判断，返回步骤(1)；

(3)在浏览器渲染事件中通过DOM方法获取页面实际高度，当页面实际高度不小于首屏区域的高度时，继续步骤(4)，否则不进行任何判断，返回步骤(1)；

(4)在浏览器渲染事件中获取当前渲染区域的范围，如果当前渲染区域在首屏范围内时，继续步骤(5)，否则不进行任何判断，返回步骤(1)；

(5)获取当前页面的屏幕图像；

(6)根据屏幕图像判断页面状态，确定首屏是否被充满，如果首屏未充满，继续监听渲染引擎的渲染事件；当页面首屏已经被充满，记录首屏时间数值，停止捕捉浏览器渲染引擎的渲染事件。

2.如权利要求1所述的方法，其中，步骤(2)中的所述特定状态是指W3C组织定义的状态常量表中的LOADING。

3.如权利要求1所述的方法，其中，在步骤(6)中判断页面状态时，动态调整首屏判断条件的基础高度。

4.如权利要求1所述的方法，其中，步骤(6)进一步包括：

(61)调整判断首屏区域的基础高度；

(64)当累计像素点数大于特定阈值时，确认页面首屏已经被充满。

5.如权利要求3所述的方法，其中，所述步骤(61)中还包括：默认基础高度为首屏高度，当基础高度附近恰好为空白时，基础高度向下移动特定像素，移动总偏移量不能超出最大范围，如果超出则回滚到首屏高度。

6.如权利要求3所述的方法，其中，所述步骤(62)中定义了背景色和关键点坐标信息。

7.如权利要求6所述的方法，其中，关键点的选取规则为在屏幕左上、左中、左右、中左、正中、中右、下左、下中、下右共选取9个关键点。

8.如权利要求3所述的方法，其中，所述步骤(63)中的循环采取菱形斜网格状稀疏扫描算法，网格间隔依据页面字体像素值确定。

9.如权利要求1所述的方法，其中，在步骤(6)中判断页面状态时，采用菱形斜网格状稀疏扫描算法循环页面基础高度附近和关键点附近的像素。

10.如权利要求1所述的方法，其中，在步骤(6)中判断页面状态时，多点采集背景色和关键点。