网页操作回放方法、装置、设备及存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种网页操作回放方法、装置、设备及存储介质。


背景技术：

2.在网页浏览与操作过程中，经常会遇到需要将用户的浏览、操作信息进行记录的情形，例如，针对浏览的内容进行解说，发送至第三方，以便第三方能够执行网页回放，充分了解网页所包含的内容、重点以及操作过程。另外，在一些特殊的要求中，要求将网页的浏览、操作过程严格记录，并生成可供查验的网页操作过程记录数据，同时需考虑所记录数据的完整性，且不允许篡改，例如，在银保监会发布的《关于规范互联网保险销售行为可回溯管理的通知》中，明确要求做到互联网保险销售行为的可回溯，即对通过网页销售的操作过程进行完整记录，并保存生成可供查验的数据，并强调互联网保险销售行为可回溯资料应当可以还原为可供查验的有效文件，销售页面应当可以还原为可供查验的有效图片或视频，以便调查检查使用。
3.现有技术中，对网页操作过程记录采用屏幕录制生成视频的方式，其具有体积大、录制不方便、查验难的特点，一般地，如上互联网投保的网页操作过程，操作时间按10分钟计算，所生成的录制文件大小在500m以上，要求用户安装屏幕录制软件才能完成投保过程，限制了用户的行为；针对录制视频进行查验，无法快速定位某项内容(如用户在健康告知项中的签字部分)。


技术实现要素：

4.本技术提供一种网页操作回放方法、装置、设备及存储介质，以解决现有网页操作视频记录占用存储资源过多的问题。
5.为解决上述技术问题，本技术采用的一个技术方案是：提供一种网页操作回放方法，包括：获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态信息；利用预设监听事件监听待监听网页上发生的网页操作事件并保存；响应于网页操作的回放请求，提取网页操作事件，并基于页面信息重建待监听网页的回放页面；将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
6.作为本技术的进一步改进，响应于网页操作的回放请求，提取网页操作事件，并基于页面信息重建待监听网页的回放页面，包括：响应于网页操作的网页回放请求，利用正则表达式过滤掉页面信息中的script脚本标签；基于iframe沙盒功能，根据过滤后的页面信息重建回放页面。
7.作为本技术的进一步改进，利用预设监听事件监听待监听网页上发生的网页操作事件并保存，包括：检测到用户打开待监听网页时，开启预设监听事件以监听待监听页面发生的事件以及事件的发生时间；检测到用户关闭待监听网页时，停止预设监听事件，根据监听到的事件以及事件的发生时间生成网页操作事件并保存。
8.作为本技术的进一步改进，监听待监听页面发生的事件，包括：监听到待监听网页发生操作时的目标顶层dom元素；基于事件冒泡机制确认发生事件的目标实际dom元素；记录发生的事件和目标实际dom元素。
9.作为本技术的进一步改进，利用预设监听事件监听待监听网页上发生的网页操作事件并保存，包括：利用预设监听事件监听待监听网页上发生的网页操作事件；将网页操作事件和页面信息存储至数据库中，并基于待监听页面的名称和网页操作事件发生的时间两个维度构建搜索索引。
10.作为本技术的进一步改进，接收到回放请求时，提取网页操作事件，并基于页面信息重建待监听网页的回放页面，包括：接收用户输入的查询信息，查询信息包括查询页面名称和查询时间；将查询页面名称和查询时间与搜索索引匹配，查询得到网页操作事件；基于页面信息重建待监听网页的回放页面。
11.作为本技术的进一步改进，网页操作事件包括dom元素变化、鼠标点击、鼠标移动、页面或元素移动、视窗大小变动、或输入框输入。
12.为解决上述技术问题，本技术采用的另一个技术方案是：提供一种网页操作回放装置，包括：获取模块，用于获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态；监听模块，用于利用预设监听事件监听待监听网页上发生的网页操作事件并保存；重建模块，用于接收到回放请求时，提取网页操作事件，并基于页面信息重建待监听网页的回放页面；回放模块，用于将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
13.为解决上述技术问题，本技术采用的再一个技术方案是：提供一种计算机设备，计算机设备包括处理器、与处理器耦接的存储器，存储器中存储有程序指令，程序指令被处理器执行时，使得处理器执行如上述中任一项的网页操作回放方法的步骤。
14.为解决上述技术问题，本技术采用的再一个技术方案是：提供一种存储介质，存储有能够实现上述网页操作回放方法的程序指令。
15.本技术的有益效果是：本技术的网页操作回放方法通过对待监听网页进行事件监听，记录并保存网页操作事件，且获取待监听网页的页面信息，在接收到回放请求后，根据该页面信息重建该待监听网页的回放页面，再将网页操作事件还原为模拟动画，再将该模拟动画在回放页面上进行回放，其保存的网页操作事件和页面信息均是字符串数据，占用空间小，远小于视频文件的大小，并且监听待监听网页的预设监听事件运行时占用的资源远小于视频录制软件运行时所占用的资源，降低了对资源的消耗。
附图说明
16.图1是本发明第一实施例的网页操作回放方法的流程示意图；
17.图2是本发明实施例的网页操作回放装置的功能模块示意图；
18.图3是本发明实施例的计算机设备的结构示意图；
19.图4是本发明实施例的存储介质的结构示意图。
具体实施方式
20.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完
整地描述，显然，所描述的实施例仅是本技术的一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.本技术中的术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”、“第三”的特征可以明示或者隐含地包括至少一个该特征。本技术的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。本技术实施例中所有方向性指示(诸如上、下、左、右、前、后
……
)仅用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
22.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
23.图1是本发明实施例的网页操作回放方法的流程示意图。需注意的是，若有实质上相同的结果，本发明的方法并不以图1所示的流程顺序为限。如图1所示，该方法包括步骤：
24.步骤s101：获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态信息。
25.需要说明的，dom元素信息指的是网页中所有元素的集合，包括图片、文字、视频等，前端开发会根据设计图布局编写相应的html标签元素，形成一定的嵌套布局，本实施例中，通过浏览器提供相应的api接口即可直接获取整个网页的dom元素信息,并且可以转化成方便存储的字符串类型数据。css样式信息是前端的一种实现网页视觉修饰的代码语言，例如网页的间距、宽高大小、排布布局、颜色等等，根据css样式，即可将dom元素信息组装为网页页面。html中无法反映的视图状态，例如input，textarea标签输入框输入后的值无法反映在html数据中，因此需要读取其value值并加以记录。
26.在步骤s101中，当用户打开一个网页时，若该网页为待监听网页，则获取该网页的页面信息，并保存该页面信息，通过该页面信息即可实现对待监听网页的重建。
27.步骤s102：利用预设监听事件监听待监听网页上发生的网页操作事件并保存。
28.进一步的，该网页操作事件包括dom元素变化、鼠标点击、鼠标移动、页面或元素移动、视窗大小变动、或输入框输入。具体地，还可与待监听网页相关的其他外设发生的事件，例如键盘操作事件等。
29.在步骤s102中，网页操作事件可通过js提供的监听事件来进行监听，对于每一种类型的网页操作事件，仅需记录回放该类型网页操作事件所需的数据，例如鼠标移动的记录、鼠标相对浏览器的水平和垂直相对位置，输入框输入时记录输入的数据，页面或元素滚动的记录页面横向和纵向卷曲大小的数据，视窗大小变动的记录当前浏览器的宽度和高度，通过这些数据即可还原出整个网页的视觉的变化过程。
30.需要说明的是，在监听到网页操作事件后，还需记录该网页操作事件的发生时间，在保存网页操作事件时，将网页操作事件按照时序关系依次保存，从而使得后续能够按照时序关系依次回放网页操作事件，真实反馈实际发生的网页操作事件。
31.进一步的，在一些实施例中，在保存网页操作事件后，还包括：对保存的网页操作事件进行增量统计，当网页操作事件的数据大小达到预设阈值时，对新增的网页操作事件的数据进行压缩，并将压缩后的数据上传至云服务器。
32.具体地，该预设阈值可由用户预先设置，当新增的网页操作事件的数据达到预设阈值时，将新增的网页操作事件的数据进行压缩，再将压缩后的数据上传至云服务器，并且，为了方便迅速查找对应的数据，在上传数据时，对数据进行命名，该命名包括新增的网页操作事件的发生时间段和待监听网页的名称，并以发生时间段和名称建立索引。当用户需要查询对应的网页操作事件的数据时，即可根据发生时间段和索引快速找到对应的数据下载后进行回放。
33.进一步的，在一些实施例中，该步骤s102具体包括：
34.1、检测到用户打开待监听网页时，开启预设监听事件以监听待监听页面发生的事件以及事件的发生时间。
35.2、检测到用户关闭待监听网页时，停止预设监听事件，根据监听到的事件以及事件的发生时间生成网页操作事件并保存。
36.具体地，在用户进入待监听网页时，即开始监听网页操作事件，在用户离开待监听网页时，即停止对该待监听网页的监听，再将该期间内所有的网页操作事件保存。需要理解的是，若对网页操作事件进行实时保存，则会占用大量的cpu资源进行处理，因此，本实施例中，不需要每次对网页操作事件进行实时保存，而是在用户关闭该待监听网页时，再对该期间发生的网页操作事件进行保存，从而降低对资源的占用和消耗。
37.进一步的，监听待监听页面发生的事件，包括：
38.1、监听到待监听网页发生操作时的目标顶层dom元素。
39.2、基于事件冒泡机制确认发生事件的目标实际dom元素。
40.具体地，事件冒泡机制是浏览器的一种事件监听机制，浏览器会在dom元素被某种事件触发的时候将这个事件信息通过元素嵌套向上层层传递到最顶层的dom元素。
41.3、记录发生的事件和目标实际dom元素。
42.具体地，网页中dom元素众多，若为每个dom元素均添加一个监听事件，则会占用大量资源，影响网页浏览时的性能，导致用户使用体验不佳，因此，本实施例中，根据浏览器事件冒泡机制，结合dom元素之间的节点关系，只需在最顶层dom元素添加对应的监听事件，然后对顶层dom元素进行监听即可，避免影响浏览器性能。
43.进一步的，在一些实施例中，该步骤s102具体包括：
44.1、利用预设监听事件监听待监听网页上发生的网页操作事件。
45.2、将网页操作事件和页面信息存储至数据库中，并基于待监听页面的名称和网页操作事件发生的时间两个维度构建搜索索引。
46.具体地，在利用预设监听事件监听得到网页操作事件后，将该网页操作事件存储至浏览器的indexeddb数据库中，再以待监听页面的名称和网页操作事件发生的事件两个维度建立搜索索引，通过该搜索索引，用户即可快速找到对应的网页操作事件。
47.步骤s103：响应于网页操作的回放请求，提取网页操作事件，并基于页面信息重建待监听网页的回放页面。
48.在步骤s103中，记录待监听网页的网页操作事件并保存之后，用户即可通过输入回放请求来回放网页操作事件，具体根据输入的回放请求，找到与之对应的网页操作事件，再根据获取的页面信息重建回放页面。
49.进一步的，在一些实施例中，该步骤s103具体包括：
50.1、接收用户输入的查询信息，查询信息包括查询页面名称和查询时间。
51.具体地，该查新页面名称即用户想要查看的网页，查询时间即发生网页操作事件的时间段。通过输入查询页面名称和查询时间即可找到对应时间段发生的网页操作事件。
52.2、将查询页面名称和查询时间与搜索索引匹配，查询得到网页操作事件。
53.3、基于页面信息重建待监听网页的回放页面。
54.具体地，数据库中可能存储有多个网页的网页操作事件，在用户需要进行回放操作时，接收用户输入的查询信息，该查询信息包括查询页面名称和查询时间，再将查询页面和查询事件与搜索索引进行匹配，以找到对应的网页操作事件，同时获取对应的网页的页面信息，以构建对应的回放页面。
55.进一步的，为了提高网页重建的效率，在一些实施例中，该步骤s103具体包括：
56.1、响应于网页操作的网页回放请求，利用正则表达式过滤掉页面信息中的script脚本标签。
57.需要说明的是，网页中的script脚本标签一般是引入页面中实现网页的交互功能、网络获取数据功能的js脚本文件，例如，通过网页链接打开新的网页页面操作等。对于网页操作事件回放阶段，其并不需要打开新的网页页面，在需要跳转至新的网页页面时，直接根据该网页的页面信息重建回放网页，然后再在该回放网页上继续回放网页操作事件即可，因此，该script脚本标签对后期回放视频没有作用，还可能会导致脚本报错，所以需要过滤掉。具体地，鉴于dom元素信息就是字符串数据，因此，本实施例中，通过正则表达式对页面信息中的script脚本标签进行过滤，该正则表达式预先由用户设置。
58.2、基于iframe沙盒功能，根据过滤后的页面信息重建回放页面。
59.需要说明的是，iframe中存在一个sandbox属性可以实现沙箱模式，通过给这个属性设值，可以限制iframe中能进行的操作，从而不影响父窗口的运行。
60.具体地，在过滤掉页面信息中的script脚本标签之后，再重建回放页面，该重建的回放页面不具备页面交互功能，并且在过滤掉script脚本标签后，重建回放页面的效率更高。
61.步骤s104：将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
62.在步骤s104中，在重建好回放页面后，将所述网页操作事件按预设规则生成模拟动画，例如，鼠标移动事件会根据记录的鼠标位置数据通过动画去模拟移动轨迹，鼠标点击事件会根据记录的鼠标点击位置数据通过闪烁的动画模拟点击，输入框输入事件则通过记录的事件输入数据和输入框dom元素信息对相应的输入框填入数据，滚动事件则通过页面卷曲数据通过js控制页面滚动，视窗大小变动事件则通过宽度和高度数据通过js控制窗口大小。需要说明的是，在生成模拟动画时，若是持续性的网页操作事件，则还需根据每个网页操作事件发生时的持续时长来生成模拟动画，使得模拟动画的时长与持续时长相同，例
如，当网页操作事件为鼠标在待监听页面上拖动某一元素时，该拖动过程为一持续性操作，则需记录该持续性操作的持续时长，在生成模拟动画时，使得生成的模拟动画的时长与该持续时长相同。在生成相应的模拟动画后，按照网页操作事件的发生时间，依次在待监听网页上播放相应的模拟动画，从而完成网页操作事件的回放。
63.本发明实施例的网页操作回放方法通过对待监听网页进行事件监听，记录并保存网页操作事件，且获取待监听网页的页面信息，在接收到回放请求后，根据该页面信息重建该待监听网页的回放页面，再将网页操作事件还原为模拟动画，再将该模拟动画在回放页面上进行回放，其保存的网页操作事件和页面信息均是字符串数据，占用空间小，远小于视频文件的大小，并且监听待监听网页的预设监听事件运行时占用的资源远小于视频录制软件运行时所占用的资源，降低了对资源的消耗。
64.图2是本发明实施例的网页操作回放装置的功能模块示意图。如图2所示，该装置20包括获取模块21、监听模块22、重建模块23和回放模块24。
65.获取模块21，用于获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态信息。
66.需要说明的，dom元素信息指的是网页中所有元素的集合，包括图片、文字、视频等，前端开发会根据设计图布局编写相应的html标签元素，形成一定的嵌套布局，本实施例中，通过浏览器提供相应的api接口即可直接获取整个网页的dom元素信息,并且可以转化成方便存储的字符串类型数据。css样式信息是前端的一种实现网页视觉修饰的代码语言，例如网页的间距、宽高大小、排布布局、颜色等等，根据css样式，即可将dom元素信息组装为网页页面。html中无法反映的视图状态，例如input，textarea标签输入框输入后的值无法反映在html数据中，因此需要读取其value值并加以记录。
67.监听模块22，用于利用预设监听事件监听待监听网页上发生的网页操作事件并保存。
68.具体的，网页操作事件可通过js提供的监听事件来进行监听，对于每一种类型的网页操作事件，仅需记录回放该类型网页操作事件所需的数据，例如鼠标移动的记录、鼠标相对浏览器的水平和垂直相对位置，输入框输入时记录输入的数据，页面或元素滚动的记录页面横向和纵向卷曲大小的数据，视窗大小变动的记录当前浏览器的宽度和高度，通过这些数据即可还原出整个网页的视觉的变化过程。
69.需要说明的是，在监听到网页操作事件后，还需记录该网页操作事件的发生时间，在保存网页操作事件时，将网页操作事件按照时序关系依次保存，从而使得后续能够按照时序关系依次回放网页操作事件，真实反馈实际发生的网页操作事件。
70.进一步的，在一些实施例中，在监听模块22保存网页操作事件后，监听模块22还用于：对保存的网页操作事件进行增量统计，当网页操作事件的数据大小达到预设阈值时，对新增的网页操作事件的数据进行压缩，并将压缩后的数据上传至云服务器。
71.具体地，该预设阈值可由用户预先设置，当新增的网页操作事件的数据达到预设阈值时，将新增的网页操作事件的数据进行压缩，再将压缩后的数据上传至云服务器，并且，为了方便迅速查找对应的数据，在上传数据时，对数据进行命名，该命名包括新增的网页操作事件的发生时间段和待监听网页的名称，并以发生时间段和名称建立索引。当用户需要查询对应的网页操作事件的数据时，即可根据发生时间段和索引快速找到对应的数据
下载后进行回放。
72.重建模块23，用于响应于网页操作的回放请求，提取网页操作事件，并基于页面信息重建待监听网页的回放页面。
73.具体地，记录待监听网页的网页操作事件并保存之后，用户即可通过输入回放请求来回放网页操作事件，具体根据输入的回放请求，找到与之对应的网页操作事件，再由重建模块23根据获取的页面信息重建回放页面。
74.回放模块24，用于将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
75.具体地，在重建模块23重建好回放页面后，回放模块24将所述网页操作事件按预设规则生成模拟动画，例如，鼠标移动事件会根据记录的鼠标位置数据通过动画去模拟移动轨迹，鼠标点击事件会根据记录的鼠标点击位置数据通过闪烁的动画模拟点击，输入框输入事件则通过记录的事件输入数据和输入框dom元素信息对相应的输入框填入数据，滚动事件则通过页面卷曲数据通过js控制页面滚动，视窗大小变动事件则通过宽度和高度数据通过js控制窗口大小。需要说明的是，在生成模拟动画时，若是持续性的网页操作事件，则还需根据每个网页操作事件发生时的持续时长来生成模拟动画，使得模拟动画的时长与持续时长相同，例如，当网页操作事件为鼠标在待监听页面上拖动某一元素时，该拖动过程为一持续性操作，则需记录该持续性操作的持续时长，在生成模拟动画时，使得生成的模拟动画的时长与该持续时长相同。在生成相应的模拟动画后，按照网页操作事件的发生时间，依次在待监听网页上播放相应的模拟动画，从而完成网页操作事件的回放。
76.本发明实施例的网页操作回放装置通过对待监听网页进行事件监听，记录并保存网页操作事件，且获取待监听网页的页面信息，在接收到回放请求后，根据该页面信息重建该待监听网页的回放页面，再将网页操作事件还原为模拟动画，再将该模拟动画在回放页面上进行回放，其保存的网页操作事件和页面信息均是字符串数据，占用空间小，远小于视频文件的大小，并且监听待监听网页的预设监听事件运行时占用的资源远小于视频录制软件运行时所占用的资源，降低了对资源的消耗。
77.可选地，重建模块23执行响应于网页操作的回放请求，提取网页操作事件，并基于页面信息重建待监听网页的回放页面的操作还可以为：响应于网页操作的回放请求，利用正则表达式过滤掉页面信息中的script脚本标签；基于iframe沙盒功能，根据过滤后的页面信息重建回放页面。
78.需要说明的是，网页中的script脚本标签一般是引入页面中实现网页的交互功能、网络获取数据功能的js脚本文件，例如，通过网页链接打开新的网页页面操作等。对于网页操作事件回放阶段，其并不需要打开新的网页页面，在需要跳转至新的网页页面时，直接根据该网页的页面信息重建回放网页，然后再在该回放网页上继续回放网页操作事件即可，因此，该script脚本标签对后期回放视频没有作用，还可能会导致脚本报错，所以需要过滤掉。具体地，鉴于dom元素信息就是字符串数据，因此，本实施例中，通过正则表达式对页面信息中的script脚本标签进行过滤，该正则表达式预先由用户设置。iframe中存在一个sandbox属性可以实现沙箱模式，通过给这个属性设值，可以限制iframe中能进行的操作，从而不影响父窗口的运行。
79.具体地，重建模块23在过滤掉页面信息中的script脚本标签之后，再重建回放页
面，该重建的回放页面不具备页面交互功能，并且在过滤掉script脚本标签后，重建回放页面的效率更高。
80.可选地，监听模块22执行利用预设监听事件监听待监听网页上发生的网页操作事件并保存的操作还可以为：检测到用户打开待监听网页时，开启预设监听事件以监听待监听页面发生的事件以及事件的发生时间；检测到用户关闭待监听网页时，停止预设监听事件，根据监听到的事件以及事件的发生时间生成网页操作事件并保存。
81.具体地，在用户进入待监听网页时，监听模块22开始监听网页操作事件，在用户离开待监听网页时，即停止对该待监听网页的监听，再将该期间内所有的网页操作事件保存。需要理解的是，若对网页操作事件进行实时保存，则会占用大量的cpu资源进行处理，因此，本实施例中，不需要每次对网页操作事件进行实时保存，而是在用户关闭该待监听网页时，再对该期间发生的网页操作事件进行保存，从而降低对资源的占用和消耗。
82.可选地，监听模块22执行监听待监听页面发生的事件的操作还可以为：监听到待监听网页发生操作时的目标顶层dom元素；基于事件冒泡机制确认发生事件的目标实际dom元素；记录发生的事件和目标实际dom元素。
83.需要说明的是，事件冒泡机制是浏览器的一种事件监听机制，浏览器会在dom元素被某种事件触发的时候将这个事件信息通过元素嵌套向上层层传递到最顶层的dom元素。
84.具体地，网页中dom元素众多，若为每个dom元素均添加一个监听事件，则会占用大量资源，影响网页浏览时的性能，导致用户使用体验不佳，因此，本实施例中，监听模块22根据浏览器事件冒泡机制，结合dom元素之间的节点关系，只需在最顶层dom元素添加对应的监听事件，然后对顶层dom元素进行监听即可，避免影响浏览器性能。
85.可选地，监听模块22执行利用预设监听事件监听待监听网页上发生的网页操作事件并保存的操作还可以为：利用预设监听事件监听待监听网页上发生的网页操作事件；将网页操作事件和页面信息存储至数据库中，并基于待监听页面的名称和网页操作事件发生的时间两个维度构建搜索索引。
86.具体地，在监听模块22利用预设监听事件监听得到网页操作事件后，将该网页操作事件存储至浏览器的indexeddb数据库中，再以待监听页面的名称和网页操作事件发生的事件两个维度建立搜索索引，通过该搜索索引，用户即可快速找到对应的网页操作事件。
87.可选地，重建模块23执行接收到回放请求时，提取网页操作事件，并基于页面信息重建待监听网页的回放页面的操作还可以为：接收用户输入的查询信息，查询信息包括查询页面名称和查询时间；将查询页面名称和查询时间与搜索索引匹配，查询得到网页操作事件；基于页面信息重建待监听网页的回放页面。
88.具体地，数据库中可能存储有多个网页的网页操作事件，在用户需要进行回放操作时，重建模块23接收用户输入的查询信息，该查询信息包括查询页面名称和查询时间，再将查询页面和查询事件与搜索索引进行匹配，以找到对应的网页操作事件，同时获取对应的网页的页面信息，以构建对应的回放页面。
89.可选地，网页操作事件包括dom元素变化、鼠标点击、鼠标移动、页面或元素移动、视窗大小变动、或输入框输入。
90.需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
91.请参阅图3，图3为本发明实施例的计算机设备的结构示意图。如图3所示，该计算机设备30包括处理器31及和处理器31耦接的存储器32，存储器32中存储有程序指令，程序指令被处理器31执行时，使得处理器31执行下述步骤：
92.获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态；
93.利用预设监听事件监听待监听网页上发生的网页操作事件并保存；
94.接收到回放请求时，提取网页操作事件，并基于页面信息重建待监听网页的回放页面；
95.将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
96.本实施例通过对待监听网页进行事件监听，记录并保存网页操作事件，且获取待监听网页的页面信息，在接收到回放请求后，根据该页面信息重建该待监听网页的回放页面，再将网页操作事件还原为模拟动画，再将该模拟动画在回放页面上进行回放，其保存的网页操作事件和页面信息均是字符串数据，占用空间小，远小于视频文件的大小，并且监听待监听网页的预设监听事件运行时占用的资源远小于视频录制软件运行时所占用的资源，降低了对资源的消耗。
97.其中，处理器31还可以称为cpu(central processing unit，中央处理单元)。处理器31可能是一种集成电路芯片，具有信号的处理能力。处理器31还可以是通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
98.参阅图4，图4为本发明实施例的存储介质的结构示意图。本发明实施例的存储介质存储有能够实现上述所有方法的程序指令41，当该程序指令41被执行时，实现如下步骤：
99.获取待监听网页的页面信息，页面信息包括dom元素信息、css样式信息以及html中无法反映的视图状态；
100.利用预设监听事件监听待监听网页上发生的网页操作事件并保存；
101.接收到回放请求时，提取网页操作事件，并基于页面信息重建待监听网页的回放页面；
102.将网页操作事件按预设规则生成模拟动画并在回放页面上回放。
103.本实施例通过对待监听网页进行事件监听，记录并保存网页操作事件，且获取待监听网页的页面信息，在接收到回放请求后，根据该页面信息重建该待监听网页的回放页面，再将网页操作事件还原为模拟动画，再将该模拟动画在回放页面上进行回放，其保存的网页操作事件和页面信息均是字符串数据，占用空间小，远小于视频文件的大小，并且监听待监听网页的预设监听事件运行时占用的资源远小于视频录制软件运行时所占用的资源，降低了对资源的消耗。
104.其中，该程序指令41可以以软件产品的形式存储在上述存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本技术各个实施方式所述方法的全部或部分步骤。而前述的存储介质包
括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质，或者是计算机、服务器、手机、平板等计算机设备设备。
105.在本技术所提供的几个实施例中，应该理解到，所揭露的计算机设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
106.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。以上仅为本技术的实施方式，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。