CN116932329A - 前端性能监控方法及计算机可读存储介质 - Google Patents

Abstract

本申请提供一种前端性能监控方法及计算机可读存储介质，针对前端页面的前端框架，通过mobx底层钩子函数埋点和react底层钩子函数埋点的方式，采集框架中存在的性能信息，并生成对应的上报数据进行上报。针对前端页面的业务需求，通过业务埋点的方式，采集业务需求相关的数据，并生成对应的上报数据进行上报。针对前端页面的弹层页，通过路由监听埋点的方式，采集弹层页的性能信息，并生成对应的上报数据进行上报。

Description

前端性能监控方法及计算机可读存储介质

技术领域

本申请涉及应用性能管理技术领域，具体而言，涉及一种前端性能监控方法及计算机可读存储介质。

背景技术

前端性能监控属于应用性能管理(Application Performance Management，APM)领域。APM是一种集成各种技术和方法的解决方案，旨在优化现代应用程序的性能、稳定性和可伸缩性。在APM中，前端性能监控通常被视为应用程序性能监控的一个关键部分。它提供了实时的性能数据和指标，例如页面加载时间、渲染时间、资源使用情况等，帮助开发人员识别出影响应用程序性能的瓶颈，并采取相应的措施来改善应用程序性能，以确保应用程序在不同设备和网络环境下都能够快速、平稳地运行。

在前端性能监控中，用户环境的复杂多变是一个关键问题。因为不同用户使用不同的设备、浏览器和网络环境，这些因素都会影响Web应用程序的性能表现。此外，用户所面临的具体情况也会影响他们的使用行为，比如他们使用应用程序的时间、频率、交互方式等。因此，开发人员需要收集尽可能多的数据来了解真实用户环境下的应用程序性能。

现有Web应用程序通常会使用各种JavaScript框架和库，例如react、Vue，常规的性能监控工具并未考虑这些框架中特定的性能问题。许多性能监控工具可以收集和分析Web应用程序的性能数据，但它们通常无法为特定的业务需求提供针对性的数据收集和建议。此外，对于采用路由弹层切页加载的页面，由于并没有触发新的页面请求，无法监控到弹层页的性能状况。综上所述，现有的性能监控工具存在缺少业务针对性、缺少前端框架针对性以及无法监控到弹层页的性能状况的问题。

发明内容

本申请实施例的目的在于提供一种前端性能监控方法及计算机可读存储介质，用以解决现有的性能监控工具存在缺少业务针对性、缺少前端框架针对性以及无法监控到弹层页的性能状况的问题。

本申请实施例提供的一种前端性能监控方法，包括：

根据埋点数据格式和埋点数据类型，对前端页面进行埋点；

响应于对前端页面的触发操作，得到至少一种埋点上报数据类型的埋点上报数据，进行埋点上报数据的上报；

其中，埋点数据类型包括通用场景埋点、mobx底层钩子函数埋点、react底层钩子函数埋点、路由监听埋点和业务埋点中的至少一个；埋点上报数据类型包括功能性埋点上报数据、动作耗时埋点上报数据、函数执行耗时埋点上传数据、路由切换渲染完成埋点上报数据、错误上报数据和性能上报数据中的至少一个。

上述技术方案中，针对前端页面的前端框架，通过mobx底层钩子函数埋点和react底层钩子函数埋点的方式，采集框架中存在的性能信息，并生成对应的上报数据进行上报。针对前端页面的业务需求，通过业务埋点的方式，采集业务需求相关的数据，并生成对应的上报数据进行上报。针对前端页面的弹层页，通过路由监听埋点的方式，采集弹层页的性能信息，并生成对应的上报数据进行上报。

在一些可选的实施方式中，其中，埋点数据类型为通用场景埋点；通用场景埋点包括首屏埋点、白屏埋点和错误埋点中的至少一个；

埋点上报数据类型，包括：功能性埋点上报数据、错误上报数据和性能上报数据中的至少一个；

根据埋点数据格式和埋点数据类型，对前端页面进行埋点，包括：

获取开始节点；

在获取开始节点后，将前端页面的设定区域加载完成，或设定时间内没有节点变动，作为首屏结束节点；

根据首屏结束节点与开始节点，得到首屏耗时；

其中，首屏结束节点、开始节点和首屏耗时中的至少一个，用于生成功能性埋点上报数据。

上述技术方案中，通用场景埋点包括首屏埋点、白屏埋点和错误埋点。其中，通过错误埋点采集的错误信息可用于生成错误上报数据进行上报，具体的获取错误信息的方法包括通过window.error方法、xhrReadyStateChange监听、unhandledrejection时间监听、error事件监听、React ErrorBoundary错误监听等。通过首屏埋点采集的首屏信息包括开始节点、首屏结束节点和首屏耗时，并且，本实施例中将前端页面的设定区域加载完成，或设定时间内没有节点变动，作为首屏结束节点，能够提供更准确的首屏耗时，其中，前端页面的设定区域可以为前端页面的中间部分区域，例如页面的上下10％、左右15％的中间区域。

在一些可选的实施方式中，根据埋点数据格式和埋点数据类型，对前端页面进行埋点，还包括：

在获取开始节点后，监听DOM树的变化，将第一次插入DOM的节点作为白屏结束节点；

根据开始节点和白屏结束节点，得到白屏耗时；

其中，开始节点、白屏结束节点和白屏耗时中的至少一个，用于生成功能性埋点上报数据。

上述技术方案中，通过白屏埋点的方式采集白屏信息，白屏信息包括开始节点、白屏结束节点和白屏耗时等。本实施例中可采用MutationObserver来监听DOM更改，第一次插入DOM的节点标记为白屏结束节点，并通过performance.mark进行节点标记。再根据开始节点和白屏结束节点，得到白屏耗时。

在一些可选的实施方式中，其中，埋点数据类型为mobx底层钩子函数埋点；mobx底层钩子函数埋点用于采集动作信息，动作信息包括动作执行开始时间、动作执行结束时间、动作执行花费时间、动作函数名称、动作函数方法、动作所在对象的键值、动作所在对象的构造函数名称、动作所在对象的构造函数体和动作执行堆栈信息中的至少一个。

埋点上报数据类型，包括：动作耗时埋点上报数据、错误上报数据和性能上报数据中的至少一个。

上述技术方案中，动作耗时埋点上报数据的参数包括动作执行开始时间、动作执行结束时间、动作执行花费时间、动作函数名称、动作函数方法、动作所在对象的键值、动作所在对象的构造函数名称、动作所在对象的构造函数体和动作执行堆栈信息等动作信息，对应的，通过mobx底层钩子函数埋点采集的数据也包括这些动作信息。

在一些可选的实施方式中，其中，埋点数据类型为react底层钩子函数埋点；react底层钩子函数埋点用于采集函数执行信息，函数执行信息包括节点对应业务标识码、节点显示名、节点渲染耗时、DOM树耗时、节点的类名和节点标识码中的至少一个；

埋点上报数据类型，包括：函数执行耗时埋点上传数据、错误上报数据和性能上报数据中的至少一个。

上述技术方案中，函数执行耗时埋点上传数据的参数包括节点对应业务标识码、节点显示名、节点渲染耗时、DOM树耗时、节点的类名和节点标识码等函数执行信息，对应的，通过react底层钩子函数埋点采集的数据也包括这些函数执行信息。

在一些可选的实施方式中，其中，埋点数据类型为路由监听埋点；路由监听埋点用于采集路由切换的渲染信息，路由切换的渲染信息包括渲染耗时、渲染开始时间、渲染结束时间、路由渲染是否被中断、路由渲染计算是否是超时、路由渲染期间插入的DOM元素和渲染范围区间中的至少一个；

埋点上报数据类型，包括：路由切换渲染完成埋点上报数据或性能上报数据。

上述技术方案中，路由切换渲染完成埋点上报数据的参数包括渲染耗时、渲染开始时间、渲染结束时间、路由渲染是否被中断、路由渲染计算是否是超时、路由渲染期间插入的DOM元素和渲染范围区间等渲染信息，对应的，通过路由监听埋点采集的数据也包括这些渲染信息。

在一些可选的实施方式中，其中，埋点数据类型为业务埋点；

埋点上报数据类型，包括：错误上报数据或性能上报数据。

在一些可选的实施方式中，其中，进行埋点上报数据的上报，包括：

利用定时器，设定每隔固定时间，进行定时上报；

和/或，对埋点上报数据中的错误上报数据进行立即上报；

和/或，判断页面性能工具中待上报的数据量是否达到上报阈值，若页面性能工具中待上报的数据量达到上报阈值，则进行埋点上报数据的上报，并清理页面性能工具中的数据。

上述技术方案中，对错误上报数据立即上报，其他上报数据统一定时上报，并且，在页面性能工具中待上报的数据量快要达到上限时进行上报并清理数据，从而避免错误捕获遗漏以及其他上报数据丢失。

在一些可选的实施方式中，在埋点数据格式中增加唯一埋点标记的参数taskID，taskID用来标记同一条任务线，例如同一个表单的开始和结束。在性能上报数据中增加与API请求对应的参数traceID，一个任务可能存在多个API请求，即一个taskID对应多个traceID。在进行数据上报时，一个任务上报一次主表数据，主表数据包括taskID，后续同一个任务，在上报数据时更新次表数据，次表数据包括traceID。本实施例通过taskID和traceID的设置，打通了前端页面到后端监控平台之间的链路，体现了页面访问过程，从而使开发人员能够理解页面加载时间、资源加载时间等关键指标背后的具体原因和影响因素。

本申请实施例提供的一种电子设备，包括：处理器和存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述机器可读指令被所述处理器执行时执行如以上任一所述的方法。

本申请实施例提供的一种计算机可读存储介质，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如以上任一所述的方法。

附图说明

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

图1为本申请实施例提供的一种前端性能监控方法步骤流程图；

图2为本申请实施例提供的电子设备的一种可能的结构示意图。

图标：1-处理器，2-存储器，3-通信接口，4-通信总线。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

本申请的一个或多个实施例的前端性能监控方法，可应用于性能监控工具Performance，其是一个Web API，提供了一组方法和属性，以便开发人员可以测量和分析Web应用程序的性能表现。其中最常用的方法是performance.timing，该方法提供了有关网页载入时间、资源加载时间、DNS解析时间、重定向时间等方面的信息。通过使用这些信息，可以确定应用程序性能中的瓶颈，并采取相应的措施来改善性能。此外，Performance还提供了其他一些方法和属性，例如performance.now()(获取当前时间戳)、performance.mark()(标记特定点)、performance.measure()(测量两个标记点之间的时间)等等。这些方法和属性可以有助于更深入地了解应用程序的性能表现，并进行更细粒度的优化。

请参照图1，图1为本申请实施例提供的一种前端性能监控方法步骤流程图，具体包括：

步骤100、根据埋点数据格式和埋点数据类型，对前端页面进行埋点；其中，埋点数据类型包括通用场景埋点、mobx底层钩子函数埋点、react底层钩子函数埋点、路由监听埋点和业务埋点中的至少一个；

步骤200、响应于对前端页面的触发操作，得到至少一种埋点上报数据类型的埋点上报数据，进行埋点上报数据的上报；其中，埋点上报数据类型包括功能性埋点上报数据、动作耗时埋点上报数据、函数执行耗时埋点上传数据、路由切换渲染完成埋点上报数据、错误上报数据和性能上报数据中的至少一个。

其中，react是由Facebook开发的用于构建用户界面的JavaScript库。它通过使用虚拟DOM(Virtual DOM)来实现高效的UI更新。当应用程序状态改变时，react会先更新虚拟DOM，然后比较新旧虚拟DOM之间的差异，并仅更新必要的部分，从而避免了直接操作实际DOM的昂贵操作。React应用程序中具有处理路由的库ReactRouter，通过使用ReactRouter，可以将路由逻辑与组件分离，简化代码，并提高可重复使用性。React Router还支持嵌套路由、动态路由、路由守卫等高级功能，能够更加灵活地处理不同的路由需求。

mobx是用于构建react应用程序的状态管理库。它采用响应式编程的范例，使得开发人员可以简化应用程序的状态管理，并提高应用程序的性能。在mobx中，可以将任何JavaScript对象转换为可观察对象。当某个可观察对象的属性值发生变化时，与之相关的组件会自动重新渲染，从而保持UI的实时性。

本申请实施例中，针对前端页面的前端框架，通过mobx底层钩子函数埋点和react底层钩子函数埋点的方式，采集框架中存在的性能信息，并生成对应的上报数据进行上报。针对前端页面的业务需求，通过业务埋点的方式，采集业务需求相关的数据，并生成对应的上报数据进行上报。针对前端页面的弹层页，通过路由监听埋点的方式，采集弹层页的性能信息，并生成对应的上报数据进行上报。

在一些可选的实施方式中，其中，埋点数据类型为通用场景埋点；通用场景埋点包括首屏埋点、白屏埋点和错误埋点中的至少一个；

对应的，埋点上报数据类型，包括：功能性埋点上报数据、错误上报数据和性能上报数据中的至少一个；

本实施例的步骤100中，根据埋点数据格式和埋点数据类型，对前端页面进行埋点，包括：获取开始节点；在获取开始节点后，将前端页面的设定区域加载完成，或设定时间内没有节点变动，作为首屏结束节点；根据首屏结束节点与开始节点，得到首屏耗时；其中，首屏结束节点、开始节点和首屏耗时中的至少一个，用于生成功能性埋点上报数据。

本申请实施例中，通用场景埋点包括首屏埋点、白屏埋点和错误埋点。其中，通过错误埋点采集的错误信息可用于生成错误上报数据进行上报，具体的获取错误信息的方法包括通过window.onerror方法、xhrReadyStateChange监听、unhandledrejection时间监听、error事件监听、React ErrorBoundary错误监听等。通过首屏埋点采集的首屏信息包括开始节点、首屏结束节点和首屏耗时，并且，本实施例中将前端页面的设定区域加载完成，或设定时间内没有节点变动，作为首屏结束节点，能够提供更准确的首屏耗时，其中，前端页面的设定区域可以为前端页面的中间部分区域，例如页面的上下10％、左右15％的中间区域。

其中，window.onerror是一个Web API，用于在JavaScript代码运行时捕获全局错误。xhrReadyStateChange是XMLHttpRequest(XHR)的一个事件，当XMLHttpRequest对象的readyState属性发生变化时触发。Unhandledrejection是Promise对象的一个事件，当Promise被拒绝且没有被捕获处理时触发，这个事件可以用来监听未处理的Promise异常并进行相应的处理。React ErrorBoundary是react的一个组件，用于处理在子组件中抛出的JavaScript错误，其可以捕获并处理react组件树内部的异常。

另一实施例的步骤100中，根据埋点数据格式和埋点数据类型，对前端页面进行埋点，还包括：在获取开始节点后，监听DOM树的变化，将第一次插入DOM的节点作为白屏结束节点；根据开始节点和白屏结束节点，得到白屏耗时；其中，开始节点、白屏结束节点和白屏耗时中的至少一个，用于生成功能性埋点上报数据。

本申请实施例中，通过白屏埋点的方式采集白屏信息，白屏信息包括开始节点、白屏结束节点和白屏耗时等。本实施例中可采用MutationObserver来监听DOM更改，第一次插入DOM的节点标记为白屏结束节点，并通过performance.mark进行节点标记。再根据开始节点和白屏结束节点，得到白屏耗时。其中，MutationObserver是Web API中的一个接口，用于异步监听DOM树的变化，它提供了一种高效、灵活和可扩展的方式来监视DOM元素的改变，包括节点的添加、删除、属性更改等操作。

在一些可选的实施方式中，埋点数据类型为mobx底层钩子函数埋点；mobx底层钩子函数埋点用于采集动作信息，动作信息包括动作执行开始时间、动作执行结束时间、动作执行花费时间、动作函数名称、动作函数方法、动作所在对象的键值、动作所在对象的构造函数名称、动作所在对象的构造函数体和动作执行堆栈信息中的至少一个。

对应的，埋点上报数据类型，包括：动作耗时埋点上报数据、错误上报数据和性能上报数据中的至少一个。

本申请实施例中，动作耗时埋点上报数据的参数包括动作执行开始时间、动作执行结束时间、动作执行花费时间、动作函数名称、动作函数方法、动作所在对象的键值、动作所在对象的构造函数名称、动作所在对象的构造函数体和动作执行堆栈信息等动作信息，对应的，通过mobx底层钩子函数埋点采集的数据也包括这些动作信息。

在一些可选的实施方式中，埋点数据类型为react底层钩子函数埋点；react底层钩子函数埋点用于采集函数执行信息，函数执行信息包括节点对应业务标识码、节点显示名、节点渲染耗时、DOM树耗时、节点的类名和节点标识码中的至少一个；

对应的，埋点上报数据类型，包括：函数执行耗时埋点上传数据、错误上报数据和性能上报数据中的至少一个。

本申请实施例中，函数执行耗时埋点上传数据的参数包括节点对应业务标识码、节点显示名、节点渲染耗时、DOM树耗时、节点的类名和节点标识码等函数执行信息，对应的，通过react底层钩子函数埋点采集的数据也包括这些函数执行信息。

在一些可选的实施方式中，埋点数据类型为路由监听埋点；路由监听埋点用于采集路由切换的渲染信息，路由切换的渲染信息包括渲染耗时、渲染开始时间、渲染结束时间、路由渲染是否被中断、路由渲染计算是否是超时、路由渲染期间插入的DOM元素和渲染范围区间中的至少一个；

对应的，埋点上报数据类型，包括：路由切换渲染完成埋点上报数据或性能上报数据。

本申请实施例中，路由切换渲染完成埋点上报数据的参数包括渲染耗时、渲染开始时间、渲染结束时间、路由渲染是否被中断、路由渲染计算是否是超时、路由渲染期间插入的DOM元素和渲染范围区间等渲染信息，对应的，通过路由监听埋点采集的数据也包括这些渲染信息。

在一些可选的实施方式中，其中，埋点数据类型为业务埋点；对应的，埋点上报数据类型，包括：错误上报数据或性能上报数据。

在一些可选的实施方式中，其中，进行埋点上报数据的上报，本实施例同时采用以下三种上报方式：

第一种上报方式，利用定时器，设定每隔固定时间，进行定时上报；

第二种上报方式，对埋点上报数据中的错误上报数据进行立即上报；

第三种上报方式，判断页面性能工具中待上报的数据量是否达到上报阈值，若页面性能工具中待上报的数据量达到上报阈值，则进行埋点上报数据的上报，并清理页面性能工具中的数据。

本申请实施例中，对错误上报数据立即上报，其他上报数据统一定时上报，并且，在页面性能工具中待上报的数据量快要达到上限时进行上报并清理数据，从而避免错误捕获遗漏以及其他上报数据丢失。

在一些可选的实施方式中，对性能监控工具Performance增加以下功能：

增加重复上报数据的拦截处理功能，实现非正常上报的熔断机制，防止业务异常导致服务器压力过大。

增加数据收集上报开关，包括通用场景埋点采集数据的开关，mobx底层钩子函数埋点采集数据的开关，react底层钩子函数埋点采集数据的开关，路由监听埋点采集数据的开关，业务埋点采集数据的开关；通过设置开关的方式，提供个性化收集数据的能力。

增加上报数据中业务或模块对应负责人的映射表，制定性能阈值，设计消息推送机制，统一接口上报数据，在接口收集到的异常指标的性能数据后，根据设定的消息推送机制，推送到具体的业务负责人。具体过程为：当某一上报数据中的性能指标超过正常性能阈值的范围时，将该上报数据，通过对应的消息推送方式，推送给该上报数据给上报数据所属业务或模块对应的负责人，从而实现实时通知具体负责人，方便负责人及时知晓情况，及时安排开发人员优化。

在一些可选的实施方式中，考虑到线上问题复现困难、追溯困难也是前端性能监控面临的重要问题。由于Web应用程序运行在分布式系统中，可能会有多个服务同时运行，此外，某些性能问题只在特定条件下才会出现，例如特定的设备、网络环境或流量峰值。这使得问题的复现和追踪更加困难，需要开发人员耗费更多的时间和精力来解决问题。为此，本实施例通过如下手段来解决上述问题：

在埋点数据格式中增加唯一埋点标记的参数taskID，taskID用来标记同一条任务线，例如同一个表单的开始和结束。在性能上报数据中增加与API请求对应的参数traceID，一个任务可能存在多个API请求，即一个taskID对应多个traceID。在进行数据上报时，一个任务上报一次主表数据，主表数据包括taskID，后续同一个任务，在上报数据时更新次表数据，次表数据包括traceID。本实施例通过taskID和traceID的设置，打通了前端页面到后端监控平台之间的链路，体现了页面访问过程，从而使开发人员能够理解页面加载时间、资源加载时间等关键指标背后的具体原因和影响因素。

图2示出了本申请实施例提供的电子设备的一种可能的结构。参照图2，电子设备包括：处理器1、存储器2和通信接口3，这些组件通过通信总线4和/或其他形式的连接机构(未示出)互连并相互通讯。

其中，存储器2包括一个或多个(图中仅示出一个)，其可以是，但不限于，随机存取存储器(Random Access Memory，简称RAM)，只读存储器(Read Only Memory，简称ROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，电可擦除可编程只读存储器(Electric Erasable Programmable Read-Only Memory，简称EEPROM)等。处理器1以及其他可能的组件可对存储器2进行访问，读和/或写其中的数据。

处理器1包括一个或多个(图中仅示出一个)，其可以是一种集成电路芯片，具有信号的处理能力。上述的处理器1可以是通用处理器，包括中央处理器(Central ProcessingUnit，简称CPU)、微控制单元(Micro Controller Unit，简称MCU)、网络处理器(NetworkProcessor，简称NP)或者其他常规处理器；还可以是专用处理器，包括神经网络处理器(Neural-network Processing Unit，简称NPU)、图形处理器(Graphics Processing Unit，简称GPU)、数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application Specific Integrated Circuits，简称ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。并且，在处理器1为多个时，其中的一部分可以是通用处理器，另一部分可以是专用处理器。

通信接口3包括一个或多个(图中仅示出一个)，可以用于和其他设备进行直接或间接地通信，以便进行数据的交互。通信接口3可以包括进行有线和/或无线通信的接口。

在存储器2中可以存储一个或多个计算机程序指令，处理器1可以读取并运行这些计算机程序指令，以实现本申请实施例提供的方法。

可以理解的，图2所示的结构仅为示意，电子设备还可以包括比图2中所示更多或者更少的组件，或者具有与图2所示不同的结构。图2中所示的各组件可以采用硬件、软件或其组合实现。电子设备可能是实体设备，例如PC机、笔记本电脑、平板电脑、手机、服务器、嵌入式设备等，也可能是虚拟设备，例如虚拟机、虚拟化容器等。并且，电子设备也不限于单台设备，也可以是多台设备的组合或者大量设备构成的集群。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被计算机的处理器读取并运行时，执行本申请实施例提供的方法。例如，计算机可读存储介质可以实现为图2中电子设备中的存储器2。

在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

另外，作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

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

Claims (10)

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

根据埋点数据格式和埋点数据类型，对前端页面进行埋点；

响应于对所述前端页面的触发操作，得到至少一种埋点上报数据类型的埋点上报数据，进行所述埋点上报数据的上报；

其中，所述埋点数据类型包括通用场景埋点、mobx底层钩子函数埋点、react底层钩子函数埋点、路由监听埋点和业务埋点中的至少一个；所述埋点上报数据类型包括功能性埋点上报数据、动作耗时埋点上报数据、函数执行耗时埋点上传数据、路由切换渲染完成埋点上报数据、错误上报数据和性能上报数据中的至少一个。

2.如权利要求1所述的方法，其特征在于，其中，所述埋点数据类型为所述通用场景埋点；所述通用场景埋点包括首屏埋点、白屏埋点和错误埋点中的至少一个；

所述埋点上报数据类型，包括：所述功能性埋点上报数据、错误上报数据和性能上报数据中的至少一个；

所述根据埋点数据格式和埋点数据类型，对前端页面进行埋点，包括：

获取开始节点；

在获取所述开始节点后，将所述前端页面的设定区域加载完成，或设定时间内没有节点变动，作为首屏结束节点；

根据所述首屏结束节点与开始节点，得到首屏耗时；

其中，所述首屏结束节点、开始节点和首屏耗时中的至少一个，用于生成所述功能性埋点上报数据。

3.如权利要求2所述的方法，其特征在于，所述根据埋点数据格式和埋点数据类型，对前端页面进行埋点，还包括：

在获取所述开始节点后，监听DOM树的变化，将第一次插入DOM的节点作为白屏结束节点；

根据所述开始节点和白屏结束节点，得到白屏耗时；

其中，所述开始节点、白屏结束节点和白屏耗时中的至少一个，用于生成所述功能性埋点上报数据。

4.如权利要求1所述的方法，其特征在于，其中，所述埋点数据类型为所述mobx底层钩子函数埋点；所述mobx底层钩子函数埋点用于采集动作信息，所述动作信息包括动作执行开始时间、动作执行结束时间、动作执行花费时间、动作函数名称、动作函数方法、动作所在对象的键值、动作所在对象的构造函数名称、动作所在对象的构造函数体和动作执行堆栈信息中的至少一个；

所述埋点上报数据类型，包括：所述动作耗时埋点上报数据、错误上报数据和性能上报数据中的至少一个。

5.如权利要求1所述的方法，其特征在于，其中，所述埋点数据类型为所述react底层钩子函数埋点；所述react底层钩子函数埋点用于采集函数执行信息，所述函数执行信息包括节点对应业务标识码、节点显示名、节点渲染耗时、DOM树耗时、节点的类名和节点标识码中的至少一个；

所述埋点上报数据类型，包括：所述函数执行耗时埋点上传数据、错误上报数据和性能上报数据中的至少一个。

6.如权利要求1所述的方法，其特征在于，其中，所述埋点数据类型为所述路由监听埋点；所述路由监听埋点用于采集路由切换的渲染信息，所述路由切换的渲染信息包括渲染耗时、渲染开始时间、渲染结束时间、路由渲染是否被中断、路由渲染计算是否是超时、路由渲染期间插入的DOM元素和渲染范围区间中的至少一个；

所述埋点上报数据类型，包括：所述路由切换渲染完成埋点上报数据或性能上报数据。

7.如权利要求1所述的方法，其特征在于，其中，所述埋点数据类型为所述业务埋点；

所述埋点上报数据类型，包括：所述错误上报数据或性能上报数据。

8.如权利要求1所述的方法，其特征在于，其中，所述进行所述埋点上报数据的上报，包括：

利用定时器，设定每隔固定时间，进行定时上报；

和/或，对所述埋点上报数据中的错误上报数据进行立即上报；

和/或，判断页面性能工具中待上报的数据量是否达到上报阈值，若所述页面性能工具中待上报的数据量达到所述上报阈值，则进行所述埋点上报数据的上报，并清理所述页面性能工具中的数据。

9.如权利要求1所述的方法，其特征在于，在埋点数据格式中增加唯一埋点标记的参数taskID，所述参数taskID用来标记同一条任务线；在性能上报数据中增加与API请求对应的参数traceID。

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