CN106502902B - web页面运行效率监测方法及装置 - Google Patents
web页面运行效率监测方法及装置 Download PDFInfo
- Publication number
- CN106502902B CN106502902B CN201610937031.9A CN201610937031A CN106502902B CN 106502902 B CN106502902 B CN 106502902B CN 201610937031 A CN201610937031 A CN 201610937031A CN 106502902 B CN106502902 B CN 106502902B
- Authority
- CN
- China
- Prior art keywords
- time
- web page
- component
- consuming
- response
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3604—Software analysis for verifying properties of programs
- G06F11/3612—Software analysis for verifying properties of programs by runtime analysis
-
- 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)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Debugging And Monitoring (AREA)
Abstract
本发明实施例提供了一种web页面运行效率监测方法及装置，其中，该方法包括：响应用户通过浏览器访问web页面的请求，获取web页面的渲染开始时间点，web页面是由与具体业务操作功能相对应的UI组件组成的；当用户在web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；在用户点击的UI组件的触发事件处理结束且返回web页面时，获取web页面的渲染结束时间点；根据获取的web页面的渲染开始时间点和渲染结束时间点，实时计算渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时。
Description
技术领域
本发明涉及web互联网技术领域，特别涉及一种web页面运行效率监测方法及装置。
背景技术
在互联网行业快速发展的今天，web网站已经从过去信息共享、信息传递等简单应用，发展到如今丰富多彩的web应用，给人们的工作、生活带来便捷，成为人们工作、生活中不可或缺的一部分。随着web应用越来越重视优秀的用户体验，web页面也越做越复杂，如何更好的保障用户体验中最核心的交易响应耗时的体验成为了一个必须要解决的问题。
目前，web应用对交易响应耗时的采集大多基于服务器交易监控和网络层的响应时间监控。但随着页面效果和JS操作日益增加，web页面的交易性能由“服务端性能为主”已经转变为“服务端、客户端共同消耗性能”。单纯的服务器交易监控和网络层的响应时间监控不足以满足性能监控采集和分析的要求。
如图1所示，服务器交易监控和网络层的响应时间监控无法覆盖对交易响应环节中的DOMLoad、JSRender和Ajax的时间，导致采集的耗时数据和真实等待的时间存在一定的误差。同时传统的交易响应耗时一般都仅通过日志记录的方式采集耗时，以事后分析为主，无法在事中直接对交易耗时进行分析和评价。
发明内容
本发明实施例提供了一种web页面运行效率监测方法，以解决现有技术中采集的交易响应耗时与真实等待时间不符、不能在事中直接获得交易响应耗时的技术问题。该方法包括：响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI(User Interface，用户界面)组件组成的，不同UI组件为用户提供不同的点击操作；当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时。
在一个实施例中，获取所述web页面的渲染开始时间点和渲染结束时间点，包括：获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点；获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，包括：所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
在一个实施例中，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，还包括：实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
在一个实施例中，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，包括：获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。
在一个实施例中，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，还包括：将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。
本发明实施例还提供了一种web页面运行效率监测装置，以解决现有技术中采集的交易响应耗时与真实等待时间不符、不能在事中直接获得交易响应耗时的技术问题。该装置包括：web页面装载模块，用于响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作；UI组件时间获取模块，用于当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；所述web页面装载模块，还用于在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；事件分析模块，用于根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时。
在一个实施例中，所述web页面装载模块，具体用于获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点；所述UI组件时间获取模块，具体用于所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
在一个实施例中，还包括：显示模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
在一个实施例中，所述显示模块，具体用于获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。
在一个实施例中，还包括：日志模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。
在本发明实施例中，由于web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作，在有用户访问web页面时，响应用户通过浏览器访问web页面的请求，获取web页面的渲染开始时间点，当用户在web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，在用户点击的UI组件的触发事件处理结束且返回web页面时，获取web页面的渲染结束时间点，使得可以实时获取web页面的渲染开始时间点和渲染结束时间点，并实时获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，即用户在web页面上进行的任何点击操作对应的响应耗时都可以通过获取UI组件的触发事件的处理开始时间戳和处理结束时间戳的方式被记录下来，因此可以监控交易响应中各个环节的响应耗时，降低获取到的耗时数据与真实等待时间之间的误差，做到了与web页面的业务逻辑松耦合，在不改变原来业务处理逻辑的基础上，准确地记录各类操作的响应时间。同时，可以实时计算出web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，使得可以在交易研发和测试过程中第一时间发现性能问题，进而进行有针对性的优化。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，并不构成对本发明的限定。在附图中：
图1是现有技术中的交易响应耗时采集示意图；
图2是本发明实施例提供的一种web页面运行效率监测方法的流程图；
图3是本发明实施例提供的一种web页面运行效率监测方法的具体流程图；
图4是本发明实施例提供的一种web页面运行效率监测装置的结构框图；
图5是本发明实施例提供的一种web页面运行效率监测装置的具体结构示意图；
图6是本发明实施例提供的一种UI组件的内部结构示意图；
图7是本发明实施例提供的一种页面渲染的内部结构示意图；
图8是本发明实施例提供的一种性能监控配置信息库的内部结构示意图；
图9是本发明实施例提供的一种性能日志记录库的内部结构示意图；
图10是本发明实施例提供的一种图形化显示组件的内部结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施方式和附图，对本发明做进一步详细说明。在此，本发明的示意性实施方式及其说明用于解释本发明，但并不作为对本发明的限定。
在本发明实施例中，提供了一种web页面运行效率监测方法，如图2所示，该方法包括：
步骤201：响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作；
步骤202：当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；
步骤203：在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；
步骤204：根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时。
由图2所示的流程可知，在本发明实施例中，由于web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作，在有用户访问web页面时，响应用户通过浏览器访问web页面的请求，获取web页面的渲染开始时间点，当用户在web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，在用户点击的UI组件的触发事件处理结束且返回web页面时，获取web页面的渲染结束时间点，使得可以实时获取web页面的渲染开始时间点和渲染结束时间点，并实时获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，即用户在web页面上进行的任何点击操作对应的响应耗时都可以通过获取UI组件的触发事件的处理开始时间戳和处理结束时间戳的方式被记录下来，因此可以监控交易响应中各个环节的响应耗时，降低获取到的耗时数据与真实等待时间之间的误差，做到了与web页面的业务逻辑松耦合，在不改变原来业务处理逻辑的基础上，准确地记录各类操作的响应时间。同时，可以实时计算出web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，使得可以在交易研发和测试过程中第一时间发现性能问题，进而进行有针对性的优化，有利于节约优化成本。
具体实施时，在web页面编码时根据实际业务的具体业务操作功能从UI组件资源库中选择对应的UI组件组织成web页面。
具体实施时，上述UI组件可以是为用户提供按钮、链接、表格、多选框、单选框、日期选择和表树等点击功能的程序段，通过与具体交易业务操作功能相对应的UI组件的组合可以构成web页面。
具体实施时，通过面向切面的接口获取web页面的渲染开始时间点和渲染结束时间点，例如，可以记录当前页面的名称、渲染开始时间点和渲染结束时间点等；也可以通过面向切面的接口获取UI组件的触发事件的处理开始时间戳和处理结束时间戳，例如，可以记录当前页面的名称、当前UI组件的名称、当前UI组件的触发事件的处理开始时间戳和处理结束时间戳等。
具体实施时，为了实现根据具体需求获取业务操作的响应耗时，在本实施例中，获取所述web页面的渲染开始时间点和渲染结束时间点，包括：获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点；获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，包括：所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
具体实施时，为了开发测试人员可以在交易研发和测试过程中第一时间直观地发现性能问题，在本实施例中，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，上述web页面运行效率监测方法还包括：实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
具体的，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，包括：获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。例如，在预设显示配置信息中指示采用图形化小窗口显示响应耗时，并指出了显示不同响应耗时所采用的具体颜色，则可以在web页面右上角的小窗口中通过图形的形式用不同颜色实时显示web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，具体的，每当实时计算出一个UI组件对应的业务操作的响应耗时，可以实时添加该UI组件对应的业务操作的响应耗时的显示图形，图形可以是柱状图，而且当鼠标悬停在对应的柱状图上时，显示对应的交易响应耗时明细。
具体实施时，为了便于在一段时间后对交易响应耗时进行统计分析，在本实施例中，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，上述web页面运行效率监测方法还包括：将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。具体的，在接收到web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，先进行web页面级缓存，再根据缓存阀值和预设时间间隔等配置信息，将web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时等数据记录到数据库中，数据库返回接收交易响应耗时的状态。例如，缓存阀值＝500KB，时间间隔＝30秒。此时若日志(即交易响应耗时数据)积攒的数量超过500K，则会触发记录日志到数据库；若距离上次数据库操作时间间隔达到30秒，且有日志积攒，则会触发记录日志到数据库。
具体结合以下示例来描述上述web页面运行效率监测方法的流程图，如图3所示，该方法包括以下步骤：
步骤301：用户通过浏览器访问页面，页面响应用户请求，开始进行初始化操作，并请求公共资源，此时获取web页面的渲染开始时间点。
步骤302：用户在页面上点击触发UI组件的操作，UI组件的程序根据触发的操作执行既定的业务逻辑。
步骤303：读取性能监控配置库中的性能监控配置信息，根据性能监控配置信息的配置情况决定是否需要记录UI组件触发事件的起止时点(即UI组件的触发事件的处理开始时间戳和处理结束时间戳)。
步骤304：通过面向切面的接口，捕获触发UI组件操作执行业务逻辑前的时点(即触发事件的处理开始时间戳)，并通知事件分析组件分析事件。例如，在多用户高并发情况下，不同用户的开始事件和结束事件会交叉到达事件分析组件，此时，事件分析组件进行匹配和分析确定该用户在页面上触发的UI组件的触发事件的处理开始时间。
步骤305：通过面向切面的接口，捕获触发UI组件操作执行业务逻辑后的时点(即触发事件的处理结束时间戳)，并通知事件分析组件分析事件。事件分析组件进行匹配和分析确定该用户在页面上触发的UI组件的触发事件的处理结束时间。
步骤306：用户在页面上触发UI组件的操作后，通过面向切面的接口记录页面渲染开始的时点，并通知事件分析组件分析事件。事件分析组件进行匹配和分析确定该页面渲染开始的时间。
步骤307：用户在页面上触发UI组件的操作后，且需要返回页面时，通过面向切面的接口则记录页面渲染结束的时点，并通知事件分析组件分析事件。例如，在一些复杂场景下，返回的页面可能存在多个，此时会上送多个结束事件，此时事件分析组件进行匹配和分析确定该页面渲染结束的时间，来进行耗时计算。
步骤308：事件分析组件接收各类UI操作和页面渲染所触发的事件信息，并进行分析。
步骤309：事件分析组件完成分析后，若判断当前交易事件已经结束时，则将完整的交易响应耗时数据发送给图形化显示组件和日志记录组件。
步骤310：图形化显示组件读取图形显示配置库中的预设显示配置信息。
步骤311：图形化显示组件根据最新接收到的交易响应耗时数据和预设显示配置信息，更新图形显示内容。
步骤312：日志记录组件接收最新接收到的交易响应耗时数据，并进行页面级缓存。
步骤313：日志记录组件根据缓存阀值和预设时间间隔等配置信息，将交易响应耗时数据记录到数据库，数据库返回接收交易响应耗时的状态。例如，缓存阀值＝500KB，时间间隔为30秒。此时若日志(即交易响应耗时数据)积攒的数量超过500K，则会触发记录日志到数据库；若距离上次数据库操作时间间隔达到30秒，且有日志积攒，则会触发记录日志到数据库。
基于同一发明构思，本发明实施例中还提供了一种web页面运行效率监测装置，如下面的实施例所述。由于web页面运行效率监测装置解决问题的原理与web页面运行效率监测方法相似，因此web页面运行效率监测装置的实施可以参见web页面运行效率监测方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
图4是本发明实施例的web页面运行效率监测装置的一种结构框图，如图4所示，包括：
web页面装载模块401，用于响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作；
UI组件时间获取模块402，用于当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；
所述web页面装载模块401，还用于在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；
事件分析模块403，用于根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时。
在一个实施例中，所述web页面装载模块，具体用于获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点；所述UI组件时间获取模块，具体用于所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
在一个实施例中，还包括：显示模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
在一个实施例中，所述显示模块，具体用于获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。
在一个实施例中，还包括：日志模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。
具体实施时，如图5所示，上述web页面运行效率监测装置可以通过以下结构实现，该装置包含web页面装载模块1(即上述web页面装载模块401)、UI组件资源库2、UI组件3(也可实现上述UI组件时间获取模块的功能402)、性能监控配置信息库4、日志记录组件5(即上述日志模块)和图形显示组件6(即上述显示模块)。他们之间的关联如下：web页面装载模块1对web页面编码时根据实际业务功能从UI组件资源库2中选择与具体业务操作功能相对应的UI组件3组织成页面，web页面装载模块1在运行时读取性能监控配置信息库4中的性能监控配置信息，根据性能监控配置信息获取web页面的渲染开始时间点和渲染结束时间点以及UI组件的触发事件的处理开始时间戳和处理结束时间戳，通过日志记录组件5记录web页面的渲染开始时间点和渲染结束时间点以及UI组件的触发事件的处理开始时间戳和处理结束时间戳等耗时日志，通过图形显示组件6显示web页面的渲染响应耗时以及UI组件对应的业务操作的响应耗时的时序图。
具体实施时，如图6所示，UI组件3的内部包括UI显示组件601、触发事件单元602、开始处理单元603和结束处理单元604。UI组件主要由UI显示组件601和触发事件单元602构成。开始处理单元603和结束处理单元604通过面向切面的接口加载到触发事件上。
UI显示组件601：用于将UI组件的使用界面展示给用户，各类UI组件的显示界面各不相同。
触发事件单元602：用于实现UI组件为用户提供各类点击操作的功能。各类UI组件所支持的触发事件各不相同，部分UI组件还支持多个操作事件。如按钮组件仅支持鼠标单击，表格组件则支持按行选择、翻页等。
开始处理单元603：通过面向切面的接口实现，用于记录当前页面名称、当前组件名称和当前组件的触发事件的处理开始时间戳。
结束处理单元604：通过面向切面的接口实现，用于记录当前页面名称、当前组件名称和当前组件的触发事件的处理结束时间戳。
具体实施时，如图7所示，web页面装载模块1的内部包括web页面内容显示组件701、开始渲染单元702A、结束渲染单元702B。开始渲染单元702A、结束渲染单元602B通过面向切面的接口加载到页面渲染事件上。
web页面内容显示组件701：用于向用户展示使用界面。
开始渲染单元702A：通过面向切面的接口实现，用于记录当前页面名称、开始处理渲染的时间戳。
结束渲染单元702B：通过面向切面的接口实现，用于记录当前页面名称、结束处理渲染的时间戳。
具体实施时，如图8所示，上述性能监控配置信息库4内部包括全局控制提供单元801和页面配置提供单元802。
全局控制提供单元801：用于提供是否开启交易响应耗时监控的全局开关。
页面配置提供单元802：用于提供按页面开启交易响应耗时监控的UI组件的配置项。
具体实施时，如图9所示，日志记录组件5用于记录实时采集到的交易响应耗时，并按顺序保存到数据库中。日志记录组件5的内部包括日志缓存单元901、日志发送单元902和日志记录单元903。
日志缓存单元901：用于接收实际采集到的交易响应耗时(例如，web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时)，并在WEB页面上缓存起来，为日志发送单元902提供数据源。
日志发送单元902：当页面缓存的交易响应耗时数据累计到一定数量或者一定时间后，一次性发送到数据库中。
日志记录单元903：将日志发送单元902发送的交易响应耗时数据保存到数据库中，作持久化存储。
具体实施时，如图10所示，图形显示组件6用于将实时采集到的交易响应耗时以图形化的时序图的方式直接在页面上显示。图形显示组件6的内部包括数据接收单元1001、滚动显示单元1002和图形显示控制单元1003。
数据接收单元1001：用于接收实际采集到的交易响应耗时。
滚动显示单元1002：将接收到的交易响应耗时以时序图的方式通过页面右上角的小窗口中做动态显示。每接收到一笔交易响应耗时，则按图形显示控制单元903定义的预设显示配置信息，追加显示交易耗时数值的柱状图。当鼠标悬停在对应的柱状图上时，显示对应的交易响应耗时明细。
图形显示控制单元1003：定义图形化小窗口是否显示的开关，以及不同交易耗时区间所显示的颜色。
在本发明实施例中，由于web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作，在有用户访问web页面时，响应用户通过浏览器访问web页面的请求，获取web页面的渲染开始时间点，当用户在web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，在用户点击的UI组件的触发事件处理结束且返回web页面时，获取web页面的渲染结束时间点，使得可以实时获取web页面的渲染开始时间点和渲染结束时间点，并实时获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，即用户在web页面上进行的任何点击操作对应的响应耗时都可以通过获取UI组件的触发事件的处理开始时间戳和处理结束时间戳的方式被记录下来，因此可以监控交易响应中各个环节的响应耗时，降低获取到的耗时数据与真实等待时间之间的误差，做到了与web页面的业务逻辑松耦合，在不改变原来业务处理逻辑的基础上，准确地记录各类操作的响应时间。同时，可以实时计算出web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，使得可以在交易研发和测试过程中第一时间发现性能问题，进而进行有针对性的优化。
显然，本领域的技术人员应该明白，上述的本发明实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明实施例不限制于任何特定的硬件和软件结合。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明实施例可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种web页面运行效率监测方法，其特征在于，包括：
响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作；
当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；
在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；
根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时；
获取所述web页面的渲染开始时间点和渲染结束时间点，包括：
获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点。
2.如权利要求1所述的web页面运行效率监测方法，其特征在于，
获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳，包括：
所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
3.如权利要求1或2所述的web页面运行效率监测方法，其特征在于，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，还包括：
实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
4.如权利要求3所述的web页面运行效率监测方法，其特征在于，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，包括：
获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。
5.如权利要求1或2所述的web页面运行效率监测方法，其特征在于，在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，还包括：
将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。
6.一种web页面运行效率监测装置，其特征在于，包括：
web页面装载模块，用于响应用户通过浏览器访问web页面的请求，获取所述web页面的渲染开始时间点，其中，所述web页面是由与具体业务操作功能相对应的UI组件组成的，不同UI组件为用户提供不同的点击操作；
UI组件时间获取模块，用于当用户在所述web页面上点击触发UI组件的触发事件时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳；
所述web页面装载模块，还用于在用户点击的UI组件的触发事件处理结束且返回所述web页面时，获取所述web页面的渲染结束时间点；
事件分析模块，用于根据获取的所述web页面的渲染开始时间点和渲染结束时间点，实时计算所述web页面的渲染响应耗时；根据获取的UI组件的触发事件的处理开始时间戳和处理结束时间戳，实时计算UI组件对应的业务操作的响应耗时；
所述web页面装载模块，具体用于获取预设的性能监控配置信息，所述性能监控配置信息中包括是否开启交易响应耗时监控的全局开关，在所述性能监控配置信息指示开启交易响应耗时监控的情况下，获取所述web页面的渲染开始时间点和渲染结束时间点。
7.如权利要求6所述的web页面运行效率监测装置，其特征在于，
所述UI组件时间获取模块，具体用于所述性能监控配置信息中还包括需要开启交易响应耗时监控的UI组件的名称，在被点击的UI组件的名称包括在所述性能监控配置信息中时，获取被点击的UI组件的触发事件的处理开始时间戳和处理结束时间戳。
8.如权利要求6或7所述的web页面运行效率监测装置，其特征在于，还包括：
显示模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时。
9.如权利要求8所述的web页面运行效率监测装置，其特征在于，所述显示模块，具体用于获取预设显示配置信息，根据所述预设显示配置信息，实时在所述web页面上显示所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时，其中，所述预设显示配置信息包括是否采用图形化小窗口显示响应耗时以及显示不同响应耗时所采用的颜色。
10.如权利要求6或7所述的web页面运行效率监测装置，其特征在于，还包括：
日志模块，用于在计算出所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时后，将计算出的所述web页面的渲染响应耗时和UI组件对应的业务操作的响应耗时缓存在所述web页面上，在达到缓存阈值或预设时间间隔时，将缓存在所述web页面上的渲染响应耗时和UI组件对应的业务操作的响应耗时存储到数据库中。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610937031.9A CN106502902B (zh) | 2016-10-25 | 2016-10-25 | web页面运行效率监测方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610937031.9A CN106502902B (zh) | 2016-10-25 | 2016-10-25 | web页面运行效率监测方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106502902A CN106502902A (zh) | 2017-03-15 |
| CN106502902B true CN106502902B (zh) | 2019-03-22 |
Family
ID=58320123
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610937031.9A Active CN106502902B (zh) | 2016-10-25 | 2016-10-25 | web页面运行效率监测方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106502902B (zh) |
Families Citing this family (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107423189A (zh) * | 2017-03-20 | 2017-12-01 | 北京白鹭时代信息技术有限公司 | 一种制作html5游戏的优化方法及装置 |
| CN109298995B (zh) * | 2017-07-24 | 2022-05-13 | 北京搜狗科技发展有限公司 | 一种性能测试方法、装置、电子设备以及存储介质 |
| CN107797904B (zh) * | 2017-09-12 | 2021-12-24 | 福建天晴数码有限公司 | 一种测量响应时间的方法及终端 |
| CN109656645A (zh) * | 2017-10-11 | 2019-04-19 | 阿里巴巴集团控股有限公司 | 展现时间确定方法和页面渲染完成时间的确定方法及装置 |
| CN109165152B (zh) * | 2018-07-31 | 2022-11-15 | 上海幻电信息科技有限公司 | Web系统的性能监控方法、系统和存储介质 |
| CN109324945A (zh) * | 2018-09-07 | 2019-02-12 | 郑州云海信息技术有限公司 | 一种bmc读取raid卡温度时间自动获取方法及系统 |
| CN109658493B (zh) * | 2018-11-27 | 2023-07-18 | 成都知道创宇信息技术有限公司 | 一种基于脚本生成web端战略沙盘的方法 |
| CN111506488B (zh) * | 2019-01-30 | 2024-04-05 | 阿里巴巴集团控股有限公司 | 一种应用页面响应测试方法及装置 |
| CN110413476B (zh) * | 2019-06-20 | 2022-12-13 | 平安普惠企业管理有限公司 | 网页崩溃监听方法、装置、计算机设备和存储介质 |
| CN110442499B (zh) * | 2019-07-10 | 2023-08-04 | 创新先进技术有限公司 | 测试、提高页面响应性能的方法和装置、终端设备 |
| CN112748963A (zh) * | 2019-10-29 | 2021-05-04 | 福建天泉教育科技有限公司 | 一种应用页面分析方法及终端 |
| CN111061606A (zh) * | 2019-11-04 | 2020-04-24 | 深圳震有科技股份有限公司 | 一种基于浏览器的监测预警方法、终端及存储介质 |
| CN111797339A (zh) * | 2019-11-07 | 2020-10-20 | 北京京东尚科信息技术有限公司 | 页面渲染监控方法和装置 |
| CN111124530B (zh) * | 2019-11-25 | 2023-06-02 | 北京博睿宏远数据科技股份有限公司 | 浏览器首次渲染时间计算方法、装置、浏览器及存储介质 |
| CN111177605B (zh) * | 2019-12-20 | 2022-06-21 | 中国平安财产保险股份有限公司 | 单页面的加载性能监控方法、装置及相关设备 |
| CN111339472A (zh) * | 2020-03-16 | 2020-06-26 | 上海英方软件股份有限公司 | 一种提高web系统的访问速度的方法、装置及系统 |
| CN114064376B (zh) * | 2020-07-29 | 2024-07-12 | 北京字节跳动网络技术有限公司 | 一种页面监测方法、装置、电子设备及介质 |
| CN112346944B (zh) * | 2020-10-22 | 2021-07-02 | 北京基调网络股份有限公司 | 一种监控网页用户操作体验的方法、设备及存储介质 |
| CN112416726A (zh) * | 2020-11-20 | 2021-02-26 | 深圳开源互联网安全技术有限公司 | 一种web应用静态资源加载性能的分析方法及装置 |
| CN113900916A (zh) * | 2021-09-29 | 2022-01-07 | 北京奇艺世纪科技有限公司 | 一种应用程序的统计方法和装置 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103455353A (zh) * | 2013-08-30 | 2013-12-18 | 广州市动景计算机科技有限公司 | 网页数据的请求方法及装置 |
| CN104750471A (zh) * | 2013-12-30 | 2015-07-01 | 上海格尔软件股份有限公司 | 一种基于浏览器的web页面性能检测与采集分析插件以及方法 |
| CN105573755A (zh) * | 2015-12-15 | 2016-05-11 | 北京奇虎科技有限公司 | 一种应用Activity渲染时间获取方法和装置 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7519702B1 (en) * | 2000-08-10 | 2009-04-14 | International Business Machines Corporation | Method and apparatus for measuring web site performance |
| US20080228863A1 (en) * | 2007-03-12 | 2008-09-18 | Timothy Mackey | Systems and Methods for End-User Experience Monitoring Using A Script |
-
2016
- 2016-10-25 CN CN201610937031.9A patent/CN106502902B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103455353A (zh) * | 2013-08-30 | 2013-12-18 | 广州市动景计算机科技有限公司 | 网页数据的请求方法及装置 |
| CN104750471A (zh) * | 2013-12-30 | 2015-07-01 | 上海格尔软件股份有限公司 | 一种基于浏览器的web页面性能检测与采集分析插件以及方法 |
| CN105573755A (zh) * | 2015-12-15 | 2016-05-11 | 北京奇虎科技有限公司 | 一种应用Activity渲染时间获取方法和装置 |
Non-Patent Citations (1)
| Title |
|---|
| web前端性能优化方案与实践;王成 等;《计算机应用与软件》;20141215;第31卷(第12期);89-95 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106502902A (zh) | 2017-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106502902B (zh) | web页面运行效率监测方法及装置 | |
| CN106339398B (zh) | 一种网页页面的预读取方法、装置及智能终端设备 | |
| US11588912B2 (en) | Synchronized console data and user interface playback | |
| US7953850B2 (en) | Monitoring related content requests | |
| US9805006B1 (en) | Asynchronous loading of scripts in web pages | |
| US7516209B2 (en) | Method and framework for tracking/logging completion of requests in a computer system | |
| CN108334525A (zh) | 一种数据展示方法及装置 | |
| CN106528657A (zh) | 浏览器跳转至应用程序的控制方法及装置 | |
| US10298469B2 (en) | Automatic asynchronous handoff identification | |
| CN104216921B (zh) | 一种实现浏览器中快速链接的添加提示方法、装置及系统 | |
| US20100251128A1 (en) | Visualization of website analytics | |
| US20090158161A1 (en) | Collaborative search in virtual worlds | |
| CN105959371B (zh) | 网页分享系统 | |
| CN105869005A (zh) | 一种app开启广告预加载方法、装置和系统 | |
| US8135610B1 (en) | System and method for collecting and processing real-time events in a heterogeneous system environment | |
| CN105095107A (zh) | 清理缓存数据的方法及装置 | |
| CN107688568A (zh) | 基于网页访问行为记录的采集方法及装置 | |
| CN104468319A (zh) | 一种会话内容合并方法和系统 | |
| CN110263070A (zh) | 事件上报方法及装置 | |
| CN107872713A (zh) | 短视频处理系统、方法及装置 | |
| US20170154086A1 (en) | Real-Time Change Data from Disparate Sources | |
| CN110413476A (zh) | 网页崩溃监听方法、装置、计算机设备和存储介质 | |
| CN113254320A (zh) | 记录用户网页操作行为的方法及装置 | |
| US11363108B2 (en) | Network latency detection | |
| CN108520052A (zh) | 慢查询信息检索方法、装置、服务器及可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 |