CN113076234A - 一种html5页面实时监测的方法 - Google Patents

一种html5页面实时监测的方法 Download PDF

Info

Publication number
CN113076234A
CN113076234A CN202110361032.4A CN202110361032A CN113076234A CN 113076234 A CN113076234 A CN 113076234A CN 202110361032 A CN202110361032 A CN 202110361032A CN 113076234 A CN113076234 A CN 113076234A
Authority
CN
China
Prior art keywords
time
terminal
page
server
monitoring
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.)
Granted
Application number
CN202110361032.4A
Other languages
English (en)
Other versions
CN113076234B (zh
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.)
Multipoint Shenzhen Digital Technology Co ltd
Original Assignee
Multipoint Shenzhen Digital 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 Multipoint Shenzhen Digital Technology Co ltd filed Critical Multipoint Shenzhen Digital Technology Co ltd
Priority to CN202110361032.4A priority Critical patent/CN113076234B/zh
Publication of CN113076234A publication Critical patent/CN113076234A/zh
Application granted granted Critical
Publication of CN113076234B publication Critical patent/CN113076234B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3051—Monitoring arrangements for monitoring the configuration of the computing system or of the computing system component, e.g. monitoring the presence of processing resources, peripherals, I/O links, software programs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/07—Responding to the occurrence of a fault, e.g. fault tolerance
    • G06F11/0703—Error or fault processing not based on redundancy, i.e. by taking additional measures to deal with the error or fault not making use of redundancy in operation, in hardware, or in data representation
    • G06F11/0793—Remedial or corrective actions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
    • G06F11/3041—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is an input/output interface

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Quality & Reliability (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Mathematical Physics (AREA)
  • Information Transfer Between Computers (AREA)
  • Debugging And Monitoring (AREA)

Abstract

本发明公开了一种HTML5页面实时监测的方法，其特征在于，包括以下步骤：步骤一：建立终端与服务器之间的监测链接；所述监测链接用于实时传输监测数据和发送指令；步骤二：终端上的HTML5页面实时检测监测链接的执行情况，并在监测链接出错时自动重启监测链接；当监测链接没有出现异常时，则上报正常状态信息给服务器；步骤三：获取终端上HTML5页面的性能信息。本发明通过建立终端与服务器之间的监测链接，实时获取HTML5页面的性能信息，当HTML5页面出现异常时，可由服务器向对应的终端发送修复指令，使终端可根据修复指令对HTML5页面进行修复；本发明可大大减轻屏幕维护人员的工作量，使屏幕维护方式走上智能化和自动化，极大提高屏幕的运行可靠性和可维护性。

Description

一种HTML5页面实时监测的方法
技术领域
本发明涉及计算机技术领域，具体是指一种HTML5页面实时监测的方法。
背景技术
随着技术的发展，html5页面常被用在需要长时间稳定运行的场景中，如实时信息监测屏幕，大数据展现屏幕，交通信息实时监测屏幕等。该类场景需要html5页面长期稳定的运行，以供数据监测人员实时的查看关注数据。在该类场景下，html5页面的稳定运行，接收数据并稳定按照预期渲染在当前的技术方案中，需要由专门人员来控制浏览器上的功能按钮来执行对该屏幕的刷新、关闭、重启等操作，极大的增加了屏幕维护人员的工作量。
发明内容
本发明的目的在于解决上述问题，提供一种HTML5页面实时监测的方法。
本发明的目的通过下述技术方案实现：一种HTML5页面实时监测的方法，包括以下步骤：
步骤一：建立终端与服务器之间的监测链接；所述监测链接用于实时传输监测数据和发送指令；
步骤二：终端上的HTML5页面实时检测监测链接的执行情况，并在监测链接出错时自动重启监测链接；当监测链接没有出现异常时，则上报正常状态信息给服务器；
步骤三：获取终端上HTML5页面的性能信息；
步骤四：根据获取的HTML5页面的性能信息，判断HTML5页面是否存在异常；是，该HTML5页面所在的终端通过其监测链接向服务器实时发送相应的报警信息，并执行步骤五；否，定期向服务器发送页面安全信息，并返回步骤二，继续监测；
步骤五：服务器通过对应的监测链接向该异常HTML5页面所在的终端发送修复指令，终端则根据修复指令对HTML5页面进行修复。
进一步的，所述步骤五还包括以下步骤：服务器向技术维护人员发送维护信息。
所述步骤三中获取终端上HTML5页面的性能信息包括：页面内存使用情况、页面其他http链接的连接情况、页面CPU使用情况、页面JS脚本出错信息、页面屏幕分辨率、页面重启次数。
所述页面其他http链接的连接情况包括：DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间以及onload时间；其中，
DNS查询耗时＝domainLookupEnd-domainLookupStart；其中，domainLookupEnd为DNS查询的结束时间节点，domainLookupStart为DNS查询的开始时间节点；
TCP链接耗时＝connectEnd-connectStart；其中，connectEnd为终端与服务器之间的传输控制协议连接建立成功的时间节点，connectStart为终端与服务器之间的传输控制协议开始连接建立的时间节点；
request请求耗时＝responseEnd-responseStart；其中，responseEnd为浏览器收到从服务器端响应回的最后一个字节数据的时刻，responseStart为浏览器收到从服务器端响应回的第一个字节的时刻；
解析dom树耗时＝domComplete-domInteractive；其中，domComplete为html文档完全解析完毕的时间节点；domInteractive为浏览器解析html文档的状态为DOM树创建完成，但是内嵌资源未加载的状态时间；
白屏时间＝domloading-fetchStart；其中，domloading为页面内容渲染出现的时间节点，fetchStart为终端发起任何请求之前的时间节点；
domready时间＝domContentLoadedEventEnd-fetchStart；其中，domContentLoadedEventEnd为DOM解析完成后，终端内资源加载完成的时间；fetchStart为终端发起任何请求之前的时间节点；
onload时间＝loadEventEnd-fetchStart；其中，loadEventEnd为终端页面资源执行脚本全部准备完毕的时间节点，fetchStart为终端发起任何请求之前的时间节点。
本发明与现有技术相比，具有以下优点及有益效果：本发明通过建立终端与服务器之间的监测链接，实时获取HTML5页面的性能信息，当HTML5页面出现异常时，可由服务器向对应的终端发送修复指令，使终端可根据修复指令对HTML5页面进行修复；本发明可大大减轻屏幕维护人员的工作量，使屏幕维护方式走上智能化和自动化，极大提高屏幕的运行可靠性和可维护性。
附图说明
图1为本发明的方法流程图。
具体实施方式
下面结合实施例对本发明作进一步的详细说明，但本发明的实施方式不限于此。
实施例
如图1所示，本发明的HTML5页面实时监测的方法，包括以下步骤：
步骤一：建立终端与服务器之间的监测链接，即建立终端与服务器之间的websocket链接。具体方法是，获取HTML5页面执行环境的唯一标识，在终端链接至服务器时，标识执行环境身份，根据页面的ID，建立websocket链接管道。该监测链接是服务器区分众多终端的途径，其用于实时传输监测数据和发送指令。
步骤二：终端上的HTML5页面实时检测监测链接的执行情况，并在监测链接出错时自动重启监测链接。当监测链接没有出现异常时，则上报正常状态信息给服务器。例如，websocket链接状态为error时，间隔5秒后终端重新向服务器发起另一个websocket链接；如果websocke链接无异常，终端则每5秒向服务器传递标识正常状态的数据。
步骤三：终端使用页面执行环境的应用程序接口，获得HTML5页面的性能信息，通过监测链接传至服务器。具体的，获取终端上HTML5页面的性能信息包括：页面内存使用情况、页面其他http链接的连接情况、页面CPU使用情况、页面JS脚本出错信息、页面屏幕分辨率、页面重启次数。
其中，所述页面其他http链接的连接情况包括：DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间以及onload时间；其中，
DNS查询耗时＝domainLookupEnd-domainLookupStart；其中，domainLookupEnd为DNS查询的结束时间节点，domainLookupStart为DNS查询的开始时间节点。
通过DNS查询耗时可监测DNS服务器解析域名至服务器真实IP地址的性能状态，如超出50毫秒，则说明DNS服务器响应过慢，可联系网络运营商或修改终端DNS服务器地址解决。
TCP链接耗时＝connectEnd-connectStart；其中，connectEnd为终端与服务器之间的传输控制协议连接建立成功的时间节点，connectStart为终端与服务器之间的传输控制协议开始连接建立的时间节点。通过TCP链接耗时可监测终端与服务器之间的链接状态。
request请求耗时＝responseEnd-responseStart；其中，responseEnd为浏览器收到从服务器端响应回的最后一个字节数据的时刻，responseStart为浏览器收到从服务器端响应回的第一个字节的时刻。通过request请求耗时可监测服务器对终端发起的请求的相应情况。
解析dom树耗时＝domComplete-domInteractive；其中，domComplete为html文档完全解析完毕的时间节点；domInteractive为浏览器解析html文档的状态为DOM树创建完成，但是图片、js脚本、css样式表等内嵌资源未加载的状态时间；
白屏时间＝domloading-fetchStart；其中，domloading为页面内容渲染出现的时间节点，fetchStart为终端发起任何请求之前的时间节点；
domready时间＝domContentLoadedEventEnd-fetchStart；其中，domContentLoadedEventEnd为DOM解析完成后，终端内资源加载完成的时间；fetchStart为终端发起任何请求之前的时间节点；
onload时间＝loadEventEnd-fetchStart；其中，loadEventEnd为终端页面资源执行脚本全部准备完毕的时间节点，fetchStart为终端发起任何请求之前的时间节点。白屏时间、domready时间以及onload时间可监测终端对HTML5页面的解析性能。
在获取页面内存使用情况信息时，可使用应用程序接口window.performance.memory取得到的三个值usedJSHeapSize(JS对象占用的内存)totalJSHeapSize(可使用的内存)jsHeapSizeLimit(内存大小限制)之间的比例及相互关系计算获得，如页面可使用内存过低，或JS对象占用的内存过高等。
步骤四：根据获取的HTML5页面的性能信息，判断HTML5页面是否存在异常；当存在异常时，该HTML5页面所在的终端通过其监测链接向服务器实时发送相应的报警信息，并执行步骤五；例如，页面内存使用占比已超过可使用内存总量的95％，即实时发送报警信息1；页面数据链接超过设定时间，即实时发送报警信息2；页面重启次数超过5次，即发送实时告警信息3至服务器等等。当HTML5页面没有存在异常时，终端则定期向服务器发送页面安全信息，返回步骤二，继续监测。
步骤五：服务器通过对应的监测链接向该异常HTML5页面所在的终端发送修复指令，终端则根据修复指令对HTML5页面进行修复。具体的，修复指令包括重新初始化页面、断开该屏幕的渲染数据请求链接、重检测、重新开启该屏幕的渲染数据请求链接等。例如，当服务器接收到id为1的终端发送的标识为1的报警信息时，通过相应的监测链接管道发送“重启”指令至终端，终端接收后，会执行window.reload命令，释放内存，并重新初始化页面。又如，当服务器接收到id为1的终端发送的标识为2的报警信息时，通过相应的监测链接管道发送“重链接”指令至终端，终端接收后，将重启所有数据链接。
作为另一种优选方案，所述步骤五还包括以下步骤：服务器向技术维护人员发送维护信息。例如，当服务器接收到id为1的终端发送的标识为3的报警信息时，通过相应的检测链接管道发送“重启”指令至终端，终端接收后，将重新初始化页面，并通过短信邮件等方式，通知技术维护人员人工处理。如上所述，便可很好的实现本发明。

Claims (4)

1.一种HTML5页面实时监测的方法，其特征在于，包括以下步骤：
步骤一：建立终端与服务器之间的监测链接；所述监测链接用于实时传输监测数据和发送指令；
步骤二：终端上的HTML5页面实时检测监测链接的执行情况，并在监测链接出错时自动重启监测链接；当监测链接没有出现异常时，则上报正常状态信息给服务器；
步骤三：获取终端上HTML5页面的性能信息；
步骤四：根据获取的HTML5页面的性能信息，判断HTML5页面是否存在异常；是，该HTML5页面所在的终端通过其监测链接向服务器实时发送相应的报警信息，并执行步骤五；否，定期向服务器发送页面安全信息，并返回步骤二，继续监测；
步骤五：服务器通过对应的监测链接向该异常HTML5页面所在的终端发送修复指令，终端则根据修复指令对HTML5页面进行修复。
2.根据权利要求1所述的一种HTML5页面实时监测的方法，其特征在于，所述步骤五还包括以下步骤：服务器向技术维护人员发送维护信息。
3.根据权利要求1所述的一种HTML5页面实时监测的方法，其特征在于，所述步骤三中获取终端上HTML5页面的性能信息包括：页面内存使用情况、页面其他http链接的连接情况、页面CPU使用情况、页面JS脚本出错信息、页面屏幕分辨率、页面重启次数。
4.根据权利要求3所述的一种HTML5页面实时监测的方法，其特征在于，所述页面其他http链接的连接情况包括：DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间以及onload时间；其中，
DNS查询耗时＝domainLookupEnd-domainLookupStart；其中，domainLookupEnd为DNS 查询的结束时间节点，domainLookupStart为DNS查询的开始时间节点；
TCP链接耗时＝connectEnd-connectStart；其中，connectEnd为终端与服务器之间的传输控制协议连接建立成功的时间节点，connectStart为终端与服务器之间的传输控制协议开始连接建立的时间节点；
request请求耗时＝responseEnd-responseStart；其中，responseEnd为浏览器收到从服务器端响应回的最后一个字节数据的时刻，responseStart为浏览器收到从服务器端响应回的第一个字节的时刻；
解析dom树耗时＝domComplete-domInteractive；其中，domComplete为html文档完全解析完毕的时间节点；domInteractive为浏览器解析html文档的状态为DOM树创建完成，但是内嵌资源未加载的状态时间；
白屏时间＝domloading-fetchStart；其中，domloading为页面内容渲染出现的时间节点，fetchStart为终端发起任何请求之前的时间节点；
domready时间＝domContentLoadedEventEnd-fetchStart；其中，domContentLoadedEventEnd为DOM解析完成后，终端内资源加载完成的时间；fetchStart为终端发起任何请求之前的时间节点；
onload时间＝loadEventEnd-fetchStart；其中，loadEventEnd为终端页面资源执行脚本全部准备完毕的时间节点，fetchStart为终端发起任何请求之前的时间节点。
CN202110361032.4A 2021-04-02 2021-04-02 一种html5页面实时监测的方法 Active CN113076234B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110361032.4A CN113076234B (zh) 2021-04-02 2021-04-02 一种html5页面实时监测的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110361032.4A CN113076234B (zh) 2021-04-02 2021-04-02 一种html5页面实时监测的方法

Publications (2)

Publication Number Publication Date
CN113076234A true CN113076234A (zh) 2021-07-06
CN113076234B CN113076234B (zh) 2022-07-12

Family

ID=76614910

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110361032.4A Active CN113076234B (zh) 2021-04-02 2021-04-02 一种html5页面实时监测的方法

Country Status (1)

Country Link
CN (1) CN113076234B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130305096A1 (en) * 2012-05-11 2013-11-14 Samsung Sds Co., Ltd. System and method for monitoring web service
WO2015196821A1 (zh) * 2014-06-27 2015-12-30 中兴通讯股份有限公司 WebSocket服务器监控方法及装置
US20160352803A1 (en) * 2015-05-28 2016-12-01 Fireglass Ltd. Reconstruction of web pages based on dom serialization
CN109542763A (zh) * 2018-10-16 2019-03-29 深圳壹账通智能科技有限公司 页面监测方法、装置、计算机设备和存储介质
CN109688134A (zh) * 2018-12-26 2019-04-26 多点生活(成都)科技有限公司 数据展示方法及装置
CN110032493A (zh) * 2019-03-13 2019-07-19 平安城市建设科技(深圳)有限公司 页面的监控方法、装置、终端及可读存储介质
CN111124841A (zh) * 2019-12-09 2020-05-08 广州品唯软件有限公司 一种异常页面的报警方法、装置及计算机系统
US20200213208A1 (en) * 2017-06-02 2020-07-02 Greenisle Inc. Method for automatically monitoring end-to-end end user performance and apparatus for performing the method

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130305096A1 (en) * 2012-05-11 2013-11-14 Samsung Sds Co., Ltd. System and method for monitoring web service
WO2015196821A1 (zh) * 2014-06-27 2015-12-30 中兴通讯股份有限公司 WebSocket服务器监控方法及装置
CN105306288A (zh) * 2014-06-27 2016-02-03 中兴通讯股份有限公司 WebSocket服务器监控方法及装置
US20160352803A1 (en) * 2015-05-28 2016-12-01 Fireglass Ltd. Reconstruction of web pages based on dom serialization
US20200213208A1 (en) * 2017-06-02 2020-07-02 Greenisle Inc. Method for automatically monitoring end-to-end end user performance and apparatus for performing the method
CN109542763A (zh) * 2018-10-16 2019-03-29 深圳壹账通智能科技有限公司 页面监测方法、装置、计算机设备和存储介质
CN109688134A (zh) * 2018-12-26 2019-04-26 多点生活(成都)科技有限公司 数据展示方法及装置
CN110032493A (zh) * 2019-03-13 2019-07-19 平安城市建设科技(深圳)有限公司 页面的监控方法、装置、终端及可读存储介质
CN111124841A (zh) * 2019-12-09 2020-05-08 广州品唯软件有限公司 一种异常页面的报警方法、装置及计算机系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
萌主_III: "深入理解前端性能监控—Performance + 腾讯superProfiler（基于Performance API的性能监控工具）", 《HTTPS://BLOG.CSDN.NET/WANGCHENGIII/ARTICLE/DETAILS/89186315》 *

Also Published As

Publication number Publication date
CN113076234B (zh) 2022-07-12

Similar Documents

Publication Publication Date Title
US6119247A (en) Remote debugging of internet applications
KR20050084820A (ko) 데이터 처리 시스템, 테스트 방법, 모니터링 방법,네트워크 데이터 처리 시스템, 데이터 처리 시스템 및컴퓨터 프로그램 제품
CN103825783A (zh) 一种测试方法及装置
CN107770563A (zh) 一种弹幕消息处理方法及装置
CN107229566B (zh) 用于soa服务转换语言保持功能一致性的方法及系统
CN110442506B (zh) 一种日志获取方法、装置、业务服务器、系统及存储介质
CN111245831B (zh) Ftp数据传输方法及装置、服务端和客户端的信息交互系统
CN113076234B (zh) 一种html5页面实时监测的方法
CN107809417B (zh) 基于无线局域网的移动应用开发调试方法
CN114500243B (zh) 数据通信方法、装置、计算机可读介质及电子设备
CN111930548B (zh) 一种多集群分布式服务的故障模拟系统
CN112492055A (zh) 一种传输协议重定向的方法、装置、设备及可读存储介质
KR20120071175A (ko) 웹 플랫폼이 탑재된 이동통신 단말기와 이를 이용한 로그 정보 제공 방법 및 웹 플랫폼에 대한 검증 시스템과 이를 이용한 검증 방법
CN105407150A (zh) 应用程序远程控制方法
CN110958291B (zh) 一种工业车辆数据传输系统及方法
CN115277202A (zh) 一种用于安卓app的自动化数据采集系统及方法
CN107948303B (zh) 一种Android上http请求失败的处理方法
CN115714805A (zh) 一种跨平台通信连接方法、系统及电子设备
CN112714153B (zh) 基于物联网系统的兼容多种tcp的处理方法及装置
CN111049741B (zh) 提高通信可靠性的方法、通信系统及终端设备
CN114461485A (zh) 一种资源加载监测方法、装置、设备及存储介质
CN113872955A (zh) 一种网络连接的方法、装置、计算机设备和存储介质
CN113596170A (zh) 基于负载均衡设备的停机处理方法、装置、介质及设备
CN113407193A (zh) 一种系统部署方法、装置和设备
CN114691486A (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
GR01 Patent grant
GR01 Patent grant