CN115858282A - 一种前端性能可视化监控方法及系统 - Google Patents

Abstract

本发明提出了一种前端性能可视化监控方法及系统，涉及web前端领域。该方法通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，对请求数据规范化处理的同时，便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，更好地对代码进行优化。

Description

一种前端性能可视化监控方法及系统

技术领域

本发明涉及web前端技术领域，具体而言，涉及一种前端性能可视化监控方法及系统。

背景技术

随着科技和社会的发展，用户越来越需求快节奏高质量的交互体验，而web前端是用户最常用的交互模式，所以对前端代码的执行速度要求也逐渐提升，但现有的前端性能监控仅仅从用户角度去评估网页展示过程，分阶段统计网页渲染过程所耗费的时间，开发人员拿到这些数据后并不能直观地定位影响前端代码执行效率的地方，难以帮助开发人员对代码提出改进意见，因此需要从开发者角度去监控、评估前端代码的执行过程，才能更好地对代码进行优化。

发明内容

本发明的目的在于提供一种前端性能可视化监控方法及系统，其通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，对请求数据规范化处理的同时，便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，从而更好地对代码进行优化。

本发明的实施例是这样实现的：

第一方面，本申请实施例提供一种前端性能可视化监控方法，包括以下步骤：

执行目标前端代码，初始化异步存储对象和同步存储对象；

监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；

获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；

基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

在本发明的一些实施例中，所述监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤具体包括：

获取所述目标前端代码的异步请求的状态属性；

根据所述异步请求的状态属性获取所述异步请求的异步信息；

将所述异步请求的异步信息写入所述异步存储对象。

在本发明的一些实施例中，所述根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤具体包括：

若所述异步请求的状态属性的初始值发生变化，则获取所述异步请求的地址信息及响应时间信息；

将所述地址信息和所述响应时间信息对应绑定为异步信息。

在本发明的一些实施例中，所述获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤具体包括：

解析所述目标前端代码的同步请求，获取所述同步请求的执行函数；

计算所述执行函数的执行时间，并将所述执行时间和所述执行函数对应绑定为同步信息。

在本发明的一些实施例中，所述基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控的步骤具体包括：

将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控。

在本发明的一些实施例中，所述将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控的步骤具体包括：

将所述异步信息和所述同步信息分别进行JSON格式化；

将格式化后的异步信息和同步信息输出到基于Echarts实现的可视化图表中，对所述目标前端代码的性能进行监控。

第二方面，本申请实施例提供一种前端性能可视化监控系统，其包括：

初始化模块，用于执行目标前端代码，初始化异步存储对象和同步存储对象；

监听模块，用于监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；

获取模块，用于获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；

可视化监控模块，用于基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

在本发明的一些实施例中，所述监听模块具体包括：

第一获取子模块，用于获取所述目标前端代码的异步请求的状态属性；

第二获取子模块，用于根据所述异步请求的状态属性获取所述异步请求的异步信息；

写入子模块，用于将所述异步请求的异步信息写入所述异步存储对象。

第三方面，本申请实施例提供一种电子设备，其包括存储器，用于存储一个或多个程序；处理器，当上述一个或多个程序被上述处理器执行时，实现如上述第一方面中任一项上述的方法。

第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述第一方面中任一项上述的方法。

相对于现有技术，本发明的实施例至少具有如下优点或有益效果：

本发明的实施例提出了一种前端性能可视化监控方法，其通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，对请求数据规范化处理的同时，便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，从而更好地对代码进行优化。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明一种前端性能可视化监控方法一实施例的流程图；

图2为本发明实施例中监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤的具体流程图；

图3为本发明实施例中根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤的具体流程图；

图4为本发明实施例中获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤的具体流程图；

图5为本申请实施例中将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控的步骤的具体流程图；

图6为本发明一种前端性能可视化监控系统一实施例的结构框图；

图7为本发明实施例提供的一种电子设备的结构框图。

图标：1、初始化模块；2、监听模块；3、获取模块；4、可视化监控模块；5、处理器；6、存储器；7、数据总线。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

实施例1

请参阅图1-5，本申请实施例提供了一种前端性能可视化监控方法，其通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，可以帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，从而可以更好地对代码进行优化。

如图1所示，上述前端性能可视化监控方法包括以下步骤：

步骤S101：执行目标前端代码，初始化异步存储对象和同步存储对象。

上述步骤中，目标前端代码包括HTML页面、CSS渲染文件及JAVASCRIPT程序等，用户通过前端代码与后端通信，尤其是通过JAVASCRIPT程序的执行与后端交互数据，例如通过解析JAVASCRIPT程序的请求对象requestObject的类型，确定前端代码与后端通信的方式是异步通信还是同步通信，不同的通信方式其执行逻辑是不同的，所需求的资源和执行时间也不一样，需要分别对两种方式的数据进行统计和监控，因此在执行目标前端代码时可以同时在内存中初始化一个异步存储对象asyncRequestObject和一个同步存储对象methodObject来分别暂储所有异步请求和所有同步请求的请求信息。上述异步存储对象和同步存储对象的数据可以是一个，也可以是多个，在本申请实施例中不作限制。

步骤S102：监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象。

其中，如图2所示，上述步骤S102：监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤具体包括：

步骤S1021：获取所述目标前端代码的异步请求的状态属性；

步骤S1022：根据所述异步请求的状态属性获取所述异步请求的异步信息；以及

步骤S1023：将所述异步请求的异步信息写入所述异步存储对象。

上述步骤中，在目标前端代码执行的过程中，可以通过JAVASCRIPT程序内置的object.defineProperty()方法来监听来自前端代码的异步请求XMLHttpRequest对象的状态属性status，根据状态属性status值的变化情况进行相应的动作，如当状态属性status变为预设的值时获取对应异步请求的异步信息，如请求方式、请求的资源、请求时间等，然后将异步信息写入上述步存储对象中进行缓存。

如图3所示，上述步骤S1022：根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤具体包括：

步骤S10221：若所述异步请求的状态属性的初始值发生变化，则获取所述异步请求的地址信息及响应时间信息；

步骤S10222：将所述地址信息和所述响应时间信息对应绑定为异步信息。

上述步骤中，异步请求的状态属性status的初始值可以设置为0，该初始值0表示来自目标前端代码新的异步请求建立并准备执行，等待一段时间后，异步请求的状态属性status的初始值发生变化，如变为200(可表示执行结束)，这段时间即是后端对前端的请求信息解析、处理后进行响应的过程，并可以记录这段响应的时间为响应时间信息，其中请求信息包括异步请求的地址信息，即前端需要调用的后端接口，具体可以通过异步请求的responseUrl属性获得该异步请求的地址信息。然后将异步请求的地址信息作为键key，将响应时间信息作为值value，将两者以键值对的方式进行绑定得到的异步信息，通过JAVASCRIPT程序的set方法写入上述异步存储对象asyncRequestObject中进行缓存，方便后续处理步骤快速地读取该异步信息。

步骤S103：获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象。

相应地，请参阅图4，上述步骤S103：获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤具体包括：

步骤S1031：解析所述目标前端代码的同步请求，获取所述同步请求的执行函数；

步骤S1032：计算所述执行函数的执行时间，并将所述执行时间和所述执行函数对应绑定为同步信息。

上述步骤中，对于同步通信方式，可以从上述请求对象requestObject中解析出目标前端代码的同步请求信息，例如同步请求的执行函数对象并获得执行函数的名称；然后在该执行函数执行前和执行结束之后分别使用JAVASCRIPT程序原生的API，即performance.now()方法获得函数的执行时间，将执行函数的名称作为键key，将执行函数的执行时间作为值value，将两者以键值对的方式进行绑定得到的同步信息，并通过JAVASCRIPT程序的set方法写入上述同步存储对象methodObject中进行缓存，方便后续处理步骤快速地读取该同步信息。

步骤S104：基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

上述步骤中，可以将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控。

相应地，请参阅图5，上述将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控的步骤具体包括：

步骤S1041：将所述异步信息和所述同步信息分别进行JSON格式化；

步骤S1042：将格式化后的异步信息和同步信息输出到基于Echarts实现的可视化图表中，对所述目标前端代码的性能进行监控。

上述步骤中，可以从缓存于内存中的异步存储对象asyncRequestObject和同步存储对象methodObject中快速读取出异步信息和同步信息，如键值对的异步请求的地址信息和后端接口的响应时间、键值对的同步请求的执行函数名称和执行时间等，当然还可以包括其他信息，如请求方式等等。然后将键值对的异步请求的地址信息和后端接口的响应时间、键值对的同步请求的执行函数名称和执行时间进行JSON格式化，即{地址信息：响应时间}、{执行函数名称：执行时间}，并保存到JSON格式的文件中，可以对多种多样的信息进行规范化，便于管理和使用。

然后读取格式化后的JSON文件中的键值对数据，通过Echarts生成对应的可视化图表中，进行动态展示，如通过不同的颜色、色块表示不同的地址或接口、执行函数，鼠标悬停或点击色块后显示对应的响应时间、执行时间等，以便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，并根据时间信息评估对应接口或函数的响应效率或执行效率，帮助开发人员快速地定位问题，从而更好地对代码进行优化。

需要说明的是，本发明实施例中未具体展开说明的技术内容，可以通过现有的相关技术实现，属于现有技术，在本发明实施例中不再赘述。

实施例2

相应地，请参阅图6，本申请实施例提供了一种前端性能可视化监控系统，其包括：

初始化模块1，用于执行目标前端代码，初始化异步存储对象和同步存储对象；监听模块2，用于监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；获取模块3，用于获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；可视化监控模块4，用于基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

其中，所述监听模块4具体包括：第一获取子模块，用于获取所述目标前端代码的异步请求的状态属性；第二获取子模块，用于根据所述异步请求的状态属性获取所述异步请求的异步信息；写入子模块，用于将所述异步请求的异步信息写入所述异步存储对象。

上述系统具体实现过程请参照实施例1中提供的一种前端性能可视化监控方法，在此不再赘述。

实施例3

请参阅图7，本申请实施例提供了一种电子设备，该电子设备包括至少一个处理器5、至少一个存储器6和数据总线7；其中：处理器5与存储器6通过数据总线7完成相互间的通信；存储器6存储有可被处理器5执行的程序指令，处理器5调用程序指令以执行一种前端性能可视化监控方法。

例如实现：

执行目标前端代码，初始化异步存储对象和同步存储对象；监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

其中，存储器6可以是但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。

处理器5可以是一种集成电路芯片，具有信号处理能力。该处理器5可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(Digital Signal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

可以理解，图7所示的结构仅为示意，电子设备还可包括比图7中所示更多或者更少的组件，或者具有与图7所示不同的配置。图7中所示的各组件可以采用硬件、软件或其组合实现。

实施例4

本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器5执行时实现一种前端性能可视化监控方法。例如实现：

执行目标前端代码，初始化异步存储对象和同步存储对象；监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其它的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

Claims (10)

1.一种前端性能可视化监控方法，其特征在于，包括：

执行目标前端代码，初始化异步存储对象和同步存储对象；

监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；

获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；

基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

2.如权利要求1所述的一种前端性能可视化监控方法，其特征在于，所述监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤具体包括：

获取所述目标前端代码的异步请求的状态属性；

根据所述异步请求的状态属性获取所述异步请求的异步信息；

将所述异步请求的异步信息写入所述异步存储对象。

3.如权利要求2所述的一种前端性能可视化监控方法，其特征在于，所述根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤具体包括：

若所述异步请求的状态属性的初始值发生变化，则获取所述异步请求的地址信息及响应时间信息；

将所述地址信息和所述响应时间信息对应绑定为异步信息。

4.如权利要求3所述的一种前端性能可视化监控方法，其特征在于，所述获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤具体包括：

解析所述目标前端代码的同步请求，获取所述同步请求的执行函数；

计算所述执行函数的执行时间，并将所述执行时间和所述执行函数对应绑定为同步信息。

5.如权利要求4所述的一种前端性能可视化监控方法，其特征在于，所述基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控的步骤具体包括：

将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控。

6.如权利要求5所述的一种前端性能可视化监控方法，其特征在于，所述将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控的步骤具体包括：

将所述异步信息和所述同步信息分别进行JSON格式化；

将格式化后的异步信息和同步信息输出到基于Echarts实现的可视化图表中，对所述目标前端代码的性能进行监控。

7.一种前端性能可视化监控系统，其特征在于，包括：

初始化模块，用于执行目标前端代码，初始化异步存储对象和同步存储对象；

监听模块，用于监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；

获取模块，用于获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；

可视化监控模块，用于基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。

8.如权利要求7所述的一种前端性能可视化监控系统，其特征在于，所述监听模块具体包括：

第一获取子模块，用于获取所述目标前端代码的异步请求的状态属性；

第二获取子模块，用于根据所述异步请求的状态属性获取所述异步请求的异步信息；

写入子模块，用于将所述异步请求的异步信息写入所述异步存储对象。

9.一种电子设备，其特征在于，包括至少一个处理器、至少一个存储器和数据总线；其中：所述处理器与所述存储器通过所述数据总线完成相互间的通信；所述存储器存储有被所述处理器执行的程序指令，所述处理器调用所述程序指令以执行如权利要求1-6任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1-6中任一项所述的方法。

Images