CN114036421A - 展示html5页面响应时间的方法、装置和计算机设备 - Google Patents

展示html5页面响应时间的方法、装置和计算机设备 Download PDF

Info

Publication number
CN114036421A
CN114036421A CN202111360552.XA CN202111360552A CN114036421A CN 114036421 A CN114036421 A CN 114036421A CN 202111360552 A CN202111360552 A CN 202111360552A CN 114036421 A CN114036421 A CN 114036421A
Authority
CN
China
Prior art keywords
html5
data
page
html5 page
dimension data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111360552.XA
Other languages
English (en)
Inventor
林斌
唐磊
李俊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qichacha Technology Co ltd
Original Assignee
Qichacha Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qichacha Technology Co ltd filed Critical Qichacha Technology Co ltd
Priority to CN202111360552.XA priority Critical patent/CN114036421A/zh
Publication of CN114036421A publication Critical patent/CN114036421A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

展示HTML5页面响应时间的方法、装置和计算机设备
技术领域
本公开涉及移动互联网技术领域，特别是涉及一种展示HTML5页面响应时间的方法、装置和计算机设备。
背景技术
随着移动互联网行业快速发展，HTML5页面因其自身跨平台的优势，深受移动开发者的欢迎，HTML5页面技术也被大规模的普及应用。为了更好地展示产品信息，许多的应用软件都会嵌入无数个HTML5页面，HTML5页面上会加载许多的数据信息。这就要求页面的响应时间需要始终保持在合理稳定的范围内。
通过传统的人工去手动检验，测试人员手动去打开一个个HTML5页面，然后通过肉眼去直观判断页面是否能正常加载，按照自己的专业经验去判断是否存在响应时间变长的问题，这种方法耗时耗力，且对响应时间的判断存在较大的误差，无法精确统计有效信息。通过借助辅助工具，目前主要还是通过Fiddler抓包工具，去抓取HTML5统一资源定位器链接，通过查看statistics里面的Overall Elapsed的响应时间进行统计分析，这种方法因为需要每个链接都得去点开，无法做到批量定时检查，操作麻烦，效率低下。
因此，如何保障页面的数据能够及时、高效、准确的展示，如何准确有效地了解HTML5页面的响应时间，并对响应时间出现异常的页面，进行预警提示并第一时间介入排查和优化，是现在急需解决的问题。
发明内容
基于此，有必要针对上述技术问题，提供一种能够及时、高效、准确的展示HTML5页面响应时间的方法、装置和计算机设备。
第一方面，本公开提供了一种展示HTML5页面响应时间的方法。所述方法包括：
将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；
加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；
根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；
在前端展示所述响应时长趋势图。
在其中一个实施例中，所述将基础池中的HTML5统一资源定位器传入浏览器窗口之前，所述方法还包括：
收集所述HTML5统一资源定位器信息，将所述HTML5统一资源定位器的地址信息以JSON格式存放于基础池中；
启动一个独立的浏览器窗口，所述浏览器窗口通过调用驱动程序得到。
在其中一个实施例中，所述通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据包括：
根据window.performance.timing得到navigationStart、responseStart和domComplete，所述window.performance.timing通过JavaScript得到；
根据所述navigationStart和responseStart计算所述HTML5页面的第一维度数据；
根据responseStart和domComplete计算所述HTML5页面的第二维度数据；
根据所述第一维度数据和所述第二维度数据，计算所述HTML5页面的第三维度数据。
在其中一个实施例中，所述在前端展示所述响应时长趋势图还包括：在前端展示平均响应时长趋势图，所述平均响应时长趋势图通过所述响应时长趋势图和所述HTML5页面的响应次数得到。
在其中一个实施例中，所述在前端展示所述响应时长趋势图包括：
在前端展示所述HTML5页面的关键信息，所述关键信息包括所述HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息。
在其中一个实施例中，所述方法还包括：
当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，触发消息报警，所述页面数值为HTML5页面的第三维度数据。
第二方面，本公开还提供了一种展示HTML5页面响应时间的装置。所述装置包括：
传入模块，用于将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；
时间差计算模块，用于加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；
绘制模块，用于根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；
展示模块，用于在前端展示所述响应时长趋势图。
第三方面，本公开还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现本公开任一项实施例所述的方法。
第四方面，本公开还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本公开任一项实施例所述的方法。
第五方面，本公开还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现本公开任一项实施例所述的方法。
上述展示HTML5页面响应时间的方法、装置和计算机设备，通过将基础池中的HTML5统一资源定位器传入浏览器窗口，并加载浏览器窗口中的HTML5页面的数据信息，调用页面的性能数据得到HTML5页面从输入网址至开始接收到数据的时间差、HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差并在前端展示HTML5页面的响应时长趋势图。能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。
附图说明
为了更清楚地说明本说明书实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为一个实施例中展示HTML5页面响应时间的方法的应用环境图。
图2为一个实施例中展示HTML5页面响应时间的方法的流程示意图。
图3为一个实施例中展示HTML5页面响应时间的方法的流程示意图。
图4为另一个实施例中调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据的流程示意图。
图5为一个实施例中展示HTML5页面响应时间的方法的流程示意图。
图6为一个实施例中展示HTML5页面响应时间的方法的流程示意图。
图7为一个实施例中展示HTML5页面响应时间的方法的流程示意图。
图8为一个实施例中展示HTML5页面响应时间的装置的结构框图。
图9为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本公开的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本公开进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本公开，并不用于限定本公开。
本公开实施例提供的展示HTML5页面响应时间的方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。通过将终端102中基础池的HTML5统一资源定位器传入浏览器窗口，并加载浏览器窗口中的HTML5页面的数据信息。在终端102调用页面的性能数据得到HTML5页面从输入网址至开始接收到数据的时间差、HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差并在前端展示HTML5页面的响应时长趋势图。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
在一个实施例中，如图2所示，提供了一种展示HTML5页面响应时间的方法，以该方法应用于图1中的终端为例进行说明，包括步骤S202至步骤S208：
S202、将基础池中的HTML5统一资源定位器传入浏览器窗口，基础池用于存储HTML5统一资源定位器。
其中，基础池可以包括用于存储HTML5统一资源定位器的路径地址。HTML5可以包括构建Web内容的一种语言描述方式。HTML5还可以包括互联网的下一代标准。HTML5还可以包括构建以及呈现互联网内容的一种语言方式。统一资源定位器可以包括URL。统一资源定位器还可以包括因特网的万维网服务程序上用于指定信息位置的表示方法。浏览器可以包括用来检索、展示以及传递Web信息资源的应用程序。浏览器窗口还可以包括Chrome浏览器。
具体地，将基础池中存储的HTML5统一资源定位器传入至浏览器的窗口中，在一些实施方式中，可以包括将基础池中的HTML5统一资源定位器传入至Chrome浏览器窗口中。
S204、加载浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差。
其中，HTML5页面的数据信息可以包括HTML5页面本身所携带的，并通过前端进行页面渲染的元素内容，包括但不限于各种文本、图像、动画、视频音乐、超链接、表格、表单和各类控件等。
具体地，可以加载浏览器窗口中的HTML5页面本身所携带的，并通过前端进行页面渲染的元素内容，包括但不限于各种文本、图像、动画、视频音乐、超链接、表格、表单和各类控件等。在一些实施方式中，可以通过页面的性能数据得到HTML5页面从输入网址至开始接收到数据的时间差、HTML5页面从开始接收到数据至加载完HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完HTML5页面的数据信息的时间差。
S206、根据第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图。
其中，前端可以包括网站前台部分，也可以包括前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端还可以包括终端显示界面，如手机显示屏、电脑显示器等。绘制可以包括前端图表绘制的过程。
具体地，可以根据HTML5页面的第一维度数据、第二维度数据、第三维度数据，在前端绘制并展示HTML5页面的响应时长趋势图。在一些实施方式中，还可以包括根据HTML5页面的第一维度数据、第二维度数据、第三维度数据，在终端显示界面，如手机显示屏、电脑显示器等绘制并展示HTML5页面的响应时长趋势图。在一些实施方式中，可以采用pyecharts通过将数据库中存储的各个字段值，运行次数，运行时间，运行结果，失败时间，失败次数进行页面的响应时长趋势图的绘制，其中，pyecharts可以包括一个用于生成Echarts图表的类库。
S208、在前端展示响应时长趋势图。
具体地，可以在网站前台部分，也可以在前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页上，还可以在终端显示界面，如手机显示屏、电脑显示器等展示响应时长趋势图。
上述展示HTML5页面响应时间的方法中，通过将基础池中的HTML5统一资源定位器传入浏览器窗口，并加载浏览器窗口中的HTML5页面的数据信息，调用页面的性能数据得到HTML5页面从输入网址至开始接收到数据的时间差、HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差并在前端展示HTML5页面的响应时长趋势图。能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。
在一个实施例中，如图3所示，步骤S202将基础池中的HTML5统一资源定位器传入浏览器窗口之前，方法还包括步骤S302和步骤S304：
S302、收集HTML5统一资源定位器信息，将HTML5统一资源定位器的地址信息以JSON格式存放于基础池中。
其中，JSON格式可以包括一种数据格式。JSON还可以包括一种轻量级的数据交换格式。JSON格式包括基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
具体地，可以将HTML5统一资源定位器信息以JSON格式存放于基础池中。在一些实施方式中，可以将预先设定的页面的所有HTML5统一资源定位器信息以JSON格式存放于基础池中。
S304、启动一个独立的浏览器窗口，浏览器窗口通过调用驱动程序得到。
其中，浏览器窗口可以包括菜单栏、编辑工具栏、标准按钮、地址路径、详细信息栏等。浏览器窗口还可以包括Chrome浏览器窗口。驱动程序可以包括ChromeDriver驱动程序。
具体地，可以通过调用驱动程序启动一个独立的浏览器串口，在一些实施方式中，可以通过Selenium调用ChromeDriver驱动程序，通过驱动程序控制，启动一个独立的Chrome浏览器窗口。
本实施例中，可以通过HTML5统一资源定位器信息以JSON格式存放于基础池中，并且通过Selenium调用ChromeDriver驱动程序，通过驱动程序控制，启动一个独立的Chrome浏览器窗口，能够达到将预先设定的页面的所有HTML5统一资源定位器信息以JSON格式存放于基础池中，能够及时、高效、准确的展示HTML5页面的响应时间，并对异常的页面进行预警提示。
在一个实施例中，如图4所示，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据包括步骤S402至步骤S408：
S402、根据window.performance.timing得到navigationStart、responseStart和domComplete，window.performance.timing通过JavaScript得到。
其中，window.performance.timing可以包括对象包含了完整的网页加载性能的数据。navigationStart可以包括浏览器开始卸载前一个页面文档的开始时间节点。responseStart可以包括浏览器收到从服务端或者缓存或者本地资源等响应回的第一个字节的时间节点。domComplete可以包括HTML文档完全解析完毕的时间节点。
具体地，可以通过调用JavaScript，得到浏览器的PerformancceTiming API后，根据PerformancceTiming API得到页面完整的网页加载性能数据window.performance.timing。可以根据window.performance.timing得到浏览器开始卸载前一个页面文档的开始时间节点、浏览器收到从服务端或者缓存或者本地资源等响应回的第一个字节的时间节点和HTML文档完全解析完毕的时间节点。
S404、根据navigationStart和responseStart计算HTML5页面的第一维度数据。
具体地，将navigationStart与responseStart做差，计算HTML5页面的第一维度数据。在一些实施方式中，HTML5页面的第一维度数据可以通过navigationStart-responseStart得到。
S406、根据responseStart和domComplete计算HTML5页面的第二维度数据。
具体地，将responseStart和domComplete做差，可以得到HTML5页面的第二维度数据。在一些实施方式中，可以通过responseStart-domComplete得到HTML5页面的第二维度数据。
S408、根据第一维度数据和第二维度数据，计算HTML5页面的第三维度数据。
具体地，将第一维度数据和第二维度数据相加，得到HTML5页面的第三维度数据。
本实施例中，通过调用JavaScript，得到navigationStart、responseStart和domComplete，window.performance.timing，根据navigationStart和responseStart计算HTML5页面的第一维度数据。根据responseStart和domComplete计算HTML5页面的第二维度数据。根据第一维度数据和第二维度数据，计算HTML5页面的第三维度数据。能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。
在一个实施例中，如图5所示，在前端展示响应时长趋势图还包括步骤S502：
S502、在前端展示平均响应时长趋势图，平均响应时长趋势图通过响应时长趋势图和HTML5页面的响应次数得到。
其中，平均响应时长趋势图可以包括页面的平均响应时间。响应时长趋势图可以包括页面的响应时间，响应时间可以包括页面从输入网址至加载完所述页面的数据信息的时间差。
具体地，可以在前端展示平均响应时长趋势图，平均响应时长趋势图可以通过响应时长趋势图和HTML5页面的响应次数得到。在一些实施方式中，平均响应时长趋势图中页面平均响应时间可以通过页面每次的响应时间之和之除以页面的响应次数得到。
本实施例中，通过在前端展示平均响应时长趋势图，可以高效、准确的展示HTML5页面的响应时间。
在一个实施例中，在前端展示响应时长趋势图包括：
在前端展示HTML5页面的关键信息，关键信息包括HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息。
其中，失败时间信息可以包括页面直接404或其他不可用的情况，或者页面请求响应严重超时导致请求异常等非正常情况。
具体地，可以在前端展示HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息。
本实施例中，通过在前端展示HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息，能够及时、高效、准确的展示HTML5页面的响应时间，提高了线上业务数据的稳定性和可靠性。
在一个实施例中，如图6所示，方法还包括步骤S602：
S602、当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，触发消息报警，所述页面数值为HTML5页面的第三维度数据。
其中，监测可以包括通过Python任务调度框架Advanced Python Scheduler(APScheduler)，自动实现对基础池中的HTML5统一资源定位器的定时调度作业。AdvancedPython Scheduler(APScheduler)可以包括一个轻量级的Python定时任务调度框架(Python库)，可以使得Python代码稍后执行，也可以只执行一次，也可以定期执行。APScheduler还可以用作跨平台、特定于应用程序的平台特定调度器的替代品。响应时间警戒阈值可以包括在前端页面预设的多个埋点数据统计得到，将获取到的埋点数据进行统计分析，计算出一个符合业务特点和功能的合理的响应时间作为响应时间警戒阈值。消息报警可以包括当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，发出预警消息。。
具体地，可以通过Python任务调度框架APScheduler，自动实现对基础池中的HTML5统一资源定位器的定时调度作业。当监测到HTML5页面的页面数值超过警戒线时，直接触发消息报警。在一些实施方式中，当监测到HTML5页面的页面数值超过警戒线时，触发钉钉消息报警，也可以包括触发基于其他平台如企业微信、邮件等的推送报警。进一步地，触发消息报警还可以包括和钉钉相集成的平台如Grafana等进行消息报警。
本实施例中，通过监测到HTML5页面的页面数值超过警戒线时，触发消息报警，能够及时、高效、准确的展示HTML5页面的响应时间，并对响应时间出现异常的页面进行预警提示，提高了线上业务数据的稳定性和可靠性。
在一个实施例中，如图7所示，提供了一种展示HTML5页面响应时间的方法，包括步骤S702至步骤S720：
S702、收集HTML5统一资源定位器信息，将HTML5统一资源定位器的地址信息以JSON格式存放于基础池中。
S704、启动一个独立的浏览器窗口，浏览器窗口通过调用驱动程序得到。
S706、将基础池中的HTML5统一资源定位器传入浏览器窗口，基础池用于存储HTML5统一资源定位器。
S708、根据window.performance.timing得到navigationStart、responseStart和domComplete，window.performance.timing通过JavaScript得到。
S710、根据navigationStart和responseStart计算HTML5页面的第一维度数据。
S712、根据responseStart和domComplete计算HTML5页面的第二维度数据。
S714、根据第一维度数据和第二维度数据，计算HTML5页面的第三维度数据。
S716、根据第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图。
S718、在前端展示响应时长趋势图。
S720、当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，触发消息报警，所述页面数值为HTML5页面的第三维度数据。
应该理解的是，虽然附图2-7的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，附图2-7中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思，本公开实施例还提供了一种用于实现上述所涉及的展示HTML5页面响应时间的方法的展示HTML5页面响应时间的装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个展示HTML5页面响应时间的装置实施例中的具体限定可以参见上文中对于展示HTML5页面响应时间的方法的限定，在此不再赘述。
在一个实施例中，如图8所示，提供了一种展示HTML5页面响应时间的装置800，包括：传入模块802、时间差计算模块804、绘制模块806和展示模块808，其中：
传入模块802，用于将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器。
时间差计算模块804，用于加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差。
绘制模块806，用于根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图。
展示模块808，用于在前端展示所述响应时长趋势图。
上述展示HTML5页面响应时间的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种展示HTML5页面响应时间的方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图9中示出的结构，仅仅是与本公开方案相关的部分结构的框图，并不构成对本公开方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各方法实施例中的步骤。
在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本公开所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本公开所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本公开所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上实施例仅表达了本公开的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本公开专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本公开构思的前提下，还可以做出若干变形和改进，这些都属于本公开的保护范围。因此，本公开的保护范围应以所附权利要求为准。

Claims (10)

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所述的方法，其特征在于，所述在前端展示所述响应时长趋势图还包括：在前端展示平均响应时长趋势图，所述平均响应时长趋势图通过所述响应时长趋势图和所述HTML5页面的响应次数得到。
5.根据权利要求1所述的方法，其特征在于，所述在前端展示所述响应时长趋势图包括：
在前端展示所述HTML5页面的关键信息，所述关键信息包括所述HTML5页面的响应时间信息、运行时间信息、失败时间信息、总的响应次数信息和运行结果信息。
6.根据权利要求1-5中任一项所述的方法，其特征在于，所述方法还包括：
当监测到HTML5页面的页面数值超过预设的响应时间警戒阈值时，触发消息报警，所述页面数值为HTML5页面的第三维度数据。
7.一种展示HTML5页面响应时间的装置，其特征在于，所述装置包括：
传入模块，用于将基础池中的HTML5统一资源定位器传入浏览器窗口，所述基础池用于存储所述HTML5统一资源定位器；
时间差计算模块，用于加载所述浏览器窗口中的HTML5页面的数据信息，通过调用页面的性能数据得到第一维度数据、第二维度数据、第三维度数据，所述第一维度数据包括所述HTML5页面从输入网址至开始接收到数据的时间差、所述第二维度数据包括HTML5页面从开始接收到数据至加载完所述HTML5页面的数据信息的时间差、所述第三维度数据包括所述HTML5页面从输入网址至加载完所述HTML5页面的数据信息的时间差；
绘制模块，用于根据所述第一维度数据、第二维度数据、第三维度数据，绘制HTML5页面的响应时长趋势图；
展示模块，用于在前端展示所述响应时长趋势图。
8.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。
9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。
10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。
CN202111360552.XA 2021-11-17 2021-11-17 展示html5页面响应时间的方法、装置和计算机设备 Pending CN114036421A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111360552.XA CN114036421A (zh) 2021-11-17 2021-11-17 展示html5页面响应时间的方法、装置和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111360552.XA CN114036421A (zh) 2021-11-17 2021-11-17 展示html5页面响应时间的方法、装置和计算机设备

Publications (1)

Publication Number Publication Date
CN114036421A true CN114036421A (zh) 2022-02-11

Family

ID=80137999

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111360552.XA Pending CN114036421A (zh) 2021-11-17 2021-11-17 展示html5页面响应时间的方法、装置和计算机设备

Country Status (1)

Country Link
CN (1) CN114036421A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117763255A (zh) * 2023-10-11 2024-03-26 中国电力科学研究院有限公司 一种浏览器数据进行机器学习后评估业务系统性能的方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117763255A (zh) * 2023-10-11 2024-03-26 中国电力科学研究院有限公司 一种浏览器数据进行机器学习后评估业务系统性能的方法
CN117763255B (zh) * 2023-10-11 2024-09-13 中国电力科学研究院有限公司 一种浏览器数据进行机器学习后评估业务系统性能的方法

Similar Documents

Publication Publication Date Title
WO2020253059A1 (zh) 多级联动下拉框的实现方法、装置和计算机设备
CN110704771A (zh) 页面异常监控方法、系统、装置、电子设备及可读介质
CN114780895A (zh) 业务对象推荐方法、装置、计算机设备和存储介质
CN115480987A (zh) 链路数据展示方法、装置和计算机设备
CN114036421A (zh) 展示html5页面响应时间的方法、装置和计算机设备
CN116644250B (zh) 页面检测方法、装置、计算机设备和存储介质
CN112528189B (zh) 基于数据的组件封装方法、装置、计算机设备及存储介质
CN114417112A (zh) 数据处理方法、数据处理装置、电子设备和存储介质
CN114844851A (zh) 信息显示方法、装置、计算机设备和存储介质
CN114138970A (zh) 内容审核流程异步化交互方法、装置及存储介质
CN116700725B (zh) 页面生成方法、装置、计算机设备和存储介质
CN115878715A (zh) 一种页面展示方案的生成方法、装置、计算机设备
CN118484233A (zh) 任务处理方法、装置、计算机设备和存储介质
CN116541145A (zh) 数据调用方法、装置、计算机设备和计算机存储介质
CN118502884A (zh) 一种页面警告框定位方法、装置、计算机设备、存储介质
CN115270766A (zh) 一种针对长文本提取结果的数据质量校验方法
CN117216164A (zh) 金融数据同步处理方法、装置、设备、介质和程序产品
CN116681203A (zh) 基于大数据分析的企业管理咨询方法与系统
CN118568357A (zh) 推荐产品确定方法、装置、终端、服务器、介质及产品
CN118485440A (zh) 业务数据监控方法、系统、电子设备、存储介质
CN118035052A (zh) 一种断点事件的处理方法、装置、计算机设备
CN117193924A (zh) 页面展示方法、装置和计算机设备
CN117234639A (zh) 一种业务数据的展示方法、装置、计算机设备
CN116860576A (zh) 操作日志的记录方法、装置、计算机设备和存储介质
CN114925087A (zh) 数据获取方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Country or region after: China

Address after: No. 8 Huizhi Street, Suzhou Industrial Park, Suzhou Area, China (Jiangsu) Pilot Free Trade Zone, Suzhou City, Jiangsu Province, 215000

Applicant after: Qichacha Technology Co.,Ltd.

Address before: Room 503, 5 / F, C1 building, 88 Dongchang Road, Suzhou Industrial Park, 215000, Jiangsu Province

Applicant before: Qicha Technology Co.,Ltd.

Country or region before: China

CB02 Change of applicant information