一种基于浏览器的web页面性能检测与采集分析插件以及方法
【技术领域】
[0001]本发明涉及一种基于浏览器的插件，特别涉及一种基于浏览器的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](I)检测页面的网络请求、响应信息；
[0013](2)首次渲染时间与首屏时间；
[0014](3)页面大小，页面加载的脚本文件、样式文件、图片的数量、大小、加载的时间，以及页面DOM元素数量。
[0015]再进一步的，所述检测页面的网络请求信息包括:请求网址、请求的目标主机、请求方法、建立TCP连接花费的时间；网络响应信息包括:响应HTTP头信息中的状态码、是否启用压缩、是否启用缓存、缓存时间、服务器类型与版本信息。
[0016]再进一步的，所述插件检测的首次渲染时间是用户感受上是从点击一个页面链接开始到跳转到新页面前停留在原页面的时间；所述首屏时间是指浏览器窗口上部区域被充满所需时间。
[0017]进一步的，所述插件对采集到数据进行定时分析，并按各种不同类别进行处理，生成相应的统计报表。
[0018]进一步的，所述插件定时将采集到的数据以JSON格式的文本通过HTTP协议发送到目标地址，如果在一定时间内不能连接到目录地址，则插件自动禁用远程传输。
[0019]作为本发明的第二目的，一种WEB页面性能检测与采集分析方法，所述方法包括如下步骤:
[0020](I)通过插件捕捉浏览器窗口打开与重新加载事件；
[0021](2)将浏览器从发送HTTP请求到页面完全加载完成的资源或事件数据、消耗的时间数据保存在内存中；
[0022](3)对获取的数据进行分析处理。
[0023]进一步的，所述步骤(I)中插件在浏览器HTTP连接请求被触发后，开始检测浏览器的一系列HTTP请求与响应信息以及浏览器页面渲染信息。
[0024]进一步的，在步骤(I)前还包括插件配置步骤，该配置步骤针对插件进行如下配置操作:报表设置、检测网站设置以及远程传输设置。
[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页面进行各项功能检测以及对页面产生的网络请求、响应信息和检测后的数据进行收集(暂存系统内存中)；报表模块负责将收集到的数据经分析处理后生成报表文件(将收集过的数据从内存清除)；远程传输模块负责将收集到的数据直接发送到指定目标地址(将收集过的数据从内存清除)；远程传输模