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

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

【技术实现步骤摘要】
一种前端性能可视化监控方法及系统


[0001]本专利技术涉及web前端
，具体而言，涉及一种前端性能可视化监控方法及系统。

技术介绍

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

技术实现思路

[0003]本专利技术的目的在于提供一种前端性能可视化监控方法及系统，其通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，对请求数据规范化处理的同时，便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，从而更好地对代码进行优化。
[0004]本专利技术的实施例是这样实现的：
[0005]第一方面，本申请实施例提供一种前端性能可视化监控方法，包括以下步骤：
[0006]执行目标前端代码，初始化异步存储对象和同步存储对象；
[0007]监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；
[0008]获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；
[0009]基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。
[0010]在本专利技术的一些实施例中，所述监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤具体包括：
[0011]获取所述目标前端代码的异步请求的状态属性；
[0012]根据所述异步请求的状态属性获取所述异步请求的异步信息；
[0013]将所述异步请求的异步信息写入所述异步存储对象。
[0014]在本专利技术的一些实施例中，所述根据所述异步请求的状态属性获取所述异步请求
的异步信息的步骤具体包括：
[0015]若所述异步请求的状态属性的初始值发生变化，则获取所述异步请求的地址信息及响应时间信息；
[0016]将所述地址信息和所述响应时间信息对应绑定为异步信息。
[0017]在本专利技术的一些实施例中，所述获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤具体包括：
[0018]解析所述目标前端代码的同步请求，获取所述同步请求的执行函数；
[0019]计算所述执行函数的执行时间，并将所述执行时间和所述执行函数对应绑定为同步信息。
[0020]在本专利技术的一些实施例中，所述基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控的步骤具体包括：
[0021]将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控。
[0022]在本专利技术的一些实施例中，所述将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控的步骤具体包括：
[0023]将所述异步信息和所述同步信息分别进行JSON格式化；
[0024]将格式化后的异步信息和同步信息输出到基于Echarts实现的可视化图表中，对所述目标前端代码的性能进行监控。
[0025]第二方面，本申请实施例提供一种前端性能可视化监控系统，其包括：
[0026]初始化模块，用于执行目标前端代码，初始化异步存储对象和同步存储对象；
[0027]监听模块，用于监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；
[0028]获取模块，用于获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；
[0029]可视化监控模块，用于基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。
[0030]在本专利技术的一些实施例中，所述监听模块具体包括：
[0031]第一获取子模块，用于获取所述目标前端代码的异步请求的状态属性；
[0032]第二获取子模块，用于根据所述异步请求的状态属性获取所述异步请求的异步信息；
[0033]写入子模块，用于将所述异步请求的异步信息写入所述异步存储对象。
[0034]第三方面，本申请实施例提供一种电子设备，其包括存储器，用于存储一个或多个程序；处理器，当上述一个或多个程序被上述处理器执行时，实现如上述第一方面中任一项上述的方法。
[0035]第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述第一方面中任一项上述的方法。
[0036]相对于现有技术，本专利技术的实施例至少具有如下优点或有益效果：
[0037]本专利技术的实施例提出了一种前端性能可视化监控方法，其通过在执行目标前端代码的同时初始化一个异步存储对象和一个同步存储对象，然后分别监听目标前端代码的异
步请求和解析同步请求，根据异步请求的状态变化将包括请求地址和响应时间的异步信息写入异步存储对象中，并将同步请求的执行函数和执行时间写入同步存储对象中，最后在可视化的时候将异步存储对象和同步存储对象中的信息格式化后通过Echarts的图表进行监控，对请求数据规范化处理的同时，便于开发人员直观地监控目标前端代码的执行过程，快速了解代码的执行逻辑，帮助开发人员根据时间信息评估对应接口或函数的响应效率或执行效率，快速地定位问题，从而更好地对代码进行优化。
附图说明
[0038]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0039]图1为本专利技术一种前端性能可视化监控方法一实施例的流程图；
[0040]图2为本专利技术实施例中监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤的具体流程图；
[0041]图3为本专利技术实施例中根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤的具体流程图；
[0042]图4为本专利技术实施例中获取所述目标前端代码的同步请求并解析本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端性能可视化监控方法，其特征在于，包括：执行目标前端代码，初始化异步存储对象和同步存储对象；监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象；获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象；基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控。2.如权利要求1所述的一种前端性能可视化监控方法，其特征在于，所述监听所述目标前端代码的异步请求，获取所述异步请求的异步信息后写入所述异步存储对象的步骤具体包括：获取所述目标前端代码的异步请求的状态属性；根据所述异步请求的状态属性获取所述异步请求的异步信息；将所述异步请求的异步信息写入所述异步存储对象。3.如权利要求2所述的一种前端性能可视化监控方法，其特征在于，所述根据所述异步请求的状态属性获取所述异步请求的异步信息的步骤具体包括：若所述异步请求的状态属性的初始值发生变化，则获取所述异步请求的地址信息及响应时间信息；将所述地址信息和所述响应时间信息对应绑定为异步信息。4.如权利要求3所述的一种前端性能可视化监控方法，其特征在于，所述获取所述目标前端代码的同步请求并解析，得到所述同步请求的同步信息后写入所述同步存储对象的步骤具体包括：解析所述目标前端代码的同步请求，获取所述同步请求的执行函数；计算所述执行函数的执行时间，并将所述执行时间和所述执行函数对应绑定为同步信息。5.如权利要求4所述的一种前端性能可视化监控方法，其特征在于，所述基于所述异步存储对象和所述同步存储对象对所述目标前端代码进行可视化监控的步骤具体包括：将所述异步存储对象中的异步信息和所述同步存储对象中的同步信息格式化后输出到可视化图表进行监控。6.如...

【专利技术属性】
技术研发人员：曹毅，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：