CN108595304B - 网页监控方法及装置 - Google Patents

Abstract

本发明实施例公开了网页监控方法及装置，所述方法包括：获取目标网页的第一截屏图片，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式；获取所述目标网页的第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息；若所述差异信息满足预设条件，则确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。采用本发明实施例，可有效监控网页样式异常，并生成网页异常信息，以便及时对网页进行修复。

Description

网页监控方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及网页监控方法及装置。

背景技术

通过层叠样式表(Cascading Style Sheets，CSS)，网页可以遵循统一的文字格式，使得各个网页保持完整性和一致性。在不同的浏览器环境中，通过CSS进行网页样式还原会存在兼容性问题。传统的网页样式的异常监控方法可以通过Sentry(开源的实时错误报告工具)异常监控系统监听CSS加载异常的事件，即在网页中通过Sentry异常监控系统监听CSS加载异常的事件，当监听到存在CSS加载异常的事件时，将本次加载异常事件上报至服务器。

但是上述方法通过监听CSS加载异常的事件来监控网页样式异常，仅仅能对外部引入的CSS进行异常事件监听。当触发了异常加载事件后，开发人员仅能知道CSS加载异常导致网页显示异常，Sentry异常监控系统无法监控内联在网页中的CSS在网页中运行时网页样式的显示内容，另外，对于因兼容性问题导致的网页样式显示异常，服务器无法获取到具体异常信息，因此对于解决网页样式异常存在较大不便。

发明内容

本发明实施例所要解决的技术问题在于，提供网页监控方法及装置，可有效监控网页样式异常，并生成网页异常信息，以便及时对网页进行修复。

为了解决上述技术问题，第一方面，本发明实施例提供了一种网页监控方法，所述方法包括：

获取目标网页的第一截屏图片，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式；

获取所述目标网页的第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息；

若所述差异信息满足预设条件，则确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。

第二方面，本发明实施例提供了一种网页监控方法，所述方法包括：

向服务器发送针对发布之后的目标网页的访问请求；

在接收到服务器响应所述访问请求而返回的所述发布之后的目标网页时，显示所述发布之后的目标网页的第二网页样式；

对所述第二网页样式进行截屏处理得到第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

将所述第二截屏图片发送给所述服务器，以使所述服务器对第一截屏图片和所述第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息；其中，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式。

第三方面，本发明实施例提供了一种网页监控装置，所述装置包括用于执行第一方面所述的方法的单元。

第四方面，本发明实施例提供了一种网页监控装置，所述装置包括用于执行第二方面所述的方法的单元。

第五方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被服务器执行时使所述服务器执行如第一方面所述的方法。

第六方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被客户端执行时使所述客户端执行如第二方面所述的方法。

第七方面，本发明实施例提供了一种服务器，该服务器包括：处理器、存储器和通信接口，存储器中存储有程序指令，处理器调用存储器中存储的程序指令以用于执行如第一方面所述的方法。

第八方面，本发明实施例提供了一种客户端，该客户端包括：处理器、存储器、通信接口和显示屏幕，存储器中存储有程序指令，处理器调用存储器中存储的程序指令以用于执行如第二方面所述的方法。

实施本发明实施例，获取目标网页的第一截屏图片，第一截屏图片用于展示目标网页在发布之前的网页样式，获取目标网页的第二截屏图片，第二截屏图片用于展示目标网页在发布之后的第二网页样式，对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与第二网页样式之间的差异信息，若差异信息满足预设条件，则确定目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息，可有效监控网页样式异常，以便及时对网页进行修复。

附图说明

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

图1是本发明实施例中提供的一种网页监控系统的架构示意图；

图2是本发明实施例中提供的一种传统的网页监控方法的流程示意图；

图3是本发明实施例中提供的一种从服务器侧对网页异常进行监控的方法流程示意图；

图4是本发明另一实施例中提供的一种从服务器侧对网页异常进行监控的方法流程示意图；

图5A是本发明实施例中提供的一种第一截屏图片的界面示意图；

图5B是本发明实施例中提供的一种第二截屏图片的界面示意图；

图6是本发明实施例中提供的一种网页监控装置的结构示意图；

图7是本发明另一实施例中提供的一种网页监控装置的结构示意图；

图8是本发明实施例中提供的一种服务器的结构示意图；

图9是本发明实施例中提供的一种客户端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了更好的理解本申请实施例公开的一种网页监控方法及装置，下面首先对本申请实施的网页监控系统进行描述。请参见图1，图1是本申请实施例公开的一种网页监控系统的架构示意图，网页监控系统可以包括服务器101和至少一个客户端102。服务器101和客户端102建立通信连接以进行数据通信。

客户端102可以使用全球广域网(World Wide Web，web)前端技术显示网页，web前端技术可以包括：超级文本标记语言(Hyper Text Markup Language，HTML)、CSS以及javascript(一种解释性脚本语言，主要用于向HTML页面添加交互行为)。其中高效利用CSS还原设计稿一直是比较重要的环节，在使用相同HTML技术以及javascript技术的网页中添加不同CSS，则客户端展示的该网页是不相同的。示例性的，使用web前端技术的开发产品可以为企鹅医典H5页面、微信H5页面或者QQ空间等。其中，H5页面指的是使用HTML5开发的网页。需要说明的是，本申请实施例中用于展现网页的网页样式的样式表包含但不限定于CSS，例如CSS3等，具体不受本申请实施例的限制。

本申请实施例中，在目标网页发布之前，服务器可以获取目标网页的第一截屏图片。在目标网页发布之后，客户端可以向服务器发送针对发布之后的目标网页的访问请求，服务器可以响应该访问请求向客户端发送发布之后的目标网页。客户端显示发布之后的目标网页的第二网页样式，客户端对第二网页样式进行截屏处理得到第二截屏图片，客户端将第二截屏图片发送给服务器。服务器对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若差异信息满足预设条件，则服务器确定目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。

其中，第一截屏图片用于展示目标网页在发布之前的第一网页样式。第二截屏图片用于展示目标网页在发布之后的第二网页样式。

其中，预设比例阈值可以为预先设定的比例阈值，例如80％或者90％等。预设比例阈值可以为服务器在出厂时配置的，还可以是服务器响应用户的操作指令设置的，具体不受本申请实施例的限制。

其中，目标网页可以为使用web前端技术的开发产品中的任一网页，例如企鹅医典H5页面中的主页面，或者QQ空间的留言板页面等。

其中，网页异常信息可以包括以下至少一种：运行目标网页的浏览器环境信息，目标网页的访问地址信息，目标网页的访问时间信息，第一截屏图片，第二截屏图片，差异信息。浏览器环境信息可以包括：运行发布之后的目标网页的客户端的版本或者名称等。目标网页的访问地址信息可以为目标网页的统一资源定位符(Uniform Resource Locator，URL)。差异信息可以包括相似度、欧式距离或者汉明距离等。

其中，客户端可以为浏览器或者即时通讯应用等，即时通讯应用可以包括微信、QQ或者企鹅医典等。

以图2所示的传统的网页监控方法为例，客户端(例如浏览器)可以按照Sentry文档部署一套python(一种面向对象的解释型计算机程序设计语言)的运行环境，并安装postgresql数据库，在网页中引入ravenjs以监听CSS加载异常的事件，当ravenjs监听到有css加载异常的时候，会触发将本次异常信息上报至服务器的操作，开发人员可以通过服务器存储的异常上报记录，对异常信息进行分析，并处理样式异常。

在图2所示的网页监控方法中，开发人员需要掌握python技术和postgresql技术，并将Sentry部署至服务器中，成本较高。其次，通过监听外部css加载异常的事件来监控网页样式异常，仅仅能对外部引入的css文件进行异常事件监听，当触发了异常加载事件后，开发人员仅能知道样式表加载异常导致网页显示异常，因此，对于内联在HTML5网页中的css，该方案无法实现监控。另外，在不同的浏览器环境中，网页样式与浏览器可能存在兼容性问题，对于因兼容性问题导致的网页显示异常，服务器无法获取到具体的网页异常信息，因此对于开发人员处理样式异常存在较大不便。

而本申请实施例采用网页截屏和图像检测技术，通过对第一截屏图片和第二截屏图片进行分析对比，可以详细地获取到具体的网页异常信息，便于开发人员对异常的样式问题进行修复。其次，无论是外部css文件，还是内联的css，都能够准确的判断出网页存在样式显示异常，可以高效地监控客户端端的网页显示异常问题并及时修复，从而降低用户侧的投诉反馈频率。另外，本申请实施例无需部署Sentry，可降低成本。

请参见图3，图3是本发明实施例公开的一种从服务器侧对网页异常进行监控的方法流程示意图。如图3所示，该从服务器侧对网页异常进行监控的方法至少可以包括以下步骤：

S301，服务器获取目标网页的第一截屏图片。

服务器获取目标网页的第一截屏图片的实现方式可以有多种。在一种实现方式中，目标网页在发布之前，可以运行在该服务器中，服务器可以显示发布之前的目标网页的第一网页样式，则该服务器可以对第一网页样式进行截屏处理，得到第一截屏图片，服务器可以将第一截屏图片存储在服务器的数据库中。在另一种实现方式中，若目标网页在发布之前，运行在指定终端中，则该终端可以显示发布之前的目标网页的第一网页样式，并使用PhantomJS接口对第一网页样式进行截屏处理，得到第一截屏图片，该终端将第一截屏图片发送给服务器，服务器可以将第一截屏图片存储在服务器的数据库中。其中第一截屏图片用于展示目标网页在发布之前的第一网页样式。其中，PhantomJS是一个基于WebKit的服务器端JavaScript API，PhantomJS全面支持web而不需浏览器支持。

示例性的，企鹅医典H5页面的最新版本在发布之前，运行在指定终端中，指定终端可以对发布之前的企鹅医典H5页面的各个网页进行网页截屏，得到至少一个第一截屏图片，上述终端将各个第一截屏图片发送给服务器，服务器可以将各个第一截屏图片存储在服务器的数据库中。至少一个第一截屏图片可以包括企鹅医典H5页面的主页面和/或各级菜单对应的子页面等。可选的，服务器可以将第一截屏图片、目标网页的网页标识以及版本标识进行关联存储。

在一种实现方式中，服务器可以使用PhantomJS接口对第一网页样式进行截屏处理，得到第一截屏图片。

需要说明的是，本申请实施例中对第一网页样式进行截屏处理的方式包含但不局限于使用PhantomJS接口，例如使用画布(canvas)组件对第一网页样式进行截屏处理，又如使用JAVA技术对第一网页样式进行截屏处理，又如使用Python技术对第一网页样式进行截屏处理，又如使用浏览器插件对第一网页样式进行截屏处理，等等，具体不受本发明实施例的限制。

在一种实现方式中，服务器可以在数据库中获取预先存储的目标网页的第一截屏图片。举例来说，服务器可以将第一截屏图片、目标网页的网页标识以及版本标识进行关联存储，服务器接收到客户端发送的关于发布之后的目标网页的第二截屏图片时，可以获取第二截屏图片对应的网页标识以及版本标识，进而在数据库中获取与第二截屏图片对应的网页标识和版本标识匹配的第一截屏图片，例如第一截屏图片的网页标识和第二截屏图片对应的网页标识相同，第一截屏图片对应的版本标识指示目标网页为发布之前的目标版本的网页，第二截屏图片对应的版本标识指示目标网页为发布之后的目标版本的网页。

S302，客户端向服务器发送针对发布之后的目标网页的访问请求。

具体实现中，目标网页发布之后，用户可以向客户端提交针对发布之后的目标网页的请求信息，进而客户端可以响应请求信息向服务器发送针对发布之后的目标网页的访问请求。示例性的，企鹅医典H5页面发布之后，用户可以向客户端提交关于发布之后的企鹅医典H5页面的主页面的请求信息，客户端可以向服务器发送针对发布之后的企鹅医典H5页面的主页面的访问请求。

S303，服务器响应访问请求将发布之后的目标网页发送至客户端。

服务器接收到客户端发送的针对发布之后的目标网页的访问请求之后，可以响应该访问请求将发布之后的目标网页发送至客户端。示例性的，客户端向服务器发送针对发布之后的企鹅医典H5页面的主页面的访问请求之后，服务器可以将发布之后的企鹅医典H5页面的主页面发送至客户端。

S304，客户端显示发布之后的目标网页的第二网页样式。

客户端接收到服务器发送的发布之后的目标网页之后，可以在显示屏幕中显示发布之后的目标网页的第二网页样式。示例性的，服务器将发布之后的企鹅医典H5页面的主页面发送至客户端之后，客户端可以在显示屏幕中显示发布之后的企鹅医典H5页面的主页面的网页样式。

S305，客户端对第二网页样式进行截屏处理，得到第二截屏图片。

具体实现中，客户端显示发布之后的目标网页的第二网页样式之后，可以对第二网页样式进行截屏处理，得到第二截屏图片。示例性的，客户端显示企鹅医典H5页面的主页面的网页样式之后，可以对企鹅医典H5页面的主页面的网页样式进行截屏处理，得到第二截屏图片。

在一种实现方式中，客户端可以使用预置的截屏应用程序编程接口(ApplicationProgramming Interface，API)对第二网页样式进行截屏处理，得到第二截屏图片。

具体实现中，客户端可以预先配置截屏API，进而使用预置的截屏API对第二网页样式进行截屏处理，得到第二截屏图片。

在一种实现方式中，客户端可以使用canvas组件对第二网页样式进行截屏处理，得到第二截屏图片。

具体实现中，客户端可以使用HTML5中的canvas组件对第二网页样式进行截屏处理，得到第二截屏图片。

在一种实现方式中，客户端使用canvas组件对第二网页样式进行截屏处理，得到第二截屏图片的具体方式可以为：基于发布之后的目标网页的所有元素，确定各个文档对象模型(Document Object Model，DOM)，获取各个DOM的CSS属性，CSS属性包括内联CSS属性和外链CSS属性，将CSS属性转换为canvas属性，基于canvas属性，对第二网页样式进行截屏处理，得到第二截屏图片。

示例性的，当目标网页运行在自主研发的App或者浏览器等客户端中时，客户端可以使用内置的截屏API对第二网页样式进行截屏处理，得到第二截屏图片。当目标网页运行在外部APP或者浏览器(即除自主研发的App或者浏览器以外的客户端)环境下时，可以使用HTML5中的canvas元素，具体步骤如下：遍历页面的所有元素，提取DOM数，获取渲染之后的每个DOM节点的内联、外链CSS属性，将样式转换成canvas的属性，利用offset等属性辅助摆放位置，将节点对应到canvas，生成第二截屏图片。

S306，客户端将第二截屏图片发送给服务器。

在一种实现方式中，若第二截屏图片是客户端使用预置的截屏API对第二网页样式进行截屏处理得到的，则客户端将第二截屏图片发送给服务器的具体方式可以为：客户端对第二截屏图片进行封装，得到超文本传输协议(HyperTextTransfer Protocol，HTTP)请求信息，并将HTTP请求信息发送给服务器。其中，HTTP请求信息是指客户端通过HTTP协议发送给服务器的请求信息。

在一种实现方式中，若第二截屏图片是客户端使用canvas组件对第二网页样式进行截屏处理得到的，则客户端可以对第二截屏图片进行封装，得到异步请求信息，并将异步请求信息发送给服务器。示例性的，异步请求信息可以为JavaScript和XML(AsynchronousJavascript And XML，Ajax)请求信息。其中，Ajax指的是一种创建交互式网页应用的网页开发技术。

S307，服务器对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与第二网页样式之间的差异信息。

在一种实现方式中，服务器可以获取第一截屏图片的第一特征向量及第二截屏图片的第二特征向量，计算第一特征向量和第二特征向量之间的欧式距离，将欧式距离确定为第一网页样式与第二网页样式之间的差异信息。

在一种实现方式中，服务器可以获取第一截屏图片的第一图片指纹及第二截屏图片的第二图片指纹，计算第一图片指纹和第二图片指纹之间的汉明距离，将汉明距离确定为第一网页样式与第二网页样式之间的差异信息。

在一种实现方式中，服务器可以采用相似度算法计算第一截屏图片与第二截屏图片之间的相似度，将相似度确定为第一网页样式与第二网页样式之间的差异信息。其中，相似度算法可以包括余弦相似度算法、基于皮尔森相关系数的相似度算法、对数似然相似度算法或者开源工具优图检测算法等。

S308，若差异信息满足预设条件，则服务器确定目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，差异信息为欧式距离，若欧式距离大于第一预设距离阈值，则服务器可以确定目标网页在发布之后的第二网页样式存在异常。若欧式距离小于等于第一预设距离，则服务器可以确定发布之后的目标网页的第二网页样式正常，结束本次流程。第一预设距离阈值可以为预先设定的距离阈值，用户可根据不同场景对第一预设距离阈值进行修改，具体不受本发明实施例的限定。

在一种实现方式中，差异信息为汉明距离，若汉明距离大于第二预设距离阈值，则服务器可以确定目标网页在发布之后的第二网页样式存在异常。若汉明距离小于等于第二预设距离，则服务器可以确定发布之后的目标网页的第二网页样式正常，结束本次流程。第二预设距离阈值可以为预先设定的距离阈值，用户可根据不同场景对第二预设距离阈值进行修改，具体不受本发明实施例的限定。

在一种实现方式中，差异信息为相似度，若相似度小于预设比例阈值，则服务器可以确定目标网页在发布之后的第二网页样式存在异常。若相似度大于等于预设比例阈值，则服务器可以确定发布之后的目标网页的第二网页样式正常，结束本次流程。预设比例阈值可以为预先设定的比例阈值，例如80％或者90％等，用户可根据不同场景对预设比例阈值进行修改，具体不受本发明实施例的限定。

S309，服务器生成网页异常信息。

具体实现中，服务器确定目标网页在发布之后的第二网页样式存在异常之后，可以生成网页异常信息。其中，网页异常信息可以包括以下至少一种：运行目标网页的浏览器环境信息，目标网页的访问地址信息，目标网页的访问时间信息，第一截屏图片，第二截屏图片，差异信息。

在一种实现方式中，服务器生成网页异常信息之后，可以将网页异常信息存储至服务器的数据库中。

在一种实现方式中，服务器生成网页异常信息之后，可以输出提示信息。其中，提示信息携带网页异常信息，提示信息用于提示对网页异常信息进行分析处理。

在一种实现方式中，服务器存储网页异常信息之后，当所存储的网页异常信息的数量达到预设数量阈值时，可以输出提示信息。

具体实现中，当生成一次或多次针对同一网页的网页异常信息时，服务器可以生成提示信息，并将提示信息发送到开发人员的通讯软件或者通讯设备中，例如将提示信息推送至开发人员的微信、手机短信、邮箱或者腾讯通(Real Time eXpert，RTX)中。开发人员获知提示信息后，可以登录到数据库中查看目标网页的网页异常信息，并分析产生该网页异常的具体原因，对问题做出解决并反馈。示例性的，提示信息可以包括目标网页的访问地址信息、目标网页的访问时间信息、第一截屏图片、第二截屏图片、或者相似度中的至少一种。

本发明实施例中，服务器获取目标网页的第一截屏图片。客户端向服务器发送针对发布之后的目标网页的访问请求，服务器响应该访问请求向客户端发送发布之后的目标网页。客户端显示发布之后的目标网页的第二网页样式，客户端对第二网页样式进行截屏处理得到第二截屏图片，客户端将第二截屏图片发送给服务器。服务器对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若差异信息满足预设条件，则服务器确定目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息，可有效监控网页样式异常，并生成网页异常信息，以便及时对网页进行修复。

以图4所示的从服务器侧对网页异常进行监控的方法流程示意图为例，开发人员可在发布网页之前自行通过工具生成正常的网页截屏文件，开发人员可以在网页中注入截屏代码，并发布注入截屏代码后的网页，浏览器端在运行发布之后的网页的过程中，若浏览器端为自主研发的APP或者浏览器等客户端，则使用预置的截屏API对发布之后的网页进行截屏，并通过浏览器端向服务器发送HTTP请求，HTTP请求携带截屏文件。若浏览器端为外部浏览器，则使用canvas组件对发布之后的网页进行截屏，并通过浏览器端向服务器发送Ajax请求，Ajax请求携带截屏文件。服务器获取针对发布之后的网页的截屏文件与针对发布之前的网页的截屏文件之间的相似度，当相似度小于基准值时，服务器上报本次异常记录，以便开发人员分析错误并解决；当相似度大于等于基准值时，服务器结束本次流程。

以图5A所示的第一截屏图片的界面示意图为例，服务器获取到的目标网页的第一截屏图片可以用于展示目标网页在发布之前的第一网页样式，通过图5A所示的第一截屏图片可确定在第一网页样式的第一区域显示第一信息，第一区域位于第一网页样式的第一位置，并在第二区域显示第二信息，第二区域位于第一网页样式的第二位置，等等。

以图5B所示的第二截屏图片的界面示意图为例，在目标网页发布之后，客户端可以向服务器发送针对发布之后的目标网页的访问请求，服务器可以响应该访问请求向客户端发送发布之后的目标网页。客户端显示发布之后的目标网页的第二网页样式，客户端对第二网页样式进行截屏处理得到第二截屏图片。第二截屏图片可以用于展示目标网页在发布之后的第二网页样式，通过图5B所示的第二截屏图片可确定在第二网页样式的第一区域显示第一信息，第一区域位于第二网页样式的第三位置，在第二区域显示第二信息，第二区域位于第二网页样式的第二位置，等等。

在一种实现方式中，服务器对图5A所示的第一截屏图片和图5B所示的第二截屏图片进行比对处理，确定第一区域在第二网页样式中的位置和第一区域在第一网页样式中的位置不相同，则服务器可以得到第一网页样式与第二网页样式之间的相似度，若相似度小于预设比例阈值，则服务器可以确定第二网页样式存在异常，并生成网页异常信息。

在一种实现方式中，服务器对图5A所示的第一截屏图片和图5B所示的第二截屏图片进行比对处理，确定第一区域在第二网页样式中的位置和第一区域在第一网页样式中的位置不相同，则服务器可以得到第一网页样式与第二网页样式之间的欧式距离，若欧式距离大于第一预设距离阈值，则服务器可以确定第二网页样式存在异常，并生成网页异常信息。

在一种实现方式中，服务器对图5A所示的第一截屏图片和图5B所示的第二截屏图片进行比对处理，确定第一区域在第二网页样式中的位置和第一区域在第一网页样式中的位置不相同，则服务器可以得到第一网页样式与第二网页样式之间的汉明距离，若汉明距离大于第二预设距离阈值，则服务器可以确定第二网页样式存在异常，并生成网页异常信息。

请参见图6，图6是本发明实施例中提供的一种网页监控装置的结构示意图，如图所示本发明实施例中的网页监控装置至少可以包括处理单元601和接收单元602，其中：

处理单元601，用于获取目标网页的第一截屏图片，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式；

接收单元602，用于获取所述目标网页的第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

处理单元601，还用于对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息；

处理单元601，还用于若所述差异信息满足预设条件，则确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。

在一种实现方式中，处理单元601对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体用于：

获取所述第一截屏图片的第一特征向量及所述第二截屏图片的第二特征向量；

计算所述第一特征向量和所述第二特征向量之间的欧式距离；

将所述欧式距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理单元601确定所述目标网页在发布之后的第二网页样式存在异常，具体用于：

若所述欧式距离大于第一预设距离阈值，则确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，所述处理单元601对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体用于：

获取所述第一截屏图片的第一图片指纹及所述第二截屏图片的第二图片指纹；

计算所述第一图片指纹和所述第二图片指纹之间的汉明距离；

将所述汉明距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理单元601确定所述目标网页在发布之后的第二网页样式存在异常，具体用于：

若所述汉明距离大于第二预设距离阈值，则确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，所述处理单元601对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体用于：

采用相似度算法计算所述第一截屏图片与所述第二截屏图片之间的相似度；

将所述相似度确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理单元601确定所述目标网页在发布之后的第二网页样式存在异常，具体用于：

若所述相似度小于预设比例阈值，则确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，处理单元601获取目标网页的第一截屏图片，具体用于：

在所述目标网页发布之前，显示所述发布之前的目标网页的第一网页样式；

对所述第一网页样式进行截屏处理，得到所述第一截屏图片。

在一种实现方式中，所述接收单元602获取所述目标网页的第二截屏图片，具体用于：

在所述目标网页发布之后，接收客户端发送的针对所述发布之后的目标网页的访问请求；

响应所述访问请求将所述发布之后的目标网页发送至所述客户端，使所述客户端显示所述发布之后的目标网页的第二网页样式，并对所述发布之后的目标网页的第二网页样式进行截屏处理得到所述第二截屏图片；

接收所述客户端返回的所述第二截屏图片。

在一种实现方式中，网页监控装置还可以包括：

发送单元603，用于处理单元601生成网页异常信息之后，输出提示信息；或者，存储所述网页异常信息，当所存储的网页异常信息的数量达到预设数量阈值时，输出所述提示信息；

其中，所述提示信息携带所述网页异常信息，所述提示信息用于提示对所述网页异常信息进行分析处理；

所述网页异常信息包括以下至少一种：所述目标网页的运行环境信息，所述目标网页的访问地址信息，所述目标网页的访问时间信息，所述第一截屏图片，所述第二截屏图片，所述差异信息。

本发明实施例中，处理单元601获取目标网页的第一截屏图片，第一截屏图片用于展示目标网页在发布之前的第一网页样式，接收单元602获取目标网页的第二截屏图片，第二截屏图片用于展示目标网页在发布之后的第二网页样式，处理单元601对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与第二网页样式之间的差异信息，若差异信息满足预设条件，则确定目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息，可有效监控网页样式异常，并生成网页异常信息，以便及时对网页进行修复。

请参见图7，图7为本发明实施例提供的一种服务器的结构示意图，本发明实施例提供的服务器可以用于实施上述图3所示的本发明实施例实现的方法，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照图3所示的本发明实施例。

如图7所示，该服务器包括：至少一个处理器701，例如CPU，至少一个输入装置703，至少一个输出装置704，存储器705，至少一个通信总线702。其中，通信总线702用于实现这些组件之间的连接通信。其中，输入装置703具体可以为网络接口，用于与客户端进行交互。输出装置704具体可以为显示屏幕或者麦克风等，用于输出提示信息。其中，存储器705可能包含高速RAM存储器，也可能还包括非不稳定的存储器，例如至少一个磁盘存储器，具体用于存储第一截屏图片、第二截屏图片以及网页异常信息。存储器705可选的可以包含至少一个位于远离前述处理器701的存储装置。处理器701可以结合图6所示的网页监控装置。存储器705中存储一组程序代码，且处理器701、输入装置703以及输出装置704调用存储器705中存储的程序代码，用于执行以下操作：

处理器701获取目标网页的第一截屏图片，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式；

输入装置703获取所述目标网页的第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

处理器701对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息；

若所述差异信息满足预设条件，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。

在一种实现方式中，处理器701对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体可以为：

处理器701获取所述第一截屏图片的第一特征向量及所述第二截屏图片的第二特征向量；

处理器701计算所述第一特征向量和所述第二特征向量之间的欧式距离；

处理器701将所述欧式距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常，具体可以为：

若所述欧式距离大于第一预设距离阈值，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，所述处理器701对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体可以为：

处理器701获取所述第一截屏图片的第一图片指纹及所述第二截屏图片的第二图片指纹；

处理器701计算所述第一图片指纹和所述第二图片指纹之间的汉明距离；

处理器701将所述汉明距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常，具体可以为：

若所述汉明距离大于第二预设距离阈值，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，所述处理器701对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，具体可以为：

处理器701采用相似度算法计算所述第一截屏图片与所述第二截屏图片之间的相似度；

处理器701将所述相似度确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常，具体可以为：

若所述相似度小于预设比例阈值，则处理器701确定所述目标网页在发布之后的第二网页样式存在异常。

在一种实现方式中，处理器701获取目标网页的第一截屏图片，具体可以为：

在所述目标网页发布之前，输出装置704显示所述发布之前的目标网页的第一网页样式；

处理器701对所述第一网页样式进行截屏处理，得到所述第一截屏图片。

在一种实现方式中，所述输入装置703获取所述目标网页的第二截屏图片，具体用于：

在所述目标网页发布之后，输入装置703接收客户端发送的针对所述发布之后的目标网页的访问请求；

输出装置704响应所述访问请求将所述发布之后的目标网页发送至所述客户端，使所述客户端显示所述发布之后的目标网页的第二网页样式，并对所述发布之后的目标网页的第二网页样式进行截屏处理得到所述第二截屏图片；

输入装置703接收所述客户端返回的所述第二截屏图片。

在一种实现方式中，输出装置704在处理器701生成网页异常信息之后，输出提示信息；或者，处理器701存储所述网页异常信息，当所存储的网页异常信息的数量达到预设数量阈值时，输出装置704输出所述提示信息；

其中，所述提示信息携带所述网页异常信息，所述提示信息用于提示对所述网页异常信息进行分析处理；

所述网页异常信息包括以下至少一种：所述目标网页的运行环境信息，所述目标网页的访问地址信息，所述目标网页的访问时间信息，所述第一截屏图片，所述第二截屏图片，所述差异信息。

具体的，本发明实施例中介绍的服务器可以用以实施本发明结合图3介绍的方法实施例中的部分或全部流程。

请参见图8，图8是本发明实施例中提供的一种网页监控装置的结构示意图，如图所示本发明实施例中的网页监控装置至少可以包括接收单元801、处理单元802和发送单元803，其中：

发送单元803向服务器发送针对发布之后的目标网页的访问请求；

在接收单元801接收到服务器响应所述访问请求而返回的所述发布之后的目标网页时，处理单元802显示所述发布之后的目标网页的第二网页样式；

处理单元802对所述第二网页样式进行截屏处理得到第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

发送单元803将所述第二截屏图片发送给所述服务器，以使所述服务器对第一截屏图片和所述第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息；其中，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式。

在一种实现方式中，所述处理单元802对所述第二网页样式进行截屏处理得到第二截屏图片，具体用于：

使用预置的截屏API对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述发送单元803将所述第二截屏图片发送给所述服务器，具体用于：

对所述第二截屏图片进行封装，得到HTTP请求信息；

将所述HTTP请求信息发送给所述服务器。

在一种实现方式中，所述处理单元802对所述第二网页样式进行截屏处理得到第二截屏图片，具体用于：

使用canvas组件对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述处理单元802使用canvas组件对所述第二网页样式进行截屏处理，得到所述第二截屏图片，具体用于：

基于所述发布之后的目标网页的所有元素，确定各个DOM；

获取各个所述DOM的CSS属性，所述CSS属性包括内联CSS属性和外链CSS属性；

将所述CSS属性转换为canvas属性；

基于所述canvas属性，对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述发送单元803将所述第二截屏图片发送给所述服务器，具体用于：

对所述第二截屏图片进行封装，得到异步请求信息；

将所述异步请求信息发送给所述服务器。

本发明实施例中，发送单元803向服务器发送针对发布之后的目标网页的访问请求，在接收单元801接收到服务器响应访问请求而返回的发布之后的目标网页时，处理单元802显示发布之后的目标网页的第二网页样式，处理单元802对第二网页样式进行截屏处理得到第二截屏图片，发送单元803将第二截屏图片发送给服务器，以使服务器对第一截屏图片和第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若差异信息满足预设条件，则服务器确定目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息，可有效监控网页样式异常，并生成网页异常信息，以便及时对网页进行修复。

请参见图9，图9为本发明实施例提供的一种客户端的结构示意图，本发明实施例提供的客户端可以用于实施上述图3所示的本发明实施例实现的方法，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照图3所示的本发明实施例。

如图9所示，该客户端包括：至少一个处理器901，例如CPU，至少一个输入装置903，至少一个输出装置904，存储器905，至少一个通信总线902。其中，通信总线902用于实现这些组件之间的连接通信。其中，输入装置903、输出装置904具体可以为网络接口，用于与服务器进行交互。其中，存储器905可能包含高速RAM存储器，也可能还包括非不稳定的存储器，例如至少一个磁盘存储器，具体用于存储访问请求以及第二截屏图片。存储器905可选的可以包含至少一个位于远离前述处理器901的存储装置。处理器901可以结合图8所示的网页监控装置。存储器905中存储一组程序代码，且处理器901、输入装置903以及输出装置904调用存储器905中存储的程序代码，用于执行以下操作：

输出装置904向服务器发送针对发布之后的目标网页的访问请求；

在输入装置903接收到服务器响应所述访问请求而返回的所述发布之后的目标网页时，输出装置904显示所述发布之后的目标网页的第二网页样式；

处理器901对所述第二网页样式进行截屏处理得到第二截屏图片，所述第二截屏图片用于展示所述目标网页在发布之后的第二网页样式；

输出装置904将所述第二截屏图片发送给所述服务器，以使所述服务器对第一截屏图片和所述第二截屏图片进行比对处理，得到第一网页样式与所述第二网页样式之间的差异信息，若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息；其中，所述第一截屏图片用于展示所述目标网页在发布之前的第一网页样式。

在一种实现方式中，所述处理器901对所述第二网页样式进行截屏处理得到第二截屏图片，具体可以为：

处理器901使用预置的截屏API对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述输出装置904将所述第二截屏图片发送给所述服务器，具体可以为：

处理器901对所述第二截屏图片进行封装，得到HTTP请求信息；

输出装置904将所述HTTP请求信息发送给所述服务器。

在一种实现方式中，所述处理器901对所述第二网页样式进行截屏处理得到第二截屏图片，具体可以为：

处理器901使用canvas组件对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述处理器901使用canvas组件对所述第二网页样式进行截屏处理，得到所述第二截屏图片，具体可以为：

处理器901基于所述发布之后的目标网页的所有元素，确定各个DOM；

处理器901获取各个所述DOM的CSS属性，所述CSS属性包括内联CSS属性和外链CSS属性；

处理器901将所述CSS属性转换为canvas属性；

处理器901基于所述canvas属性，对所述第二网页样式进行截屏处理，得到所述第二截屏图片。

在一种实现方式中，所述输出装置904将所述第二截屏图片发送给所述服务器，具体可以为：

处理器901对所述第二截屏图片进行封装，得到异步请求信息；

输出装置904将所述异步请求信息发送给所述服务器。

具体的，本发明实施例中介绍的客户端可以用以实施本发明结合图3介绍的方法实施例中的部分或全部流程。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

1.一种网页监控方法，其特征在于，所述方法包括：

客户端向服务器发送针对发布之后的目标网页的访问请求；

所述服务器响应所述访问请求，将所述发布之后的目标网页发送至所述客户端；

所述客户端显示所述发布之后的目标网页中的层叠样式表CSS在所述发布之后的目标网页中运行时的第二网页样式，所述第二网页样式中的第一区域用于显示第一信息，所述第二网页样式中的第一区域位于所述第二网页样式中的第三位置；

所述客户端基于所述发布之后的目标网页的所有元素，确定至少一个文档对象模型DOM；

所述客户端获取各个DOM的CSS属性，所述至少一个DOM的CSS属性包括内联CSS属性和外链CSS属性；

所述客户端将所述至少一个DOM的CSS属性转换为画布canvas属性；

所述客户端基于所述canvas属性，对所述第二网页样式进行截屏处理，得到第二截屏图片，所述第二截屏图片用于展示所述发布之后的目标网页的第二网页样式；

所述客户端将所述第二截屏图片发送至所述服务器；

所述服务器获取所述第二截屏图片对应的网页标识和版本标识；

所述服务器在数据库中获取与所述网页标识和版本标识匹配的第一截屏图片，所述第一截屏图片用于展示发布之前的目标网页中的层叠样式表在所述发布之前的目标网页中运行时的第一网页样式，所述第一网页样式中的第一区域用于显示第一信息，所述第一网页样式中的第一区域位于所述第一网页样式中的第一位置；

若所述第三位置和所述第一位置不相同，则所述服务器对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息；

若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，并生成网页异常信息。

2.如权利要求1所述的方法，其特征在于，所述服务器对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，包括：

所述服务器获取所述第一截屏图片的第一特征向量及所述第二截屏图片的第二特征向量；

所述服务器计算所述第一特征向量和所述第二特征向量之间的欧式距离；

所述服务器将所述欧式距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，包括：

若所述欧式距离大于第一预设距离阈值，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常。

3.如权利要求1所述的方法，其特征在于，所述服务器对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，包括：

所述服务器获取所述第一截屏图片的第一图片指纹及所述第二截屏图片的第二图片指纹；

所述服务器计算所述第一图片指纹和所述第二图片指纹之间的汉明距离；

所述服务器将所述汉明距离确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，包括：

若所述汉明距离大于第二预设距离阈值，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常。

4.如权利要求1所述的方法，其特征在于，所述服务器对所述第一截屏图片和所述第二截屏图片进行比对处理，得到所述第一网页样式与所述第二网页样式之间的差异信息，包括：

所述服务器采用相似度算法计算所述第一截屏图片与所述第二截屏图片之间的相似度；

所述服务器将所述相似度确定为所述第一网页样式与所述第二网页样式之间的差异信息；

所述若所述差异信息满足预设条件，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常，包括：

若所述相似度小于预设比例阈值，则所述服务器确定所述目标网页在发布之后的第二网页样式存在异常。

5.如权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：

所述服务器在所述目标网页发布之前，显示所述发布之前的目标网页的第一网页样式；

所述服务器对所述第一网页样式进行截屏处理，得到所述第一截屏图片。

6.如权利要求1-4任一项所述的方法，其特征在于，所述服务器生成网页异常信息之后，还包括：

所述服务器输出提示信息；或者，

所述服务器存储所述网页异常信息，当所存储的网页异常信息的数量达到预设数量阈值时，输出所述提示信息；

其中，所述提示信息携带所述网页异常信息，所述提示信息用于提示对所述网页异常信息进行分析处理；

所述网页异常信息包括以下至少一种：所述目标网页的运行环境信息，所述目标网页的访问地址信息，所述目标网页的访问时间信息，所述第一截屏图片，所述第二截屏图片，所述差异信息。

7.如权利要求1所述的方法，其特征在于，所述客户端将所述第二截屏图片发送给所述服务器，包括：

所述客户端对所述第二截屏图片进行封装，得到异步请求信息；

所述客户端将所述异步请求信息发送给所述服务器。

8.一种网页监控装置，其特征在于，所述装置包括用于执行如权利要求1-7任一项所述的方法的单元。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被服务器执行时使所述服务器执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被客户端执行时使所述客户端执行如权利要求1-7任一项所述的方法。

Images