CN113904964A - 一种网站前端性能监控方法、装置、电子设备及介质 - Google Patents

Abstract

本发明公开了一种网站前端性能监控方法、装置、电子设备及介质，所述方法包括：获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有预设错误阈值以及预设预警条件；针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告。该方法能针对性地筛选出网页前端性能数据中的不合格指标，并向专业人员提供不合格指标的优化方向，进而快速定位到问题，提高页面加载速度和用户体验。

Description

一种网站前端性能监控方法、装置、电子设备及介质

技术领域

本发明涉及基架运维技术领域，尤其涉及一种网站前端性能监控方法、装置、电子设备及介质。

背景技术

随着时代的发展，现如今的移动基础设备越来越完善，网络速度越来越快，Web网站的内容和交互也越来越丰富。这也使得技术开发人员可配置的选项增加，所需要写的代码量在增加，通过超文本（HyperText Transfer Protocol，HTTP）传输给用户的文件大小也在增大，换言之，导致页面加载异常、加载速度过慢的因素也越来越多。在遇到页面无法正常打开、加载速度过慢时，需要开发人员从前端到后端到服务器配置等多个问题上进行一一排查。而影响网页加载速度的原因宏观上包括手机型号、浏览器、网络状况，具体体现在域名系统（Domain Name System，DNS）解析、超文本传输（HyperText Transfer Protocol，HTTP）连接、重定向次数、缓存、代码的处理等，因此，定位问题的过程费时费力，需耗费大量人员和时间成本。

发明内容

本申请实施例提供了一种网站前端性能监控方法、装置、电子设备及介质，该方法能针对性地筛选出网页前端性能数据中的不合格指标，并向专业人员提供不合格指标的优化方向，进而快速定位到问题，提高页面加载速度和用户体验。

第一方面，本发明通过本发明的一实施例提供如下技术方案：

一种网站前端性能监控方法，包括：

获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有所述预设错误阈值以及所述预设预警条件；针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

优选地，所述指标数据包括以下三种类型中的至少两种：时间数据；用户数据；网络数据。

优选地，所述时间数据包括：白屏时间、首屏时间、传输控制协议时间、文档对象模型加载时间、域名系统时间与超文本传输时间中的一种或多种数据组合，所述用户数据包括：用户操作数据，所述网络数据包括：网页加载时间。

优选地，所述按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，包括：判断指标数据包含的每个数据值是否超过预设错误阈值；将超过预设错误阈值的数据值确定为错误数据，并统计指标数据中的错误数据量。

优选地，所述基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，包括：根据所述指标数据的总数据量以及所述错误数据量，得到所述指标数据的预警百分比；判断所述预警百分比是否大于所述指标数据对应的预设警告百分比；若是，则判定所述指标数据为不合格的指标数据。

优选地，所述预设警告百分比在10%-30%之间。

优选地，所述方法还包括：在用户操作目标网站的过程中，若检测到所述用户处于未联网状态，则将采集到的性能数据进行缓存；在检测到所述用户的网络恢复时，对缓存的性能数据执行所述针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格的步骤。

第二方面，本发明通过本发明的一实施例，提供如下技术方案：

一种前端性能监控装置，包括：

获取模块，用于获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；

筛查模块，用于针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有所述预设错误阈值以及所述预设预警条件；

展示模块，用于针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

第三方面，本发明通过本发明的一实施例，提供如下技术方案：

一种电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现前述第一方面中任一项所述方法的步骤。

第四方面，本发明通过本发明的一实施例，提供如下技术方案：

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述第一方面中任一项所述方法的步骤。

本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：

本发明实施例提供的一种网站前端性能监控方法、装置、电子设备及介质，所述方法包括：通过实时监测每个用户在进入网站的过程中，网站前端产生的性能数据，其中，该性能监控包含性能监控和错误监控两方面；基于性能数据中每种类型的指标数据的预设错误阈值，得到每一类指标数据中的错误数据量。从而使得每一类指标数据能基于对应的预设错误阈值得到错误数据量，而无需专业人员来按照各自的标准设置错误阈值，有利于实现错误阈值的统一，提高对性能数据监控的准确性，有效地防止出现错误阈值设置过大或过小，而影响监测结果的准确性以及复杂化定位问题的过程。本申请能够基于错误数据量与预设预警条件，针对性地筛选出网页前端性能数据中的不合格指标，向专业人员提供不合格指标的优化方向，进而快速定位到问题，提高网站加载速度和用户体验。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的网站前端性能监控方法的流程图；

图2为本发明实施例提供的网站前端性能监控装置的结构示意图；

图3为本发明实施例提供的电子设备的结构示意图。

具体实施方式

本申请实施例通过提供了一种网站前端性能监控方法、装置、电子设备及介质，该方法能针对性地筛选出网页前端性能数据中的不合格指标，并向专业人员提供不合格指标的优化方向，进而快速定位到问题，提高页面加载速度和用户体验。

本申请实施例的技术方案为解决上述技术问题，总体思路如下：

一种网站前端性能监控方法、装置、电子设备及介质，所述方法包括：获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有预设错误阈值以及预设预警条件；针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。

需要说明的是，网站前端性能监控包含性能监控和错误监控两方面，而错误监控分为运行错误和资源加载错误，在监控中，可以对运行错误和资源加载错误进行统一监听，并与性能数据一起发送给前端性能监控装置做收集。

另外，影响页面加载的速度的因素大体上有以下几个方面：用户的网络环境、网站的架构、服务器的带宽以及前后端代码的规范程度等等。

第一方面，本发明实施例提供的一种网站前端性能监控方法，具体来讲，如图1所示，所述方法包括以下步骤S101至步骤S103。

步骤S101，获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据。

可以理解的是，本申请的执行主题可以为前端性能监控装置，或者是服务器，具体此处不做限定，本申请实施例将以前端性能监控装置为执行主体为例进行说明。

在具体实施过程中，在用户使用移动端进行访问并进行业务办理请求时，前端性能监控装置可以同时获取在移动端产生的待分析的多个前端页面，并基于用户进行业务办理请求时，在多个前端页面中发送数据采集请求。

其中，获取性能数据的过程包括：基于通过浏览器自带的window.performance属性中Navigation.timing来获取对应的性能数据。

在具体实施中，根据W3C引入的performance，对每一个进入到网站的用户进行性能方面的数据采集，所述指标数据包括以下三种类型中的至少两种：时间数据、用户数据与网络数据。其中，时间数据包括：白屏时间、首屏时间、传输控制协议（TransmissionControl Protocol，TCP）时间、文档对象模型（Document Object Model，DOM）加载时间、域名系统（Domain Name System，DNS）时间与超文本传输（HyperText Transfer Protocol，HTTP）时间中的一种或多种数据组合，所述用户数据包括用户操作数据，所述网络数据包括：网页加载数据（包含图片）。

其中，白屏时间是浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间；首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

当然，所述用户数据还可以包括：用户的设备数据，例如：点亮、内存、ip地址及地理位置等数据信息，所述网络数据还可以包括：用户设备的网络状态数据，例如：WiFi数据与移动流量数据等数据信息。

本申请是针对每个用户对目标网站操作时，获取到的网站前端的性能数据，即针对单个用户产生单个的性能数据集合，前端性能监控装置对每单个性能数据集合进行数据监控。需要说明的是，用户每进行一次网页加载，监控装置都将进行一次性能数据的获取。为了便于理解，在本申请以指标数据网页加载数据为例进行具体说明。

步骤S102，针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有预设错误阈值以及预设预警条件。因此，需设置针对不同指标数据的预设错误阈值和预设预警条件。

在具体实施例中，针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，可以包括：判断指标数据包含的每个数据值是否超过预设错误阈值S1；将超过预设错误阈值S1的数据值确定为错误数据，并统计指标数据中的错误数据量。

可以理解的是，由于用户在进入网页时会持续一定的时间，因此，每种指标类型的数据都将包括多个数据值。举例来说，网页加载数据将包括进入网页的这段时间内产生的多个加载数据值。其中，预设错误阈值S1的大小可以根据需要进行设置，且不同类型的指标数据的预设错误阈值可能存在不同。

具体地，将采集到的所有数据进行汇总，得到性能数据，该性能数据中包括网页加载数据，若网页加载数据对应的预设错误阈值为X，网页加载数据的总数据量为T，判断网页加载数据包含的每个加载数据值是否超过预设错误阈值X，将超过预设错误阈值X的加载数据值确定为网页加载数据中的错误数据值。举例来说，超过预设错误阈值X的加载数据值为3个，则确定网页加载数据中的错误数据值为3。

作为另一种可选地实施例，针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，还可以包括：判断指标数据包含的每个数据值是否超过预设错误阈值S2；将超过预设错误阈值的数据值确定为正确数据，并统计指标数据中的正确数据量；将指标数据的总数据量减去正确数据量，得到错误数据量。可以理解的是，这里的预设错误阈值S2与前述预设错误阈值S1为不同的值。

在具体实施例中，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，包括：根据指标数据的总数据量以及错误数据量，得到指标数据的预警百分比；判断预警百分比是否大于指标数据对应的预设警告百分比；若是，则判定指标数据为不合格的指标数据。

其中，预警警告百分比的大小可以根据需要进行设置，且不同类型的指标数据的预警警告百分比可能存在不同。当然，在某些情况下，每种类型的指标数据的预警警告百分比也可能相同。举例来说，所述预设警告百分比可以均在10%-30%之间。

具体地，若网页加载数据对应的预警警告百分比为P，将网页加载数据的错误数据量X比上网页加载数据的总数据量T，即X/T，得到网页加载数据的预警百分比Y。判断预警百分比Y是否大于预设警告百分比P，若是，则表明网页加载数据存在异常可能影响网页的加载，此时，判定网页加载数据为不合格的指标数据，若否，则表明网页加载数据为合格。

作为另一种可选地实施例，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，还可以包括：假设性能数据包含的总数据量为R，将网页加载数据的错误数据量X比上性能数据的总数据量R，即X/R，得到网页加载数据的预警百分比Y1。判断预警百分比Y1是否大于预设警告百分比P1，若是，则判定网页加载数据为不合格的指标数据，若否，则表明网页加载数据为合格。可以理解的是，由于比值的对象发生变化，因此，这里的预设警告百分比P1与上述提到的预设警告百分比P为不同的值。

进一步地，为了防止用户未联网而导致用户操作数据的丢失，本申请提供的监控方法还可以包括：在用户操作目标网站的过程中，若检测到用户处于未联网状态，则将采集到的性能数据进行缓存；在检测到用户的网络恢复时，对缓存的性能数据执行针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格的步骤。

在实际使用中，可能存在网络的中断而导致用户的操作无法完成，因此，监控装置可以在监测到用户处于未联网的状态时，将数据收集缓存至用户本地，待处于联网状态后再将性能数据收集，并针对该性能数据进行筛查，以判定出不合格指标。

步骤S103，针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

具体地，下面将分别以重定向次数、DNS时间、TCP时间/HTTP时间、白屏时间、DOM加载时间以及网页加载时间为不合格的指标数据为例，进行不合格指标的对应的预设优化报告的具体说明。

重定向次数为不合格指标：由于每一次重定向都有成本，需要请求服务器并得到服务器响应，如果重定向次数过多，会造成用户白屏时间较长，而重定向在后端处理的成本大于前端的成本，因此，针对此指标可以对服务器的重定向相关代码进行筛选优化。

DNS时间为不合格指标：针对DNS的处理，可以在前端开启预解析，即提前把变量或函数预先解析到它们被使用的环境中，筛选当前域名下的外链DNS的数量。设置专用服务器对资源进行统一管理，减少DNS请求。

TCP时间/HTTP时间为不合格指标：针对HTTP时间为不合格的优化分为两个方面：服务端检查缓存的设置是否合理，避免客户端每次都请求服务器；客户端应该减少HTTP请求减少与服务器的交互。

白屏时间为不合格指标：首先应该结合错误监控确定是否由于前端代码错误导致页面无法加载，其次检查服务器的接口处理是否造成了阻塞，或是接口处理时间过久，内容过多导致客户端白屏时间过久。

DOM加载时间为不合格指标：DOM加载时间不合格大多由前端外部文件引入阻塞或代码执行阻塞造成，可以重点排查script标签对、CSS文件引入的位置是否合理。如果合理，则结合错误监控判断是否由于代码阻塞造成DOM加载过慢。

网页加载时间为不合格指标：如果DOM加载时间为合格而网页加载时间为不合格，可排查图片的加载。服务端排查图片是否开启了缓存，服务器是否开启了压缩，是否使用了内容分发网络（Content Delivery Network或Content Distribution Network，CDN）。其中，CDN是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

在具体实施例中，展示预设优化报告的方式可以有多种。举例来说，不合格指标数据以标红的形式显示，优化报告以批注的形式附在标红的数据上。或者是，以列表的形式显示优化报告，其中优化报告与不合格指标数据一一对应等等。

综上所述，通过本发明实施例提供的一种网站前端性能监控方法，该性能监控方法包含性能监控和错误监控两方面：1、可以根据错误监控的预警快速定位前端的代码错误；2、可以根据性能监控的预警定位到问题范围。结合以上两点，使用本方法可以帮助专业人员快速定位问题，减少专业人员对问题的排查，缩短解决问题的时间，提高生产效率。

该方法能根据错误监控结合性能监控定位到导致页面无法正常加载或加载过慢的问题，即在监控到网页无法正常打开或者网页加载速度过慢等异常情况时，能针对性地筛选出对应的不合格指标，并向专业人员提供不合格指标的优化方向，进而提高页面加载速度和用户体验。

第二方面，基于同一发明构思，本实施例提供了一种网站前端性能监控装置，如图2所示，包括：

获取模块401，用于获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；

筛查模块402，用于针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有预设错误阈值以及预设预警条件；

展示模块403，用于针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

作为一种可选的实施例，所述指标数据包括以下三种类型中的至少两种：时间数据；用户数据；网络数据。

作为一种可选的实施例，所述时间数据包括：白屏时间、首屏时间、传输控制协议时间、文档对象模型加载时间、域名系统时间与超文本传输时间，所述用户数据包括：用户操作数据，所述网络数据包括：网页加载时间。

作为一种可选的实施例，所述筛查模块402，具体用于：判断指标数据包含的每个数据值是否超过预设错误阈值；将超过预设错误阈值的数据值确定为指标数据中的错误数据量。

作为一种可选的实施例，所述筛查模块402，具体用于：根据指标数据的总数据量以及错误数据量，得到指标数据的预警百分比；判断预警百分比是否大于指标数据对应的预设警告百分比；若是，则判定指标数据为不合格的指标数据。

作为一种可选的实施例，所述预设警告百分比在10%-30%之间。

作为一种可选的实施例，所述装置还包括：

联网监测模块，用于在用户操作目标网站的过程中，若检测到用户处于未联网状态，则将采集到的性能数据进行缓存；在检测到用户的网络恢复时，对缓存的性能数据执行针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于错误数据量以及预设预警条件，判定该类指标数据是否合格的步骤。

以上各模块可以是由软件代码实现，此时，上述的各模块可存储于控制设备的存储器内。以上各模块同样可以由硬件例如集成电路芯片实现。

本发明实施例所提供的一种网站前端性能监控装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

第三方面，基于同一发明构思，本实施例提供了一种电子设备500，如图3所示，包括：存储器501、处理器502及存储在存储器上并可在处理器上运行的计算机程序503，所述处理器502执行所述程序时实现前述第一方面所述网站前端性能监控方法的步骤。

第四方面，基于同一发明构思，本实施例提供了一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备500的处理器执行时，使得电子设备500能够执行一种网站前端性能监控方法，包括前述第一方面中任一项所述方法的步骤。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

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

获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；

针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有所述预设错误阈值以及所述预设预警条件；

针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

2.如权利要求1所述的方法，其特征在于，所述指标数据包括以下三种类型中的至少两种：

时间数据；

用户数据；

网络数据。

3.如权利要求2所述的方法，其特征在于，所述时间数据包括：白屏时间、首屏时间、传输控制协议时间、文档对象模型加载时间、域名系统时间与超文本传输时间中的一种或多种数据组合，所述用户数据包括：用户操作数据，所述网络数据包括：网页加载时间。

4.如权利要求1所述的方法，其特征在于，所述按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，包括：

判断指标数据包含的每个数据值是否超过预设错误阈值；

将超过预设错误阈值的数据值确定为指标数据中的错误数据量。

5.如权利要求1所述的方法，其特征在于，所述基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，包括：

根据所述指标数据的总数据量以及所述错误数据量，得到所述指标数据的预警百分比；

判断所述预警百分比是否大于所述指标数据对应的预设警告百分比；

若是，则判定所述指标数据为不合格的指标数据。

6.如权利要求5所述的方法，其特征在于，所述预设警告百分比在10%-30%之间。

7.如权利要求1所述的方法，其特征在于，还包括：

在用户操作目标网站的过程中，若检测到所述用户处于未联网状态，则将采集到的性能数据进行缓存；

在检测到所述用户的网络恢复时，对缓存的性能数据执行所述针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格的步骤。

8.一种前端性能监控装置，其特征在于，包括：

获取模块，用于获取用户操作目标网站的过程中，网站前端的性能数据，所述性能数据包括多个不同类型的指标数据；

筛查模块，用于针对每种类型的指标数据，按照预设错误阈值进行筛查，得到该类指标数据中的错误数据量，基于所述错误数据量以及预设预警条件，判定该类指标数据是否合格，其中，每种类型的指标数据各自对应有所述预设错误阈值以及所述预设预警条件；

展示模块，用于针对判定为不合格的指标数据，展示该指标数据对应的预设优化报告，所述预设优化报告用于提示不合格指标数据的优化方向。

9.一种电子设备，其特征在于，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1-7中任一项所述方法的步骤。

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

Images