页面渲染异常的检测方法、装置、设备及存储介质与流程

1.本公开实施例涉及页面渲染技术领域，尤其涉及一种页面渲染异常的检测方法、装置、设备及存储介质。


背景技术：

2.全球广域网(world wide web，简称web)服务是指运行在浏览器内核上的网页程序或javascript程序。随着web技术的不断发展，web服务越来越多的被使用，但是目前还没有一种能够对web服务的渲染异常进行检测的方案，导致web服务的渲染异常无法被检测到，用户体验较差。


技术实现要素：

3.为了解决上述技术问题或者至少部分地解决上述技术问题，本公开实施例提供了一种页面渲染异常的检测方法、装置、设备及存储介质。
4.本公开实施例的第一方面提供了一种页面渲染异常的检测方法，该方法包括：获取检测窗口的属性信息，以及屏幕上的页面；根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误；若页面上的内容有误，则确定页面渲染异常。
5.本公开实施例的第二方面提供了一种页面渲染异常的检测装置，该装置包括：
6.获取模块，用于获取检测窗口的属性信息，以及屏幕上的页面。
7.检测模块，用于根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误。
8.确定模块，用于在页面上的内容有误时，确定页面渲染异常。
9.本公开实施例的第三方面提供了一种终端设备，该终端设备包括：处理器和存储器；其中，存储器中存储有计算机程序，当该计算机程序被处理器执行时，使得处理器可以执行上述第一方面的方法。
10.本公开实施例的第四方面提供了一种计算机可读存储介质，该存储介质中存储有计算机程序，当该计算机程序被处理器执行时，使得处理器可以执行上述第一方面的方法。
11.本公开实施例提供的技术方案与现有技术相比具有如下优点：
12.本公开实施例，通过获取检测窗口的属性信息和屏幕上的页面，根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误，当页面上的内容有误时，确定页面出现渲染异常，实现了一种用于对页面内容进行检测的方案，该方案在页面内容出现渲染异常时能够及时发现异常，从而为快速消除异常提供了保障，提高了页面的显示效果和用户体验。
附图说明
13.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
14.为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
15.图1是本公开实施例提供的一种应用场景的示意图；
16.图2是本公开实施例提供的一种页面渲染异常的检测方法的流程图；
17.图3a是本公开实施例提供的一种遍历页面内容的方法示意图；
18.图3b是本公开实施例提供的一种页面分割方法的示意图；
19.图4a是本公开实施例提供的另一种遍历页面内容的方法示意图；
20.图4b是本公开实施例提供的另一种页面分割方法的示意图；
21.图5是本公开实施例提供的一种检测页面内容是否有误的方法流程图；
22.图6是本公开实施例提供的一种用于检测窗口位置上的内容是否有误的方法的示意图；
23.图7是本公开实施例提供的又一种页面渲染异常的检测方法的流程图；
24.图8是本公开实施例提供的又一种页面渲染异常的检测方法的流程图；
25.图9是本公开实施例提供的一种页面渲染异常的检测装置的结构示意图；
26.图10是本公开实施例提供的一种终端设备的结构示意图。
具体实施方式
27.为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
28.在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
29.为了更好理解本公开实施例的技术方案，下面首先对本公开实施例涉及的部分名词进行解释：
30.javascript：是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。
31.小程序：是一种不需要下载和安装即可使用的应用程序。
32.meta标签：是一种辅助性标签，位于页面的头部。meta标签中包括页面的元信息(比如针对搜索引擎和更新频度的描述和关键词等)，可选的，本公开实施例中meta标签可以被执行创新配置，配置后的meta标签除了可以包括原本就携带的元信息以外，还可以包括如下信息中的至少一种：检测窗口的尺寸信息、检测范围的信息、检测周期的信息、异常颜色的信息。其中，检测窗口的尺寸信息用于指示检测窗口的大小、形状等。检测范围的信息用于指示检测窗口在页面上的检测范围，比如检测窗口在页面上的横向和/或纵向检测范围等。检测周期的信息用于指示页面的检测频率。异常颜色的信息用于指示当检测窗口中的颜色与异常颜色相匹配时检测窗口中的内容出现异常。
33.下面对本公开实施例的技术方案进行示例性说明。
34.在相关技术中，web服务的监控方案主要包括如下三种：
35.白屏监控：是指在web服务的页面无法渲染时，显示界面上会显示空白页面，当检测到显示界面上显示的是空白页面时可以判断web服务出现异常。
36.首屏监控：是指对web服务的页面从打开到显示内容所耗费的时间进行监控，当页面打开后的预设时间内无法显示页面内容，则判断web服务出现异常。
37.崩溃监控：是指对web服务的页面是否崩溃进行监控，当监控到web服务的页面崩溃时，则确定web服务出现异常。
38.上述三种监控方案均无法检测页面的内容是否出现渲染异常。然而随着web技术的不断发展，web服务的应用越来越广泛，页面内容的渲染效果会直接影响用户的体验，而如果无法及时发现页面内容的渲染异常，则无法及时消除异常，从而导致页面的显示效果不好，用户体验较差。因此亟需一种方法来对页面内容的渲染异常进行检测。
39.基于相关技术存在的缺陷以及本领域的迫切需求，本公开实施例提供了一种页面渲染异常的检测方案，该方案可用于对各类应用程序的页面以及网页的页面进行检测，能够及时发现页面内容出现的渲染异常，为排除渲染异常提供保障。
40.本公开实施例所称的页面可以示例性的理解为应用程序或者网页的页面。其中该应用程序或者网页至少可以搭载在网站服务器、个人计算机(personal computer，简称pc)以及终端设备(比如，手机、智能电视、平板电脑、可穿戴设备、个人数字助理(personal digital assistant，简称pda)、智能汽车等)上。本实施例提供的方案可以由这些设备中的任意一个执行。
41.本实施例所称的应用程序可以是需要下载和安装才可使用的应用程序，也可以是不需要下载和安装即可使用的应用程序，比如小程序、微应用等。
42.在本实施例中，不同的应用程序或者网页可以基于相同编程语言实现，也可以基于不同的编程语言实现。对于不同应用程序和网页的编程语言本实施例不做具体限定。也就是说针对以不同编程语言实现的应用程序或者网页，本公开实施例提供的方案需要采用与相应应用程序或者网页相同的编程语言来实现。
43.示例的，图1是本公开实施例提供的一种应用场景的示意图，如图1所示，该应用场景包括服务器11和终端设备12。其中，服务器11可以示例性的理解为服务提供方的服务器，该服务提供方用于向服务使用方提供web服务。终端设备12可以示例性的理解为服务使用方持有的终端设备，终端设备12上搭载有前述所称的应用程序和/或网页，当所述应用程序和/或网页运行时，终端设备执行服务提供方提供的web服务并在屏幕上渲染得到web服务对应的页面。
44.终端设备12搭载有屏幕，且具有界面渲染功能和数据处理功能，在图1所示的应用场景中终端设备12可以被具体为手机、智能电视、平板电脑、可穿戴设备、个人数字助理(personal digital assistant，简称pda)以及智能汽车中的一种，但是在其他应用场景中终端设备12也可以不局限于上述列举的设备。
45.参见图1，服务器11和终端设备12进行通信。具体的，终端设备12上运行的应用程序或者网页通过终端设备12向服务器11发送服务请求，服务器11根据服务请求，采用有线或者无线的方式将web服务的页面数据发送给终端设备12，终端设备12对页面数据进行加载并渲染得到web服务的页面。
46.在渲染得到web服务的页面之后，终端设备12执行本公开实施例提供的检测方法。
示例的，终端设备12可以基于本地存储的预设检测窗口或者服务器11配置的检测窗口对页面上的内容进行检测，并基于预设方法判断页面上的内容是否有误。当检测到页面上的内容有误，即页面内容出现渲染异常时，将页面渲染异常的消息反馈给服务器11，使得服务提供方及时解决页面渲染问题，提高页面显示效果。其中，检测窗口的属性信息可以被配置在页面的meta标签和/或预设应用程序接口(application programming interface，api)的参数信息中。终端设备从meta标签或者预设api的参数信息中获取检测窗口的属性信息，进而根据检测窗口的属性信息，在页面上执行相应的检测操作。其中，预设api用于向终端设备12转发服务提供方的检测请求，终端设备根据服务提供方的检测请求对页面内容进行检测，或者在未收到服务提供方的检测请求时终端设备也可以周期性的对页面内容进行检测。本公开实施例中检测窗口的属性信息至少可以包括如下信息中的一种：检测窗口的尺寸信息、检测周期的信息、检测范围的信息以及异常颜色的信息。
47.本公开实施例能够对页面内容进行检测，当页面内容出现渲染异常时能够及时通知服务提供方，使得服务提供方能够快速消除异常，从而提高了页面的显示效果和用户体验。另外在本公开实施例中，服务提供方通过对检测窗口的属性信息(比如检测窗口的尺寸信息、检测周期的信息、检测范围的信息以及异常颜色的信息中的一个或多个)进行配置，能够实现对页面的精准检测，提高了对页面内容的检测效率和异常发现能力。
48.下面结合示例性的实施例对本公开实施例的技术方案进行示例性的说明。
49.图2是本公开实施例提供的一种页面渲染异常的检测方法的流程图，该方法可以示例性的由图1场景中的终端设备来执行。如图2所示，本实施例提供的检测方法包括如下步骤：
50.步骤201、获取检测窗口的属性信息，以及屏幕上的页面。
51.在本实施例中，检测窗口的属性信息至少包括如下信息中的一种：检测窗口的尺寸信息、检测周期的信息、检测范围的信息以及异常颜色的信息。其中，检测窗口的尺寸信息用于指示检测窗口的大小、形状等。检测范围的信息用于指示检测窗口在页面上的检测范围，比如检测窗口在页面上的横向和/或纵向检测范围等。检测周期的信息用于指示对页面的检测频率。异常颜色的信息用于指示当检测窗口中的颜色与异常颜色相匹配时检测窗口中的内容出现异常，比如当异常颜色被设置为黑色时，如果检测窗口在页面上的某个窗口位置上的内容是一个纯黑色的色块，则确定该窗口位置上的内容有误。
52.本实施例中，检测周期、检测范围、异常颜色以及检测窗口的尺寸信息可以根据需要进行配置，比如检测窗口的尺寸一般可以设置为小于或者等于页面上最小图片或者浏览器渲染策略规定的最小区块的大小，检测周期一般可以设置为大于或者等于页面的刷新周期等。
53.示例的，本实施例获取检测窗口的属性信息的方法可以包括如下几种：
54.在一种方法中，检测窗口的属性信息被配置在页面的meta标签中。终端设备在接收到页面数据后，从页面的meta标签中获取检测窗口的属性信息。
55.在另一种方法中，检测窗口的属性信息被配置在预设api的参数信息中。其中，预设api用于将服务提供方发送的检测请求转发给终端设备。终端设备根据检测请求从该预设api的参数信息中提取获得检测窗口的属性信息。或者终端设备也可以依据配置定期从预设api中获取检测窗口的属性信息。
56.本实施例所称的页面可以被示例性的理解为应用程序或者网页的页面，该应用程序和网页运行在终端设备上，其中应用程序可以示例性的理解为需要下载和安装才可使用的应用程序，也可以是不需要下载和安装即可使用的应用程序，比如可以是小程序或者微应用等。
57.本实施例所称的页面具体可以是一种web服务的页面，但是在其他实施例中也可以是其他服务的页面。在本实施例中，终端设备上的应用程序或者网页运行该web服务，并在显示相应的页面。本实施例中的页面包括实际应用中刷新频率较低的页面，比如当页面的刷新频率小于第一阈值的页面时，可以认为页面的刷新频率较低。此时可以采用上述第一种方法，将检测窗口的属性信息配置在页面的meta标签中，使得终端设备从页面的meta标签中获取检测窗口的属性信息。比如，实际场景中线上会场的页面刷新频率一般比较低，当本实施例所称的页面被具体为线上会场的页面时，可以将检测窗口的属性信息配置在页面的meta标签中，并使得检测窗口的属性信息中携带检测周期的信息，从而终端设备可以根据检测周期对页面进行周期性的检测，这样的配置方式能够保证终端设备在页面刷新之后，或者用户滚动页面之后及时发现页面上的渲染异常，同时又不至于因为检测的过于频繁而导致资源的浪费。其中，线上会场可以理解为在网络上营造的会场，比如网络展销会的会场、网络展览会的会场等，这些会场具有的一般性特点为页面较长、内容较多、刷新频率较低。
58.本实施例中的页面还包括实际应用中刷新频率较高的页面，比如当页面的刷新频率大于第二阈值的页面时，认为页面的刷新频率较高。在这种情况中，一种示例性的方式是采用上述第二种方法将检测窗口的属性信息配置在预设api的参数信息中，比如，当本实施例中的页面为刷新频率较高的游戏页面或者小程序页面时，服务提供方通过将检测窗口的属性信息配置在预设api的参数信息中，并通过调用预设api主动请求终端设备对页面进行检测，使得终端设备在接收到检测请求之后从预设api的参数信息中获取检测窗口的属性信息。这种方式能够精确控制终端设备的检测时间，以便在页面刷新后能够及时对页面进行检测。其中，小程序是指不需要下载和安装即可使用的应用程序。实际场景中游戏页面和小程序页面的刷新频率一般要大于线上会场的刷新频率，因此，在本实施例中第二阈值可以被示例性的理解为是一个大于第一阈值的值，第一阈值和第二阈值的具体数值可以根据需要进行设定，本实施例不做具体限定。
59.当然，上述仅是对本实施例所称页面的示例性说明而不是唯一限定。
60.步骤202、根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误。
61.其中，当检测窗口的属性信息中包括检测窗口的尺寸信息时，终端设备根据检测窗口的尺寸信息确定得到相应尺寸的检测窗口。当检测窗口的属性信息中不包括检测窗口的尺寸信息时，终端设备从本地获取预设检测窗口。在本实施例中检测窗口的尺寸小于或者等于页面的尺寸。
62.在本实施例的一种实施方式中，可以基于检测窗口对页面上的内容进行遍历，并根据预设方法来判断检测窗口在页面上的各窗口位置的内容是否有误，比如，当某个窗口位置上的颜色与检测窗口的属性信息规定的异常颜色相匹配(比如一致)时，则可以确定该窗口位置上的内容有误。当确定某个窗口位置上的内容有误时，窗口位置和/或错误类型
(比如，出现属性信息规定的异常颜色的色块、内容乱码、内容错位等，但也可以不局限于这些错误类型)可以被记录。在遍历结束后，若页面上存在一个及以上的窗口位置的内容有误，则确定页面内容有误。其中，本实施例所称的预设方法可以根据需要进行配置而不必局限于特定的方法。
63.在本实施例的另一种实施方式中，还可以基于检测窗口对页面上的内容进行分割处理，得到多个形状和大小与检测窗口一致的内容块，然后根据预设方法对每个内容块上的内容是否有误进行检测，比如，当某个内容块是一个纯色块，且该纯色块的颜色与检测窗口的属性信息规定的异常颜色相匹配(比如一致)时，则可以确定该内容块上的内容有误。当确定某个内容块上的内容有误时，内容块在页面上的位置和/或内容的错误类型(比如，出现属性信息规定的异常颜色的色块、内容乱码、内容错位等，但也可以不局限于这些错误类型)可以被记录。在遍历结束后，根据记录若页面上存在一个及以上的内容块的内容有误，则确定页面内容有误。其中，对内容块上内容的检测方法可以根据需要进行配置而不必局限于特定的方法。
64.示例的，当检测窗口的属性信息中不包括检测范围的信息，或者检测范围的信息所指示的检测范围为页面的全部区域时，本实施例可以基于检测窗口对页面的全部区域进行遍历和检测，或者也可以根据检测窗口的尺寸和大小对页面上的全部区域进行分割，然后对分割得到的每个内容块进行检测。比如，图3a是本公开实施例提供的一种遍历页面内容的方法示意图，在图3a中，位置1为检测窗口3a在页面30上的起始位置，位置n为检测窗口3a在页面30上的结束位置。如图3a所示，当检测窗口3a的属性信息中不包括检测范围的信息，或者检测范围为页面30的全部区域时，检测窗口3a从起始位置开始，基于预设步长按照图3a中箭头方向从左到右、从上到下依次遍历页面上的内容直到到达结束位置为止。在遍历过程中，检测窗口3a每到一个窗口位置，该窗口位置上的内容将被检测，若检测结果是窗口位置上的内容有误，比如窗口位置上的内容是一个纯色的色块，且该色块的颜色与异常颜色一致，则对该窗口位置进行记录，然后进行下一个窗口位置的检测，或者在检测到窗口位置上的内容有误时，也可以停止对后续内容的检测，直接结束本次遍历。在结束遍历后，若页面上存在一个及以上的窗口位置的内容有误时，则确定页面上的内容有误。其中，用于检测页面内容是否有误的方法可以根据需要进行设置，本实施例不做限定。再比如，图3b是本公开实施例提供的一种页面分割方法的示意图，如图3b所示，页面31上的每个方块均为基于检测窗口分割得到的内容块，其中每个内容块的尺寸和形状均与检测窗口相同。在图3b中每个内容块的内容将被检测，若页面31上存在一个及以上的内容块的内容有误时，则确定页面31的内容有误。
65.示例的，当检测窗口的属性信息中包括检测范围的信息时，本实施例可以根据检测范围的信息，采用检测窗口在页面的相应区域上进行遍历和检测，或者也可以根据检测范围的信息，将页面上的相应区域分割成多个内容块，然后对每个内容块进行检测。比如，图4a是本公开实施例提供的另一种遍历页面内容的方法示意图，在图4a中，检测窗口的属性信息包括检测范围的信息，该检测范围的信息可以示例性的包括检测窗口在页面上的横向检测范围和纵向检测范围。如图4a所示，页面40中的区域41是根据检测窗口的属性信息确定得到的检测范围。区域41中的位置1为检测窗口4a在页面40上的起始位置，位置m为检测窗口4a在页面40上的结束位置。在图4a所示的实施方式中，检测窗口4a仅在区域41中按
照箭头方向从左到右、从上到下依次进行遍历，在遍历过程中，检测窗口4a每到一个窗口位置，该窗口位置上的内容将被检测，若检测结果是窗口位置上的内容有误，比如窗口位置上的内容是一个纯色的色块，且该色块的颜色与异常颜色一致，则对该窗口位置以及异常信息进行记录，然后进行下一个窗口位置的检测，或者也可以在检测到窗口位置的内容有误时，直接结束遍历。在结束遍历后，若页面上存在一个及以上的窗口位置的内容有误时，则确定页面上的内容有误。再比如，图4b是本公开实施例提供的另一种页面分割方法的示意图，如图4b所示，页面42上的区域43是根据检测窗口的属性信息确定得到的检测范围。区域43上的每个方块均为基于检测窗口分割得到的内容块，其中每个内容块的尺寸和形状均与检测窗口相同。在区域43上的内容块进行检测之后，若区域43上存在一个及以上的内容块的内容有误时，则确定页面42的内容有误。
66.示例的，当检测窗口的属性信息中包括检测周期的信息时，终端设备在前一次检测结束后，启动计时器进行计时，并在到达检测周期规定的检测时间时，启动下一次检测。
67.步骤203、若页面上的内容有误，则确定页面渲染异常。
68.示例的，在确定页面渲染出现异常之后，终端设备可以将页面渲染的异常信息发送给服务提供方，以使服务提供方能够及时解决页面出现的渲染问题。其中终端设备反馈给服务提供方的异常信息中可以包括如下信息中的一种或多种：渲染问题的出现位置(即包含错误内容的检测窗口的窗口位置)、错误类型。
69.本公开实施例，通过获取检测窗口的属性信息和屏幕上的页面，根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误，当页面上的内容有误时，确定页面出现渲染异常，实现了一种用于对页面内容进行检测的方案，该方案在页面内容出现渲染异常时能够及时发现异常，从而为快速消除异常提供了保障，提高了页面的显示效果和用户体验。另外，在本公开实施例中，服务提供方可以对检测窗口的属性信息进行配置，通过自定义渲染异常的不同情况、检测范围、检测周期、检测窗口尺寸等信息，能够实现对页面检测的精准控制，提高了检测效率和检测结果的准确度。
70.图5是本公开实施例提供的一种检测页面内容是否有误的方法流程图，如图5所示，在本实施例的一种示例性的实施方式中可以通过如下方法确定检测窗口在页面上的窗口位置的内容是否有误：
71.步骤501、将检测窗口在页面上的窗口位置的内容与页面的加载数据中的相应内容进行匹配。
72.步骤502、若窗口位置上的内容与加载数据中的相应内容不匹配，则确定该窗口位置上的内容有误。
73.实际中，页面内容是根据页面的加载数据渲染得到的。通过将页面上的内容与页面的加载数据进行匹配能够快速确定页面上的内容上是否渲染出错。
74.示例的，图6是本公开实施例提供的一种用于检测窗口位置上的内容是否有误的方法的示意图。如图6所示，在页面的渲染过程中，一般需要先加载页面数据，然后再基于页面的加载数据渲染得到相应的页面，基于此，本实施例可以基于渲染过程的逆向过程来确定页面上的内容是否有误，即先根据渲染规则确定页面上窗口位置的内容在加载数据中的对应内容，然后，基于渲染的逆向过程将窗口位置的内容转换成与加载数据相同的数据形式(比如，二进制、十六进制等)，然后基于转换后的内容与加载数据中的对应内容进行匹
配，如果二者内容一致，则确定窗口位置上的内容正确，否则确定窗口位置上的内容有误。
75.与本实施例类似的，本实施例的方法还可以被应用到分割页面的场景中对分割得到的内容块进行检测，其执行方式与本实施例类似，在这里不再赘述。
76.本实施例提供的方法仅为示例说明，并不是对本公开实施例的唯一限定，实际上确定窗口位置上的内容是否有误的方法可以根据需要进行设定，比如在其他实施例中还可以通过预设模型对检测窗口在页面上的窗口位置的内容是否有乱码进行检测，当检测到窗口位置上的内容有乱码时，确定窗口位置上的内容有误。
77.本实施例通过将窗口位置上的内容与页面的加载数据中的相应内容进行匹配，能够及时发现页面内容的渲染异常，尤其能够对内容缺失，内容错位等渲染异常进行检测，提高了对页面渲染异常的检测能力。
78.图7是本公开实施例提供的又一种页面渲染异常的检测方法的流程图，如图7所示，在本公开实施例的一种示例性的实施方式中，该检测方法可以包括如下步骤：
79.步骤701、获取页面的加载数据。
80.其中，本实施例所称的页面可以示例性的理解为web服务的页面，该页面具体可以是刷新频率小于第一阈值的在线会场的页面，但不局限于在线会场的页面。
81.步骤702、从页面的加载数据中获取页面的meta标签。
82.步骤703、从页面的meta标签解析获得检测窗口的属性信息。
83.其中，检测窗口的属性信息包括：检测窗口的尺寸信息、检测周期的信息、检测范围的信息和异常颜色的信息。检测窗口的尺寸信息示例性的可以包括检测窗口的长度和宽度信息。检测范围的信息示例性的可以包括检测窗口在页面上的横向检测范围和纵向检测范围。比如，在本实施例的一种实施方式中，检测窗口的属性信息可以被携带在meta标签的名称属性(或者也可以称为“name”属性)中。其中，“name”属性可以包括“period”、“rect-x”、“rect-y”、“rect-width”、“rect-heigh”、“detect-color”等参数，其中，参数“period”的取值用于表示检测周期。参数“rect-x”的取值用于表示检测窗口的宽度，“rect-x”的取值可以示例性的设置成页面中最小图片的宽度。参数“rect-y”的取值用于表示检测窗口的长度，“rect-y”的取值可以示例性的设置成页面中最小图片的长度。参数“rect-width”的取值用于表示检测窗口在页面上的横向检测范围，示例的，当“rect-width”的取值为负时表示检测窗口的横向检测范围是整个页面的横向宽度范围。参数“rect-heigh”的取值用于表示检测窗口在页面上的纵向检测范围，示例的，当“rect-heigh”的取值为负时表示检测窗口在页面上的纵向检测范围为整个页面的高度范围。参数“detect-color”的取值用于表示颜色。当某个窗口位置上的内容是一个与“detect-color”所指示的颜色相匹配的色块时，窗口位置上的内容有误。“detect-color”所指示的颜色一般可以被设置成黑色，但不局限于黑色。
84.步骤704、根据页面的加载数据渲染得到web服务的页面。
85.步骤705、在到达检测周期规定的检测时间时，获取屏幕显示的页面。
86.步骤706、根据检测范围的信息，判断页面上是否存在与检测范围相匹配的区域，其中若存在则执行步骤707-708，否则跳转到步骤709。
87.步骤707、根据检测窗口的尺寸信息和检测范围的信息，采用相应的检测窗口检测页面上位于检测范围内的内容是否有误。
88.比如，检测窗口的尺寸信息规定的检测窗口长度为2厘米、宽度为2厘米，检测范围的信息规定的检测范围为页面的全部区域，则基于边长为2厘米的正方形窗口遍历整个页面，并判断各窗口位置上的内容是否有误，若页面上存在一个及以上的窗口位置的内容有误，则确定页面内容有误。当然这里仅为示例说明并不是对本公开实施例的唯一限定。
89.步骤708、若页面上的内容有误，则确定页面异常。
90.步骤709、结束本次检测。
91.本实施例针对刷新频率小于第一阈值的页面(即刷新频率较低的页面)，通过在页面的meta标签中配置检测窗口的属性信息，使得终端设备根据meta标签中的信息对页面内容进行周期性的检测，能够及时发现页面内容的渲染异常，为快速消除异常提供了保证，提高了页面显示效果和用户体验。另外在本公开实施例中，通过在meta标签中对检测窗口的属性信息进行配置，能够自定义内容渲染异常的不同情况、检测范围、检测周期和检测窗口尺寸等信息，从而实现了对页面检测的精准控制，提高了检测效率和检测结果的准确度。
92.图8是本公开实施例提供的又一种页面渲染异常的检测方法的流程图，如图8所示，在本公开实施例的一种示例性的实施方式中，该检测方法可以包括如下步骤：
93.步骤801、接收到服务提供方通过预设api发送的检测请求。
94.步骤802、从预设api的参数信息中获取检测窗口的属性信息。
95.其中，检测窗口的属性信息包括：检测范围的信息和异常颜色的信息。检测范围的信息示例性的可以包括检测窗口在页面上的横向检测范围和纵向检测范围。
96.在本实施例中预设api的参数信息中示例性的可以包括如下参数：“rect-width”、“rect-heigh”和“detect-color”。其中，参数“rect-width”的取值用于表示检测窗口在页面上的横向检测范围，示例的，当“rect-width”的取值为负时表示检测窗口的横向检测范围是整个页面的横向宽度范围。参数“rect-heigh”的取值用于表示检测窗口在页面上的纵向检测范围，示例的，当“rect-heigh”的取值为负时表示检测窗口在页面上的纵向检测范围为整个页面的高度范围。参数“detect-color”的取值用于表示颜色。当某个窗口位置上的内容是一个与“detect-color”所指示的颜色相匹配的色块时，窗口位置上的内容有误。“detect-color”所指示的颜色一般可以被设置成黑色，但不局限于黑色。
97.步骤803、获取屏幕上的页面。
98.其中，本实施例所称的页面可以示例性的理解为刷新频率大于第二阈值的页面(即实际中刷新频率较高的页面)，比如游戏页面或者小程序页面等。
99.步骤804、根据检测范围的信息，判断页面上是否存在与检测范围相匹配的区域，其中若存在则执行步骤805-806，否则跳转到步骤807。
100.步骤805、根据检测范围的信息和异常颜色的信息，采用预设的检测窗口检测页面上位于检测范围内的内容是否有误。
101.其中，预设的检测窗口可以被示例性的理解为尺寸和形状固定的窗口，在本实施例中若预设api的参数信息中不包括检测窗口的尺寸信息时，采用预设的检测窗口进行检测。
102.步骤806、若页面上的内容有误，则确定页面异常。
103.步骤807、结束本次检测。
104.本实施例针对刷新频率较高的页面，通过在预设api的参数信息中配置检测窗口
的属性信息，使得终端设备从预设api的参数信息中获得检测窗口的属性信息，能够使得终端设备及时发现页面内容的渲染异常，为快速消除异常提供了保证，提高了页面的显示效果和用户体验。另外在本实施例中，通过在预设api的参数信息中对检测窗口的属性信息进行配置，能够自定义内容渲染异常的情况和检测范围等信息，从而实现了对页面检测的精准控制，提高了检测效率和检测结果的准确度。
105.图9是本公开实施例提供的一种页面渲染异常的检测装置的结构示意图，该检测装置可以被具体为上述实施例中的终端设备或者终端设备中的部分功能模块。如图9所示，检测装置90包括：
106.获取模块91，用于获取检测窗口的属性信息，以及屏幕上的页面。
107.检测模块92，用于根据检测窗口的属性信息，采用相应的检测窗口检测页面上的内容是否有误。
108.确定模块93，用于在页面上的内容有误时，确定页面渲染异常。
109.在一种可行的实施方式中，检测窗口的属性信息至少包括如下中的一种：检测窗口的尺寸信息、检测周期的信息、检测范围的信息以及异常颜色的信息。
110.在又一种可行的实施方式中，获取模块91可以包括：
111.第一获取子模块，用于从页面的meta标签中获取检测窗口的属性信息。
112.在又一种可行的实施方式中，获取模块91可以包括：
113.第二获取子模块，用于在接收到预设api发送的检测请求时，基于检测请求，从预设api的参数信息中获取检测窗口的属性信息。
114.在又一种可行的实施方式中，本公开实施例所称的页面可以包括内容刷新频率小于第一阈值的页面，该页面比如可以是线上会场的页面。
115.在又一种可行的实施方式中，本公开实施例所称的页面可以包括内容刷新频率大于第二阈值的页面，该页面比如可以是游戏页面和小程序页面，其中，第二阈值大于第一阈值。
116.在又一种可行的实施方式中，检测模块92包括：
117.第一检测子模块，用于在检测窗口的属性信息中包括检测窗口的尺寸信息时，基于检测窗口的尺寸信息，获得相应的检测窗口；并基于该检测窗口检测页面上的内容是否有误。
118.在又一种可行的实施方式中，检测模块92包括：
119.第二检测子模块，用于在检测窗口的属性信息中包括检测范围的信息时，基于预设的检测窗口，检测页面上位于检测范围内的内容是否有误。
120.在又一种可行的实施方式中，检测模块92包括：
121.第三检测子模块，用于在检测窗口的属性信息中包括检测周期的信息时，在到达检测周期指示的检测时间时，基于预设的检测窗口，检测页面上的内容是否有误。
122.在又一种可行的实施方式中，检测模块92包括：
123.确定子模块，用于在页面上存在一个及以上的窗口位置的内容有误时，确定页面上的内容有误。
124.在又一种可行的实施方式中，确定子模块，包括：
125.第一确定子单元，用于在检测窗口的属性信息中包括异常颜色的信息时，若检测
窗口在页面上的窗口位置的颜色与异常颜色相匹配，则确定窗口位置上的内容有误。
126.在又一种可行的实施方式中，确定子模块，包括：
127.第二确定子单元，用于将检测窗口在页面上的窗口位置的内容与页面的加载数据中的相应内容进行匹配；若窗口位置上的内容与加载数据中的相应内容不匹配，则确定窗口位置上的内容有误。
128.在又一种可行的实施方式中，确定子模块，包括：
129.第三确定子单元，用于基于预设模型检测检测窗口在页面上的窗口位置的内容是否有乱码；若窗口位置上的内容有乱码，则确定窗口位置上的内容有误。
130.本实施例提供的装置能够执行上述图1-图8中任一实施例的方法，其执行方式和有意效果类似，在这里不再赘述。
131.图10是本公开实施例提供的一种终端设备的结构示意图，如图10所示，终端设备100包括处理器1001和存储器1002；
132.其中，存储器1002中存储有计算机程序，当所述计算机程序被处理器1001执行时，处理器1001可以执行上述图1-图8中任一实施例的方法，其执行方式和有意效果类似，在这里不再赘述。
133.本公开实施例还提供一种计算机可读存储介质，该存储介质中存储有计算机程序，当该计算机程序被处理器执行时，使得处理器可以执行上述图1-图8中任一实施例的方法，其执行方式和有意效果类似，在这里不再赘述。
134.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
135.以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。