web页面运行效率监测方法及装置与流程

本发明涉及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组件对应的业务操作的响应耗时，使得可以在交易研发和测试过程中第一时间发现性能问题，进而进行有针对性的优化。

显然，本领域的技术人员应该明白，上述的本发明实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明实施例不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明实施例可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。