一种基于浏览器的WEB页面性能检测与采集分析插件以及
方法
技术领域
背景技术
[0002] 中国互联网络信息中心(CNNIC)发布了《第30次中国互联网络发展状况统计报告》，报告显示，截至2012年6月底，中国域名总数为873万个,
网站数量为250万,中国网民达到5.38亿，互联网普及率达到39.9%。随着互联网的迅速发展壮大，用户对浏览网站的体验要求也越来越高；一个
站点如何能做到前端性能和视觉效果合理协调搭配，已经成为一个不能忽视的重要问题。
[0003] 虽然性能优化的检测工具很多，并且可以通过一些工具发现网站中可以进行优化的点，做针对性的改进，但如果一个网站还在不断地做快速的
迭代升级，如何保证它的性能一直处于一个稳定
水平，就是一个必须要面对的问题了。WEB页面的性能优化是一项非常重要的技术活，对于用户体验来说有非常大的影响。WEB页面开发上性能与视觉效果永远是矛盾的，不同版本不同种类的浏览器表现出来的效果与性能差别很大，这就需要我们找一个平衡点，尽量满足大多数的情况。
[0004] 目前来说大多数与网站开发相关的公司在WEB页面这
块发展的比较慢，虽然这方面问题的也有一些新技术或解决方案不断的出现，但是现在更重要的是把各种解决方案混合在一起，更多都是大家互相帮助，互相借鉴。
[0005] 综上所述，针对
现有技术问题，特别需要一种能实时、全面、直观展示站点WEB页面的性能检测数据的工具或系统，以便能及时分析性能问题的
瓶颈，提供一些解决方案，以解决以上提到的问题。
发明内容
[0006] 针对现有技术所存在的问题，本发明的目的在于提供一种基于浏览器的WEB页面性能检测与采集分析插件，以针对形形色色各种不同版本的浏览器、不同网络带宽的环境，为需要改善WEB浏览用户体验的网站开发人员提供相应的参考依据。
[0007] 同时，本发明还提供一种基于该插件进行的WEB页面性能检测与采集分析方法。
[0008] 为了达到上述目的，本发明采用如下的技术方案：
[0009] 一种基于浏览器的WEB页面性能检测与采集分析插件，所述插件安置于用户浏览器中，通过调用浏览器的相应
接口，对用户通过浏览器浏览过的相关网站的HTTP
请求信息以及相关WEB页面性能检测数据进行收集和分析。
[0010] 在本发明的优选实例中，所述插件包括性能检测、报表、远程传输这三个模块，其中性能检测模块负责对WEB页面进行各项功能检测以及对页面产生的网络请求、响应信息和检测后的数据进行收集；报表模块负责将收集到的数据经分析处理后生成报表文件；远程传输模块负责将收集到的数据直接发送到
指定目标地址；远程传输模块优先级大于报表模块，如果启用远程传输功能，则报表模块失效，插件也不会将收集的数据在本地生成报表文件。
[0011] 进一步的，所述插件检测采集如下数据：
[0012] （1）检测页面的网络请求、响应信息；
[0014] （3）页面大小，页面加载的脚本文件、样式文件、图片的数量、大小、加载的时间，以及页面DOM元素数量。
[0015] 再进一步的，所述检测页面的网络请求信息包括：请求网址、请求的目标主机、请求方法、建立TCP连接花费的时间；网络响应信息包括：响应HTTP头信息中的状态码、是否启用压缩、是否启用缓存、缓存时间、
服务器类型与版本信息。
[0016] 再进一步的，所述插件检测的首次渲染时间是用户感受上是从点击一个页面链接开始到跳转到新页面前停留在原页面的时间；所述首屏时间是指浏览器窗口上部区域被充满所需时间。
[0017] 进一步的，所述插件对采集到数据进行定时分析，并按各种不同类别进行处理，生成相应的统计报表。
[0018] 进一步的，所述插件定时将采集到的数据以JSON格式的文本通过HTTP协议发送到目标地址，如果在一定时间内不能连接到目录地址，则插件自动禁用远程传输。
[0019] 作为本发明的第二目的，一种WEB页面性能检测与采集分析方法，所述方法包括如下步骤：
[0020] （1）通过插件捕捉浏览器窗口打开与重新加载事件；
[0021] （2）将浏览器从发送HTTP请求到页面完全加载完成的资源或事件数据、消耗的时间数据保存在内存中；
[0022] （3）对获取的数据进行分析处理。
[0023] 进一步的，所述步骤（1）中插件在浏览器HTTP连接请求被触发后，开始检测浏览器的一系列HTTP请求与响应信息以及浏览器页面渲染信息。
[0024] 进一步的，在步骤（1）前还包括插件配置步骤，该配置步骤针对插件进行如下配置操作：报表设置、检测网站设置以及远程传输设置。
[0025] 再进一步的，所述报表设置包括：是否生成报表、报表生成的时间间隔、报表生成的目标
位置、是否生成网站性能排名报表、生成报表的格式、报表保存时间，且该配置默认是启用生成报表；同时，报表分为HTML与PDF两种格式，默认是HTML格式。
[0026] 再进一步的，所述检测网站设置包括：检测网页范围设置、检测文件类型；其中检测网页范围是列表形式，可以设置多个全匹配或部分匹配名称的网页；检测文件类型包括只检测网页信息，检测其它文件信息。
[0027] 再进一步的，所述远程传输设置包括：是否启用远程传输、远程传输的IP址址、端口、远程传输的时间间隔，默认不启用远程传输。
[0028] 本发明提供的方案通过用户在浏览器安装本插件，将用户浏览过的相关网站的HTTP请求信息以及相关WEB页面性能检测数据进行收集，定时进行分析，按各种不同类别进行处理，生成相应的统计报表，为不同的网站开发人员提供WEB页面性能检测数据作为参考，以便相关网站开发人员可以针对自身的WEB页面性能问题进行调整优化。本发明能够为需要改善WEB浏览用户体验的网站开发人员提供相应的参考依据。
[0029] 再者，本发明提供的方案可适用于不同的浏览器，其能够支持IE、Chrome、Opera、Firefox、Safari等主流浏览器，实用性非常的广。
附图说明
[0030] 以下结合附图和具体实施方式来进一步说明本发明。
[0031] 图1为本发明进行处理的流程示意图。
具体实施方式
[0032] 为了使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体图示，进一步阐述本发明。
[0033] 本插件是对现有技术的完善与补充，通过用户在浏览器安装本插件，插件通过调用浏览器的相应接口，将用户通过浏览器浏览过的相关网站的HTTP请求信息以及相关WEB页面性能检测数据进行收集，定时进行分析，按各种不同类别进行处理，生成相应的统计报表，为不同的网站开发人员提供WEB页面性能检测数据作为参考，以便相关网站开发人员可以针对自身的WEB页面性能问题进行调整优化。
[0034] 基于上述的原理，本插件采用两种规格标准设计，IE私有的ActiveX与其他浏览使用的NPAPI（Netscape插件应用程序编程界面）标准；该插件分为报表、性能检测、远程传输这三个模块，其中性能检测模块负责对WEB页面进行各项功能检测以及对页面产生的网络请求、响应信息和检测后的数据进行收集（暂存系统内存中）；报表模块负责将收集到的数据经分析处理后生成报表文件（将收集过的数据从内存清除）；远程传输模块负责将收集到的数据直接发送到指定目标地址（将收集过的数据从内存清除）；远程传输模块优先级大于报表模块，如果启用远程传输功能，则报表模块失效，插件也不会将收集的数据在本地生成报表文件。
[0035] 根据上述方案形成的插件可实现如下信息的采集：
[0036] （1）检测页面的网络请求、响应信息；
[0037] 这里的检测页面的网络请求信息包括：请求网址、请求的目标主机、请求方法、建立TCP连接花费的时间；
[0038] 网络响应信息包括：响应HTTP头信息中的状态码、是否启用压缩、是否启用缓存、缓存时间、服务器类型与版本信息。网页启用压缩、使用缓存可以大大减轻网络数据传输的带宽。
[0039] （2）首次渲染时间与首屏时间；
[0040] 首次渲染时间是用户从点击一个页面链接开始到跳转到新页面，新页面出现网页内容前这一段时间；即把从用户在网页上点击一个链接开始，然后出现新的页面，页面经过一定时间加载，内容开始显示这段时间计算出来得出的结果。
[0041] 首屏时间是指浏览器窗口上部区域被充满所需时间，即浏览器页面打开时可视区域显示完成的时间（不是页面所有内容加载完）。
[0042] （3）页面大小，页面加载的脚本文件、样式文件、图片的数量、大小、加载的时间，以及页面DOM元素数量。
[0043] 很多人每天浏览网页，看新闻，网购，实际上一直都在
接触HTTP（超文本传输协议），HTTP协议实质上就是使用TCP/IP（一种网络通讯协议，可以通过谷歌、百度搜索）连接,把相关网站服务器端的文本和图片等数据传送到客户端,再通过客户端浏览器进行解析和显示。
[0044] 本插件采集分析过程如下：
[0045] 本发明中插件通过截取用户浏览网页的发出的请求以及从服务器端传回的网络数据包，从而计算出多个请求与响应间隔的时间（页面上包含的图片、样式文件、脚本文件等都是一个个单独的请求），并将请求与响应数据进行处理分析，得出如请求网址、请求目标主机、请求方法、响应数据中HTTP头信息中的状态码、缓存时间、数据长度（即相关文件的大小），压缩
算法等数据；通过分析数据包可以得到所有与页面相关文件的大小与加载时间，并统计出加载的图片、样式、脚本等文件的数量；该插件在页面加载完成后通过调用JS脚本对页面Dom元素进行统计，获取DOM元素个数；首次渲染时间通过计算浏览器渲染引擎开始时间得出，该插件可以在浏览器载入网页前添加一段脚本，监听页面onload事件，根据页面开始请求时间与onload事件之间的差，从而得到首屏时间。
[0046] 为了进一步提高本插件的使用性能，本插件还设置有相应的插件配置模块，通过该模块包括如下配置单元：
[0047] （1）报表设置单元；
[0048] 通过报表设置单元可对插件的报表功能进行设置，具体包括如下功能设置：是否生成报表、报表生成的时间间隔、报表生成的目标位置、是否生成网站性能排名报表、生成报表的格式、报表保存时间，默认是启用生成报表；同时报表分为HTML与PDF两种格式，默认是HTML格式。
[0049] 通过该报表设置单元可使得本插件定时自动生成相应的报表信息到指定目录，如C:\Documents and Settings\Administrator目录中。当然用户可以在插件的配置选项中设置目标目录。
[0050] 对于网站性能排名报表，该插件默认不生成站点性能排名报表，如果报表设置单元设置生成，插件则将用户在一定时间内浏览的多个网站性能数据进行分析汇总，根据多个性能指标生成多份不同网站性能排名报表，报表保存时间分为1天、1周、1月、永久保存，默认为一周，如果不设置为永久保存，插件会按报表文件创建时间对报表文件进行删除，以节省宝贵的磁盘空间。
[0051] （2）检测网站设置单元；
[0052] 通过该检测网站设置单元可对插件的性能检测模块进行数据检测的范围和内容进行设置，具体包括如下功能设置：检测网页范围设置、检测文件类型；
[0053] 其中检测网页范围是列表形式，用户可以设置多个全匹配或部分匹配名称的网页，如以index.html结尾的页面，也可以选择只检测网站首页，还可以选择检测所有页面；
[0054] 检测文件类型包括只检测网页信息，检测其它文件信息，其中检测其它文件类型有图片文件、CSS样式文件、脚本文件等，用户可以选择检测所有类型的文件，默认是所有文件。
[0055] （3）远程传输设置单元；
[0056] 通过该远程传输设置单元可对插件中远程传输模块的远程数据传输功能进行设置，具体包括如下功能设置：是否启用远程传输、远程传输的IP址址、端口、远程传输的时间间隔（30秒、1分钟、5分钟、15分钟以及自定义时间，自定义时间以分钟为单位），默认不启用远程传输。
[0057] 在远程传输设置单元完成插件远程数据传输功能设置后，插件定时将该间隔时间内网站性能检测的数据以JSON格式的文本通过HTTP协议发送到目标地址，如果在一定时间内不能连接到目录地址，则插件自动禁用远程传输。
[0058] 本插件在实际使用时，相关的网站开发人员可以搭建一个服务器系统来接收本插件远程传输过来的数据，由该服务器系统将多个客户端浏览器插件发送过来的数据整合，进行统计汇总，生成报表。这样网站开发人员可以更全面的了解不同地区，不同浏览器，不同网络带宽
访问不同网站所表现出来的网站性能数据，这为改善网站的用户体验提供了更加详细的参考依据。
[0059] 根据上述方案形成的WEB页面性能检测与采集分析插件在使用时，可在WEB页面性能检测与采集分析插件站点下载并安装本插件。本插件适用于不同的浏览器，其支持IE、Chrome、Opera、Firefox、Safari等主流浏览器，在以为IE
内核浏览器中称为ActiveX插件，在Chrome浏览器中称为Chrome扩展程序，在Firefox浏览器称为附加组件。
[0060] 在完成插件的安装和使用后，还需要对插件相关功能进行配置：
[0061] 1、报表设置，如将性能检测数据生成报表设置为启用，默认为启用；定时自动生成相应的报表信息到指定目录，如C:\Documents and Settings\Administrator目录中等等。
[0062] 2、检测网站设置，对插件检测网页范围和检测文件类型进行设置。
[0063] 3、远程传输设置，开启远程传输功能，并设置传输时的一些参数如IP地址、端口、传输的时间间隔等等。
[0064] 在完成插件功能的设置后，即可通过该插件进行WEB页面性能检测与采集分析。
[0065] 参见图1，整个WEB页面性能检测与采集分析过程包括如下步骤：
[0066] 1、用户打开浏览器后，输入网址或点击网址链接，将触发浏览器HTTP连接请求。
[0067] 2、安装在浏览器中的插件开始检测浏览器的一系列HTTP请求与响应信息、浏览器页面渲染信息。
[0068] 3、安装在浏览器中的插件将循环捕捉浏览器窗口打开与重新加载事件。
[0069] 4、安装在浏览器中的插件根据之前配置的检测网页范围和检测文件类型对捕捉到的网页和文件分别进行网页范围和文件类型的匹配：若匹配进入步骤5，若不匹配进入步骤3.
[0070] 5、插件将浏览器从发送HTTP请求到页面完全加载完成的资源或事件数据、消耗的时间数据保存在内存中。
[0071] 本步骤实现WEB页面性能检测数据的采集，具体的数据包括：
[0072] 1）、请求网址、请求的目标主机、请求方法、建立TCP连接花费的时间。
[0073] 2）、响应HTTP头信息中的状态码、是否启用压缩、是否启用缓存、缓存时间、服务器类型与版本信息。
[0074] 3）、首屏时间、首次渲染时间。
[0075] 如IE浏览器800*600区域全部显示完成的时间为首屏时间，实际页面总加载时间可能更长。
[0076] 4）、请求页面大小、加载时间。
[0077] 5）、与请求页面相关的脚本文件、样式文件、图片的数量、大小、加载时间；
[0078] 一个页面的请求等于一个或多个URL的请求，页面上的脚本、图片、样式等文件都是一个个单独的请求，这些文件越多，页面发送的请求也就越多，而每一次请求就要多占用一次CPU使用、多一次TCP连接的时间。请求页面与相关文件的大小与数量对WEB页面的性能有很大的影响，同时页面与相关文件加载的时间也是一个重要的性能指标，同时页面DOM元素的多少与页面加载的快慢也有很大的关系的，减少无用的DOM元素，可以大大加快页面加载的速度。
[0079] 6）、页面DOM元素的数量。
[0080] 另外还采集本地IP地址，浏览器的名称与版本信息。
[0081] 6、完成
数据采集后，插件根据远程传输设置要求，判断是否将采集的数据进行远程传输，若该插件设置成启用远程传输，该插件将存储在内存中的网站性能检测数据以JSON格式的文本直接发送到指定目标地址；若若该插件没有启用远程传输，插件将进行后续的数据分析和报表生成步骤。
[0082] 7、插件根据之前关于报表的相关设置，判断是否满足报表生成间隔时间即是否≥上次报表生成间隔时间；若满足，则转入步骤3；若满足，则转入步骤8。
[0083] 8、插件根据之前关于报表的相关设置对采集到的WEB页面性能检测数据进行分析，并生成报表文件，完成此次WEB页面性能检测与采集分析。
[0084] 9、插件监听浏览器事件，判断浏览器是否关闭，若没有转入步骤3继续进行WEB页面性能检测与采集分析；若关闭，则完成此次WEB页面性能检测与采集分析。
[0085] 由此可知，本发明提供的插件在实施时可定期将相关网站性能数据分析汇总，生成相应的报表文件，并清空保存在内存中的检测数据；如果启用远程传输，本插件将不会在本地生成报表文件，而只是将获取的浏览器性能检测数据转
化成JSON格式的文本直接发送到指定目标地址。
[0086] 以上显示和描述了本发明的基本原理、主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述
实施例的限制，上述实施例和
说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的
权利要求书及其等效物界定。
