展示HTML5页面响应时间的方法、装置和计算机设备制造方法及图纸

本公开涉及一种展示HTML5页面响应时间的方法、装置、计算机设备、存储介质和计算机程序产品。通过将基础池中的HTML5统一资源定位器传入浏览器窗口，并加载浏览器窗口中的HTML5页面的数据信息，调用页面的性能数据得到HTML5页面从输入网址至开始接受到数据的时间差、HTML5页面从开始接受到数据至加载完所述HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差并在前端展示HTML5页面的响应时长趋势图。能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。提高了线上业务数据的稳定性和可靠性。提高了线上业务数据的稳定性和可靠性。

【技术实现步骤摘要】
展示HTML5页面响应时间的方法、装置和计算机设备


[0001]本公开涉及移动互联网
，特别是涉及一种展示HTML5页面响应时间的方法、装置和计算机设备。

技术介绍

[0002]随着移动互联网行业快速发展，HTML5页面因其自身跨平台的优势，深受移动开发者的欢迎，HTML5页面技术也被大规模的普及应用。为了更好地展示产品信息，许多的应用软件都会嵌入无数个HTML5页面，HTML5页面上会加载许多的数据信息。这就要求页面的响应时间需要始终保持在合理稳定的范围内。
[0003]通过传统的人工去手动检验，测试人员手动去打开一个个HTML5页面，然后通过肉眼去直观判断页面是否能正常加载，按照自己的专业经验去判断是否存在响应时间变长的问题，这种方法耗时耗力，且对响应时间的判断存在较大的误差，无法精确统计有效信息。通过借助辅助工具，目前主要还是通过Fiddler抓包工具，去抓取HTML5统一资源定位器链接，通过查看statistics里面的Overall Elapsed的响应时间进行统计分析，这种方法因为需要每个链接都得去点开，无法做到批量定时检查，操作麻烦，效率低下。
[0004]因此，如何保障页面的数据能够及时、高效、准确的展示，如何准确有效地了解HTML5页面的响应时间，并对响应时间出现异常的页面，进行预警提示并第一时间介入排查和优化，是现在急需解决的问题。

技术实现思路

[0005]基于此，有必要针对上述技术问题，提供一种能够及时、高效、准确的展示HTML5页面响应时间的方法、装置和计算机设备。
[0006]第一方面，本公开提供了一种展示HTML5页面响应时间的方法。所述方法包括：
[0007]将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；
[0008]加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；
[0009]根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；
[0010]在前端展示所述响应时长趋势图。
[0011]在其中一个实施例中，所述将基础池中的HTML5统一资源定位器传入浏览器窗口之前，所述方法还包括：
[0012]收集所述HTML5统一资源定位器信息，将所述HTML5统一资源定位器的地址信息以
JSON格式存放于基础池中；
[0013]启动一个独立的浏览器窗口，所述浏览器窗口通过调用驱动程序得到。
[0014]在其中一个实施例中，所述通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据包括：
[0015]根据window.performance.timing得到navigationStart、responseStart和domComplete，所述window.performance.timing通过JavaScript得到；
[0016]根据所述navigationStart和responseStart计算所述HTML5页面的第一维度数据；
[0017]根据responseStart和domComplete计算所述HTML5页面的第二维度数据；
[0018]根据所述第一维度数据和所述第二维度数据，计算所述HTML5页面的第三维度数据。
[0019]在其中一个实施例中，所述在前端展示所述响应时长趋势图还包括：在前端展示平均响应时长趋势图，所述平均响应时长趋势图通过所述响应时长趋势图和所述HTML5页面的响应次数得到。
[0020]在其中一个实施例中，所述在前端展示所述响应时长趋势图包括：
[0021]在前端展示所述HTML5页面的关键信息，所述关键信息包括所述HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息。
[0022]在其中一个实施例中，所述方法还包括：
[0023]当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，触发消息报警，所述页面数值为HTML5页面的第三维度数据。
[0024]第二方面，本公开还提供了一种展示HTML5页面响应时间的装置。所述装置包括：
[0025]传入模块，用于将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；
[0026]时间差计算模块，用于加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；
[0027]绘制模块，用于根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；
[0028]展示模块，用于在前端展示所述响应时长趋势图。
[0029]第三方面，本公开还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现本公开任一项实施例所述的方法。
[0030]第四方面，本公开还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本公开任一项实施例所述的方法。
[0031]第五方面，本公开还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现本公开任一项实施例所述的方法。
[0032]上述展示HTML5页面响应时间的方法、装置和计算机设备，通过将基础池中的HTML5统一资源定位器传入浏览器窗口，并加载浏览器窗口中的HTML5页面的数据信息，调用页面的性能数据得到HTML5页面从输入网址至开始接收到数据的时间差、HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差并在前端展示HTML5页面的响应时长趋势图。能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。
附图说明
[0033]为了更清楚地说明本说明书实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本说明本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种展示HTML5页面响应时间的方法，其特征在于，所述方法包括：将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；在前端展示所述响应时长趋势图。2.根据权利要求1所述的方法，其特征在于，所述将基础池中的HTML5统一资源定位器传入浏览器窗口之前，所述方法还包括：收集所述HTML5统一资源定位器信息，将所述HTML5统一资源定位器的地址信息以JSON格式存放于基础池中；启动一个独立的浏览器窗口，所述浏览器窗口通过调用驱动程序得到。3.根据权利要求1所述的方法，其特征在于，所述通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据包括：根据window.performance.timing得到navigationStart、responseStart和domComplete，所述window.performance.timing通过JavaScript得到；根据所述navigationStart和responseStart计算所述HTML5页面的第一维度数据；根据responseStart和domComplete计算所述HTML5页面的第二维度数据；根据所述第一维度数据和所述第二维度数据，计算所述HTML5页面的第三维度数据。4.根据权利要求1所述的方法，其特征在于，所述在前端展示所述响应时长趋势图还包括：在前端展示平均响应时长趋势图，所述平...

【专利技术属性】
技术研发人员：林斌，唐磊，李俊，
申请(专利权)人：企查查科技有限公司，
类型：发明
国别省市：