页面异常检测方法、介质、装置和计算设备

技术领域

本公开的实施方式涉及计算机技术领域，更具体地，本公开的实施方式涉及一种页面异常检测方法、介质、装置和计算设备。

背景技术

本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

随着科技的不断迭代拓展，很多业务场景越来越复杂，针对不同业务场景的前端页面的规模增长迅速。各种形态的前端页面开始渗透到产品生态的方方面面，其中，前端页面包括超文本标记语言5(Hyper Text Markup Language 5，H5)页面。为保证前端页面的可用性与稳定性，通常需要对前端页面进行异常检测，以确保及时发现前端页面的异常，减少对用户的影响。

目前，对于不同业务场景下的前端页面，通常通过每个前端页面对应的异常检测脚本进行异常检测。其中，每个前端页面对应的异常检测脚本是通过人工的方式按照前端页面的预设设计特征来进行定制的，可复用性较低。

发明内容

本公开提供一种页面异常检测方法、介质、装置和计算设备，以解决目前每个前端页面对应的异常检测脚本是通过人工的方式按照前端页面的预设设计特征来进行定制的，可复用性较低的问题。

在本公开实施方式的第一方面中，提供了一种页面异常检测方法，包括：

获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；

提取目标数据对应的目标特征向量；

将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。

在一种可能的实施方式中，目标数据包括待检测页面的html文本内容，提取目标数据对应的目标特征向量，包括：从html文本内容中提取第一特征，第一特征包括DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数中的至少一种；对第一特征进行组合处理，得到html文本内容对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的稳定态下的页面截屏图像，提取目标数据对应的目标特征向量，包括：从稳定态下的页面截屏图像中提取第二特征，第二特征包括RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值中的至少一种；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的请求耗时分布，提取目标数据对应的目标特征向量，包括：从请求耗时分布中提取第三特征，第三特征包括JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布中的至少一种；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量。

在一种可能的实施方式中，JS资源请求耗时分布包括JS资源平均请求时长、JS资源请求时长方差和JS资源最长请求时长中的至少一种；CSS资源请求耗时分布包括CSS资源平均请求时长、CSS资源请求时长方差和CSS资源最长请求时长中的至少一种；图像资源请求耗时分布包括图像资源平均请求时长、图像资源请求时长方差和图像资源最长请求时长中的至少一种；数据请求耗时分布包括数据平均请求时长、数据请求时长方差和数据最长请求时长中的至少一种。

在一种可能的实施方式中，目标数据包括待检测页面的预设级别的日志，提取目标数据对应的目标特征向量，包括：从预设级别的日志中提取第四特征，第四特征包括预设级别的日志数量，预设级别包括第一预设级别和第二预设级别；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量。

在一种可能的实施方式中，提取目标数据对应的目标特征向量，包括：对目标数据进行归一化处理，得到归一化处理后的目标数据；提取归一化处理后的目标数据对应的目标特征向量。

在一种可能的实施方式中，异常检测模型是通过以下方式训练获得的：获取训练样本，训练样本包括显示正常的页面和显示异常的页面；获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取训练数据对应的训练特征向量；将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果；根据异常检测结果和训练特征向量到超平面的最短距离的距离和，调整异常检测模型的参数，得到训练完成的异常检测模型，超平面是根据异常检测模型的参数确定的。

在一种可能的实施方式中，得到待检测页面对应的异常检测结果之后，该页面异常检测方法还包括：响应于异常检测结果为异常，进行预警处理。

第二方面，本公开实施例提供一种页面异常检测装置，包括：

获取模块，用于获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；

提取模块，用于提取目标数据对应的目标特征向量；

处理模块，用于将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。

在一种可能的实施方式中，目标数据包括待检测页面的html文本内容，提取模块具体用于：从html文本内容中提取第一特征，第一特征包括DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数中的至少一种；对第一特征进行组合处理，得到html文本内容对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的稳定态下的页面截屏图像，提取模块具体用于：从稳定态下的页面截屏图像中提取第二特征，第二特征包括RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值中的至少一种；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的请求耗时分布，提取模块具体用于：从请求耗时分布中提取第三特征，第三特征包括JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布中的至少一种；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量。

在一种可能的实施方式中，JS资源请求耗时分布包括JS资源平均请求时长、JS资源请求时长方差和JS资源最长请求时长中的至少一种；CSS资源请求耗时分布包括CSS资源平均请求时长、CSS资源请求时长方差和CSS资源最长请求时长中的至少一种；图像资源请求耗时分布包括图像资源平均请求时长、图像资源请求时长方差和图像资源最长请求时长中的至少一种；数据请求耗时分布包括数据平均请求时长、数据请求时长方差和数据最长请求时长中的至少一种。

在一种可能的实施方式中，目标数据包括待检测页面的预设级别的日志，提取模块具体用于：从预设级别的日志中提取第四特征，第四特征包括预设级别的日志数量，预设级别包括第一预设级别和第二预设级别；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量。

在一种可能的实施方式中，提取模块具体用于：对目标数据进行归一化处理，得到归一化处理后的目标数据；提取归一化处理后的目标数据对应的目标特征向量。

在一种可能的实施方式中，页面异常检测装置还包括训练模块，用于通过以下方式训练获得异常检测模型：获取训练样本，训练样本包括显示正常的页面和显示异常的页面；获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取训练数据对应的训练特征向量；将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果；根据异常检测结果和训练特征向量到超平面的最短距离的距离和，调整异常检测模型的参数，得到训练完成的异常检测模型，超平面是根据异常检测模型的参数确定的。

在一种可能的实施方式中，处理模块还用于：得到待检测页面对应的异常检测结果之后，响应于异常检测结果为异常，进行预警处理。

第三方面，本公开实施例提供一种计算设备，包括：处理器，以及与处理器通信连接的存储器；

存储器存储计算机执行指令；

处理器执行存储器存储的计算机执行指令，以实现如本公开第一方面所述的页面异常检测方法。

第四方面，本公开实施例提供一种存储介质，存储介质中存储有计算机程序指令，计算机程序指令被执行时，实现如本公开第一方面所述的页面异常检测方法。

第五方面，本公开实施例提供一种计算机程序产品，包括计算机程序，计算机程序被处理器执行时实现如本公开第一方面所述的页面异常检测方法。

本公开实施例提供的页面异常检测方法、介质、装置和计算设备，通过获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取目标数据对应的目标特征向量；将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。由于本公开提取了待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志对应的四类目标特征向量，这四类目标特征向量涵盖了日常巡检判断条件的范围，能够通用地作用在待检测页面是否正常展示的判断上，降低遗漏关键特征的风险；将目标特征向量输入异常检测模型进行异常检测处理，能够更加准确地得到待检测页面对应的异常检测结果。本公开不需要人工定制化每个前端页面对应的异常检测脚本，因此，可复用性高，能够大大降低维护成本，更好地用于对待检测页面进行异常检测。

附图说明

通过参考附图阅读下文的详细描述，本公开示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本公开的若干实施方式，其中：

图1为相关技术的前端页面巡检的流程图；

图2为本公开实施例提供的一种应用场景示意图；

图3为本公开一实施例提供的页面异常检测方法的流程图；

图4为本公开另一实施例提供的页面异常检测方法的流程图；

图5为本公开一实施例提供的提取H5页面的目标数据对应的目标特征向量的示意图；

图6为本公开一实施例提供的对前端页面进行异常检测的示意图；

图7为本公开一实施例提供的异常检测模型训练方法的流程图；

图8为本公开一实施例提供的对异常检测模型进行训练的示意图；

图9为本公开一实施例提供的页面异常检测装置的结构示意图；

图10为本公开一实施例提供的存储介质示意图；

图11为本公开一实施例提供的计算设备的结构示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本公开的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本公开，而并非以任何方式限制本公开的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本公开的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本公开的实施方式，提出了一种页面异常检测方法、介质、装置和计算设备。

在本文中，需要理解的是，所涉及的术语：

质量保证(Quality Assurance，QA)：即软件测试工程师；

超文本标记语言(hyper text markup language，html)：是一种标记语言；它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的互联网资源连接为一个逻辑整体；

控制台(Console)：浏览器的JavaScript(即JS，是一种具有函数优先的轻量级、解释型或即时编译型的编程语言)控制台；

无头浏览器(Puppeteer)：一种无界面浏览器，具有普通版浏览器的完备功能，并且可以运行在无界面的服务端；

H5：是构建万维网(World Wide Web，Web)内容的一种语言描述方式，是互联网的新一代标准，是构建以及呈现互联网内容的一种语言方式；

统一资源定位系统(Uniform Resource Locator，URL)：是因特网的万维网服务程序上用于指定信息位置的表示方法；

文档对象模型(Document Object Model，DOM)：是一种处理可扩展标志语言的标准编程接口；

红绿蓝(Red Green Blue，RGB)：RGB色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一；

层叠样式表(Cascading Style Sheets，CSS)：是一种用来表现HTML(标准通用标记语言的一个应用)或可扩展标记语言(Extensible Markup Language，XML))(标准通用标记语言的一个子集)等文件样式的计算机语言。

错误(Error)：Console控制台的日志级别，较为严重；

警告(Warning)：Console控制台的日志级别，相对严重；

支持向量机(Support Vector Machine，SVM)：是一类按监督学习方式对数据进行二元分类的广义线性分类器。

此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

另外，本公开所涉及的数据可以为经用户授权或者经过各方充分授权的数据，对数据的采集、传播、使用等，均符合国家相关法律法规要求，本公开实施方式/实施例可以互相组合。

下面参考本公开的若干代表性实施方式，详细阐释本公开的原理和精神。

发明概述

本发明人发现，随着针对不同业务场景的前端页面的迅速发展，对前端页面巡检是验证前端页面有效性的一种常规测试手段。其主要用于监控前端页面在用户端展示的状态。巡检的重点是要检测前端页面是否存在异常报错，以及前端页面的展示渲染是否正常，前端页面巡检是日常质量保障工作中必不可少的一环。QA人员在日常的前端页面测试过程中，往往需要面向特定的前端页面进行必要前端页面结构分析、前端页面中关键元素值检测以及浏览器异常日志捞取等，然后设计异常断言规则，从而检测线上前端页面运行是否正常。目前不同业务场景下的前端页面巡检都需要按照指定的页面设计特征去定义具体的巡检脚本，同时根据实际的业务特性来配置具体的断言内容，从而生成对应的前端页面巡检任务。

示例性地，图1为相关技术的前端页面巡检的流程图，如图1所示，相关技术中，在进行前端页面巡检时，包括以下步骤：

S101、首先通过页面结构定义设计文档，根据设计文档定义待巡检前端页面；

S102、根据实际的业务场景特性来设计并编写巡检脚本；

S103、构建具体的巡检用例；

S104、通过调试浏览器来触发执行对应的巡检用例；

S105、最后通过断言等形式来自动化分析判断巡检用例的结果。

但是，该相关技术存在以下问题：(1)目前前端巡检流程中，需要根据待巡检前端页面的结构布局与元素特点，定制化巡检脚本；在版本迭代中，每新增一个前端页面，便要新增一个前端页面巡检脚本，可复用性较低，需耗费较多人力成本；(2)前端页面巡检脚本的断言规则很难覆盖全部页面特征，人工设置容易发生遗漏，导致关键特征断言丢失，而影响线上巡检效果；(3)若不断地在断言规则中增加判断条件，追求断言条件的数量，则对于前端页面巡检脚本后期的维护成本也会急剧增加，不利于长期维护；一旦前端页面结构发生变更，还需额外投入人力成本，更新断言规则。

基于上述问题，本公开提供一种页面异常检测方法、介质、装置和计算设备，通过采集待检测页面对应的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志的各项特征，使用训练好的异常检测模型进行异常检测处理，能够准确地得到待检测页面对应的异常检测结果，其中，异常检测模型是使用自建的前端页面数据集进行训练得到的高准确性的分类网络；在异常检测结果为异常时，结合自动化异常反馈机制进行能够预警，实现高质量的前端页面巡检。本公开不需要人工定制化每个前端页面对应的异常检测脚本，因此，可复用性高、维护成本低、实时性强，能够更好地检测前端页面的运行状态。

应用场景总览

首先参考图2对本公开提供的方案的应用场景进行示例说明。图2为本公开实施例提供的一种应用场景示意图，如图2所示，本应用场景中，该应用场景可以包括：服务器集群21和终端22。其中，服务器集群21包括多个服务器211和存储器212，终端22可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能语音交互设备、智能家电等。服务器211获取终端22显示的H5页面对应的目标数据，该目标数据包括html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志。服务器211基于该目标数据，对H5页面进行异常检测处理，得到该H5页面对应的异常检测结果。其中，服务器211对该H5页面进行异常检测处理过程中，可以从存储器212中获取数据，并可以将产生的数据存储在存储器212中。此外，服务器211和终端22可以通过无线网络或有线网络进行通信。

需要说明的是，图2仅是本公开实施例提供的一种应用场景的示意图，本公开实施例不对图2中包括的设备进行限定，也不对图2中设备之间的位置关系进行限定。

示例性方法

下面结合图2的应用场景，参考图3来描述根据本公开示例性实施方式的用于页面异常检测方法。需要注意的是，上述应用场景仅是为了便于理解本公开的精神和原理而示出，本公开的实施方式在此方面不受任何限制。相反，本公开的实施方式可以应用于适用的任何场景。

首先，通过具体实施例介绍页面异常检测方法。

图3为本公开一实施例提供的页面异常检测方法的流程图。本公开实施例的方法可以应用于计算设备中，该计算设备可以是服务器或服务器集群等。如图3所示，本公开实施例的方法包括：

S301、获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种。

本公开实施例中，待检测页面比如为H5页面，预设级别比如为Error级别和Warning级别。示例性地，在常规的H5页面自动访问过程中，可以通过监听执行过程中的一些异常反馈，来判断H5页面的访问是否正常，但是这一过程中存在如下问题：(1)H5页面的异常判断条件难以通用化；(2)目前相关技术的判断条件，可能会因为判断条件过于生硬，而导致误检或者漏检；(3)需要为每个H5页面定制化检测脚本，维护成本较高，很难大范围推广。因此，本公开实施例中，针对上述问题(1)，在常规网络请求数据和Console日志信息的基础上，进一步提取了H5页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志这四大类的特征数据，这四大类特征数据体现了从四类不同角度去观测得到的评判指标，基本涵盖了日常巡检判断条件的范围，且均可以在H5页面加载过程中同时获取；然后对各类特征数据进行数据归一化，使得各类特征数据能够通用地作用在前端页面是否正常展示的判断上，以便基于不同条件，可以更全面地覆盖各个特征，使得判断条件体系更加通用化。其中，H5页面的html文本内容包含了H5页面元素组成；H5页面的稳定态下的页面截屏图像包含了H5页面在稳定态下所展示图像的截图；H5页面的请求耗时分布包含H5页面从开始加载到稳定展示过程中所有的网络请求耗时分布；H5页面的Console日志信息包含了浏览器异常日志收集。针对上述问题(2)和问题(3)，通过使用异常检测模型来进行解决，具体可参加后续实施例。

该步骤中，在获取待检测页面对应的目标数据时，示例性地，获取待检测页面的URL，使用浏览器调试工具(比如Puppeteer)访问待检测页面的URL后，监听资源和数据相关网络请求信息，同时监听Console日志，基于这些数据，来获取待检测页面对应的目标数据。

S302、提取目标数据对应的目标特征向量。

该步骤中，在获取到待检测页面对应的目标数据后，可以根据目标数据包括的不同内容，采用相应的方法来提取目标数据对应的目标特征向量。可以理解，若目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志，则可以提取待检测页面的html文本内容对应的目标特征向量、稳定态下的页面截屏图像对应的目标特征向量、请求耗时分布对应的目标特征向量以及预设级别的日志对应的目标特征向量。对于具体如何根据目标数据包括的内容来提取目标数据对应的目标特征向量，可参考后续实施例，此处不再赘述。

进一步地，可选的，提取目标数据对应的目标特征向量，可以包括：对目标数据进行归一化处理，得到归一化处理后的目标数据；提取归一化处理后的目标数据对应的目标特征向量。

示例性地，可以选用线性函数归一化方式(Min-Max Scaling)，对目标数据进行归一化处理，使得目标数据能够映射至[0,100]区间范围内，实现对目标数据的等比缩放。

S303、将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。

该步骤中，在获得了目标数据对应的目标特征向量后，可以将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。可以理解，若提取到的目标特征向量包括待检测页面的html文本内容对应的目标特征向量、稳定态下的页面截屏图像对应的目标特征向量、请求耗时分布对应的目标特征向量以及预设级别的日志对应的目标特征向量，则可以将这4个目标特征向量一起输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。在得到待检测页面对应的异常检测结果后，可以根据异常检测结果进行相应的处理，比如异常检测结果为异常，则可以进行预警处理，以及时处理异常，进而能够保证待检测页面的稳定运行。

本公开实施例提供的页面异常检测方法，通过获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取目标数据对应的目标特征向量；将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。由于本公开实施例提取了待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志对应的四类目标特征向量，这四类目标特征向量涵盖了日常巡检判断条件的范围，能够通用地作用在待检测页面是否正常展示的判断上，降低遗漏关键特征的风险；将目标特征向量输入异常检测模型进行异常检测处理，能够更加准确地得到待检测页面对应的异常检测结果。本公开实施例不需要人工定制化每个前端页面对应的异常检测脚本，因此，可复用性高，能够大大降低维护成本，更好地用于对待检测页面进行异常检测。

图4为本公开另一实施例提供的页面异常检测方法的流程图。在上述实施例的基础上，本公开实施例对页面异常检测方法进行进一步说明。如图4所示，本公开实施例的方法可以包括：

S401、获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种。

该步骤的具体描述可以参见图3所示实施例中S301的相关描述，此处不再赘述。

本公开实施例中，图3中S302步骤可以进一步包括如下的S402至S405四个步骤：

S402、目标数据包括待检测页面的html文本内容，从html文本内容中提取第一特征；对第一特征进行组合处理，得到html文本内容对应的目标特征向量。

其中，第一特征包括DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数中的至少一种。

示例性地，可以基于待检测页面的html文本内容，采用第一特征提取算法从html文本内容中提取第一特征。例如，可以根据待检测页面的DOM树的节点的总数量，来得到DOM树节点总数；可以根据DOM树的每个节点的深度，来得到DOM树深度方差特征、DOM树最大树深度、DOM树平均深度以及DOM树深度的中位数；根据html文本内容包含的字符，来得到html页面长度；可以根据html文本内容包含的图像信息，来得到图像资源数。

在获得了第一特征包括的DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数后，可以将每个第一特征按照预设顺序进行拼接(即进行组合处理)，得到html文本内容对应的目标特征向量。

S403、目标数据包括待检测页面的稳定态下的页面截屏图像，从稳定态下的页面截屏图像中提取第二特征；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量。

其中，第二特征包括RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值中的至少一种。

示例性地，可以基于待检测页面的预设时长(比如4秒)稳定态下的页面截屏图像，采用第二特征提取算法从稳定态下的页面截屏图像中提取第二特征。其中，对于RGB颜色平均亮度值，可以根据RGB三通道像素值，通过如下公式一得到页面截屏图像中每个像素点的亮度值：

其中，k表示亮度转换系数，

在得到页面截屏图像中每个像素点的亮度值后，可以得到页面截屏图像的RGB颜色平均亮度值(比如用AvgL表示)为：

可以通过如下公式二得到页面截屏图像的RGB颜色亮度方差：

其中，

对于页面截屏图像的纯色像素占比值，可以通过如下方式来得到：首先将页面截屏图像归一化至统一尺寸，然后对页面截屏图像进行灰度化处理，得到一张灰度图，再计算0-255范围内，页面截屏图像中每个像素值的像素点个数，最后求出像素点最多的像素值，并计算出最大纯色像素占比。

在获得了第二特征包括的RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值后，可以将每个第二特征按照预设顺序进行拼接(即进行组合处理)，得到稳定态下的页面截屏图像对应的目标特征向量。

S404、目标数据包括待检测页面的请求耗时分布，从请求耗时分布中提取第三特征；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量。

其中，第三特征包括JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布中的至少一种。

示例性地，在使用浏览器调试工具监听到资源和数据相关网络请求信息后，可以通过各个请求的耗时数据，进一步分析(即采用第三特征提取算法)得到JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布。

进一步地，可选的，JS资源请求耗时分布包括JS资源平均请求时长、JS资源请求时长方差和JS资源最长请求时长中的至少一种；CSS资源请求耗时分布包括CSS资源平均请求时长、CSS资源请求时长方差和CSS资源最长请求时长中的至少一种；图像资源请求耗时分布包括图像资源平均请求时长、图像资源请求时长方差和图像资源最长请求时长中的至少一种；数据请求耗时分布包括数据平均请求时长、数据请求时长方差和数据最长请求时长中的至少一种。

比如可以通过浏览器调试工具来得到每个第三特征，或者，可以通过记录每个请求的请求时刻和响应时刻，计算请求时刻和响应时刻的差值来得到待检测页面的请求耗时分布。

在获得了第三特征包括的JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布后，可以将每个第三特征按照预设顺序进行拼接(即进行组合处理)，得到请求耗时分布对应的目标特征向量。

S405、目标数据包括待检测页面的预设级别的日志，从预设级别的日志中提取第四特征；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量。

其中，第四特征包括预设级别的日志数量，预设级别包括第一预设级别和第二预设级别。

示例性地，第一预设级别比如为Error级别和第二预设级别比如为Warning级别。在使用浏览器调试工具监听到Console日志后，可以采用第四特征提取算法从预设级别的日志中提取第四特征，即得到第一预设级别的日志数量和第二预设级别的日志数量。将第一预设级别的日志数量和第二预设级别的日志数量按照预设顺序进行拼接(即进行组合处理)，得到预设级别的日志对应的目标特征向量。

S406、将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。

该步骤的具体描述可以参见图3所示实施例中S303的相关描述，此处不再赘述。

S407、响应于异常检测结果为异常，进行预警处理。

该步骤中，响应于异常检测结果为异常，可以采用预设预警方式进行预警处理，本公开不对预设预警方式进行限定。可以理解，在异常检测结果为异常，进行预警处理，能够及时对异常的待检测页面进行处理，进而保证带检测页面的稳定运行。

本公开实施例提供的页面异常检测方法，通过获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；从html文本内容中提取第一特征；对第一特征进行组合处理，得到html文本内容对应的目标特征向量；从稳定态下的页面截屏图像中提取第二特征；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量；从请求耗时分布中提取第三特征；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量；从预设级别的日志中提取第四特征；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量；将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果；响应于异常检测结果为异常，进行预警处理。由于本公开实施例提取了待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志对应的四类目标特征向量，这四类目标特征向量涵盖了日常巡检判断条件的范围，能够通用地作用在待检测页面是否正常展示的判断上，降低遗漏关键特征的风险；将目标特征向量输入异常检测模型进行异常检测处理，能够更加准确地得到待检测页面对应的异常检测结果；响应于异常检测结果为异常，进行预警处理，能够及时对异常的待检测页面进行处理，进而保证带检测页面的稳定运行。本公开实施例不需要人工定制化每个前端页面对应的异常检测脚本，因此，可复用性高，能够大大降低维护成本，更好地用于对待检测页面进行异常检测。

在上述实施例的基础上，图5为本公开一实施例提供的提取H5页面的目标数据对应的目标特征向量的示意图，如图5所示，将H5页面的URL输入浏览器调试工具后，通过浏览器调试工具可以监听资源和数据相关网络请求信息，同时监听Console日志。基于这些数据，可以获取H5页面对应的目标数据，目标数据包括H5页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志。可以从html文本内容中提取第一特征，第一特征包括DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数；对第一特征进行组合处理，得到html文本内容对应的目标特征向量。可以从稳定态下的页面截屏图像中提取第二特征，第二特征包括RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量。可以从请求耗时分布中提取第三特征，第三特征包括JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量。可以从预设级别(包括Error级别和Warning级别)的日志中提取第四特征，即Error级别的日志数量和Warning级别的日志数量；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量。

在上述实施例的基础上，图6为本公开一实施例提供的对前端页面进行异常检测的示意图，如图6所示，根据输入的待检测前端页面的URL，利用浏览器调试工具获取待检测前端页面对应的目标数据，目标数据包括待检测前端页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志。分别提取待检测前端页面的html文本内容对应的目标特征向量、稳定态下的页面截屏图像对应的目标特征向量、请求耗时分布对应的目标特征向量以及预设级别的日志对应的目标特征向量。其中，待检测前端页面的html文本内容对应的训练特征向量即为目标特征簇一，稳定态下的页面截屏图像对应的训练特征向量即为目标特征簇二，请求耗时分布对应的训练特征向量即为目标特征簇三，预设级别的日志对应的训练特征向量即为目标特征簇四。将目标特征簇一、目标特征簇二、目标特征簇三和目标特征簇四一起输入训练好的异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果(即正常或异常)。根据异常检测结果进行进一步的反馈和后续处理流程。

图7为本公开一实施例提供的异常检测模型训练方法的流程图。如图7所示，本公开实施例的方法可以包括：

S701、获取训练样本，训练样本包括显示正常的页面和显示异常的页面。

示例性地，可以基于业务数据，自建前端页面巡检数据集，人为构造(比如人工删除DOM树的关键元素、人工模拟网络超时等异常场景)各种类型导致的白屏异常，得到完备的自建训练样本。训练样本包括显示正常的页面和显示异常的页面。

S702、获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种。

该步骤中，获取的训练样本对应的训练数据的方式，可以参考上述实施例中S301的相关描述，此处不再赘述。

S703、提取训练数据对应的训练特征向量。

该步骤中，提取训练数据对应的训练特征向量的方式，可以参考上述实施例中S302的相关描述，此处不再赘述。

S704、将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果。

S705、根据异常检测结果和训练特征向量到超平面的最短距离的距离和，调整异常检测模型的参数，得到训练完成的异常检测模型。

其中，超平面是根据异常检测模型的参数确定的。

示例性地，异常检测模型为SVM分类模型，具体地，定义SVM分类模型为如下公式三：

其中，f(x)表示SVM分类模型的输出，当输入的训练样本属于正样本(即显示正常的页面)时，f(x)≥0，当输入的训练样本属于负样本(即显示异常的页面)时，f(x)＜0；W表示SVM分类模型超平面的权重系数；X表示输入SVM分类模型的训练特征向量，x

假设有n个训练特征向量，对于每个训练特征向量，可以通过如下公式四来确定SVM分类模型的输出是否正确：

y

其中，i的取值范围为1至n；y

训练样本与最佳超平面的最近距离为1/‖W‖，W和b的优化条件应是使两类训练样本(即显示正常的页面和显示异常的页面)到超平面最小的距离之和2/‖W‖为最大。

在将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果后，可以根据异常检测结果和训练特征向量到超平面的最短距离的距离和，进行误差反传，来调整异常检测模型的参数，得到训练完成的异常检测模型。其中，可以通过使用核技巧和软间隔最大化方法，基于拉格朗日乘子法构造计算函数，来表示所有训练特征向量到超平面的最短距离的距离和，进而通过序列最小优化算法计算得到该距离和的最大值。

通过引入异常检测模型，可以解决上述实施例中提到的两个问题，即能够解决目前相关技术的判断条件，可能会因为判断条件过于生硬，而导致误检或者漏检的问题；以及能够解决需要为每个H5页面定制化检测脚本，维护成本较高，很难大范围推广的问题。

本公开实施例提供的异常检测模型训练方法，获取训练样本，训练样本包括显示正常的页面和显示异常的页面；获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取训练数据对应的训练特征向量；将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果；根据异常检测结果和训练特征向量到超平面的最短距离的距离和，调整异常检测模型的参数，得到训练完成的异常检测模型。由于本公开实施例中训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种，能够结合这四类训练数据对应的训练特征向量对异常检测模型进行训练，因此，能够大幅降低传统检测规则中生硬地因为某几项异常条件而导致误判。能够更加精准地检测异常页面，降低误报和漏报。同时，由于训练好的异常检测模型，只需要在初始阶段训练一次模型即可，在得到训练好的异常检测模型后，不需要针对每个待检测页面去定制化检测规则，能够大幅降低维护成本，更易于推广使用。

在图7所示实施例的基础上，图8为本公开一实施例提供的对异常检测模型进行训练的示意图，如图8所示，将基于业务数据自建的前端页面巡检数据集作为训练样本，获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种。提取训练数据对应的训练特征向量，其中，训练样本的html文本内容对应的训练特征向量即为训练特征簇一，稳定态下的页面截屏图像对应的训练特征向量即为训练特征簇二，请求耗时分布对应的训练特征向量即为训练特征簇三，预设级别的日志对应的训练特征向量即为训练特征簇四。将训练特征簇一、训练特征簇二、训练特征簇三、和训练特征簇四一起输入异常检测模型(即支持向量机)，得到异常检测模型输出的异常检测结果。根据异常检测结果和训练特征向量到超平面的最短距离的距离和，进行误差反传，调整异常检测模型的参数，得到训练完成的异常检测模型。

基于上述实施例，本公开至少能够解决常规页面巡检流程中对巡检脚本定制化设计成本高的问题、巡检脚本的断言规则对于关键特征易遗漏的问题以及页面迭代变更后巡检脚本需要高成本维护的问题。

示例性装置

在介绍了本公开示例性实施方式的介质之后，接下来，参考图9对本公开示例性实施方式的页面异常检测装置进行说明。本公开示例性实施方式的装置，可以实现前述页面异常检测方法实施例中的各个过程，并达到相同的功能和效果。

图9为本公开一实施例提供的页面异常检测装置的结构示意图，如图9所示，本公开实施例的页面异常检测装置900包括：获取模块901、提取模块902和处理模块903。其中：

获取模块901，用于获取待检测页面对应的目标数据，目标数据包括待检测页面的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种。

提取模块902，用于提取目标数据对应的目标特征向量。

处理模块903，用于将目标特征向量输入异常检测模型进行异常检测处理，得到待检测页面对应的异常检测结果。

在一种可能的实施方式中，目标数据包括待检测页面的html文本内容，提取模块902可以具体用于：从html文本内容中提取第一特征，第一特征包括DOM树节点总数、DOM树深度方差特征、html页面长度、DOM树最大树深度、图像资源数、解析异常节点数、DOM树平均深度以及DOM树深度的中位数中的至少一种；对第一特征进行组合处理，得到html文本内容对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的稳定态下的页面截屏图像，提取模块902可以具体用于：从稳定态下的页面截屏图像中提取第二特征，第二特征包括RGB颜色平均亮度值，RGB颜色亮度方差以及纯色像素占比值中的至少一种；对第二特征进行组合处理，得到稳定态下的页面截屏图像对应的目标特征向量。

在一种可能的实施方式中，目标数据包括待检测页面的请求耗时分布，提取模块902可以具体用于：从请求耗时分布中提取第三特征，第三特征包括JS资源请求耗时分布、CSS资源请求耗时分布、图像资源请求耗时分布以及数据请求耗时分布中的至少一种；对第三特征进行组合处理，得到请求耗时分布对应的目标特征向量。

在一种可能的实施方式中，JS资源请求耗时分布包括JS资源平均请求时长、JS资源请求时长方差和JS资源最长请求时长中的至少一种；CSS资源请求耗时分布包括CSS资源平均请求时长、CSS资源请求时长方差和CSS资源最长请求时长中的至少一种；图像资源请求耗时分布包括图像资源平均请求时长、图像资源请求时长方差和图像资源最长请求时长中的至少一种；数据请求耗时分布包括数据平均请求时长、数据请求时长方差和数据最长请求时长中的至少一种。

在一种可能的实施方式中，目标数据包括待检测页面的预设级别的日志，提取模块902可以具体用于：从预设级别的日志中提取第四特征，第四特征包括预设级别的日志数量，预设级别包括第一预设级别和第二预设级别；对第四特征进行组合处理，得到预设级别的日志对应的目标特征向量。

在一种可能的实施方式中，提取模块902可以具体用于：对目标数据进行归一化处理，得到归一化处理后的目标数据；提取归一化处理后的目标数据对应的目标特征向量。

在一种可能的实施方式中，页面异常检测装置还包括训练模块904，用于通过以下方式训练获得异常检测模型：获取训练样本，训练样本包括显示正常的页面和显示异常的页面；获取训练样本对应的训练数据，训练数据包括训练样本的html文本内容、稳定态下的页面截屏图像、请求耗时分布以及预设级别的日志中的至少两种；提取训练数据对应的训练特征向量；将训练特征向量输入异常检测模型，得到异常检测模型输出的异常检测结果；根据异常检测结果和训练特征向量到超平面的最短距离的距离和，调整异常检测模型的参数，得到训练完成的异常检测模型，超平面是根据异常检测模型的参数确定的。

在一种可能的实施方式中，处理模块903还可以用于：得到待检测页面对应的异常检测结果之后，响应于异常检测结果为异常，进行预警处理。

本公开实施例的装置，可以用于执行上述任一方法实施例中页面异常检测方法的方案，其实现原理和技术效果类似，此处不再赘述。

示例性介质

在介绍了本公开示例性实施方式的方法之后，接下来，参考图10对本公开示例性实施方式的存储介质进行说明。

图10为本公开一实施例提供的存储介质示意图。参考图10所示，存储介质1000中存储着根据本公开的实施方式的用于实现上述方法的程序产品，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的程序产品不限于此。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备。

示例性计算设备

在介绍了本公开示例性实施方式的方法、介质和装置之后，接下来，参考图11对本公开示例性实施方式的计算设备进行说明。

图11显示的计算设备1100仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

图11为本公开一实施例提供的计算设备的结构示意图，如图11所示，计算设备1100以通用计算设备的形式表现。计算设备1100的组件可以包括但不限于：上述至少一个处理单元1101、上述至少一个存储单元1102，连接不同系统组件(包括处理单元1101和存储单元1102)的总线1103。示例性地，处理单元1101可以具体为处理器，存储单元1102存储计算机执行指令，处理单元1101执行存储单元1102存储的计算机执行指令，以实现上述的页面异常检测方法。

总线1103包括数据总线、控制总线和地址总线。

存储单元1102可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)11021和/或高速缓存存储器11022，可以进一步包括非易失性存储器形式的可读介质，例如只读存储器(ROM)11023。

存储单元1102还可以包括具有一组(至少一个)程序模块11024的程序/实用工具11025，这样的程序模块11024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算设备1100也可以与一个或多个外部设备1104(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口1105进行。并且，计算设备1100还可以通过网络适配器1106与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图11所示，网络适配器1106通过总线1103与计算设备1100的其它模块通信。应当理解，尽管图中未示出，可以结合计算设备1100使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了页面异常检测装置的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

此外，尽管在附图中以特定顺序描述了本公开方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本公开的精神和原理，但是应该理解，本公开并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本公开旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。