CN110865843A - 页面回溯、信息备份与问题解决方法、系统及设备 - Google Patents
页面回溯、信息备份与问题解决方法、系统及设备 Download PDFInfo
- Publication number
- CN110865843A CN110865843A CN201810904766.0A CN201810904766A CN110865843A CN 110865843 A CN110865843 A CN 110865843A CN 201810904766 A CN201810904766 A CN 201810904766A CN 110865843 A CN110865843 A CN 110865843A
- Authority
- CN
- China
- Prior art keywords
- page
- difference information
- user
- backtracking
- change
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 154
- 230000008569 process Effects 0.000 claims abstract description 70
- 238000012544 monitoring process Methods 0.000 claims abstract description 20
- 230000008859 change Effects 0.000 claims description 128
- 238000012545 processing Methods 0.000 claims description 26
- 230000001360 synchronised effect Effects 0.000 claims description 23
- 230000006870 function Effects 0.000 claims description 21
- 238000004422 calculation algorithm Methods 0.000 claims description 15
- 230000035772 mutation Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 22
- 230000000007 visual effect Effects 0.000 description 11
- 238000004590 computer program Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 5
- 230000003068 static effect Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 238000013024 troubleshooting Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000011664 signaling Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000012790 confirmation Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000011835 investigation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 238000010561 standard procedure Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请实施例提供一种页面回溯、信息备份与问题解决方法、系统及设备。其中，页面回溯方法包括如下的步骤：监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面，得到差异信息；将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。本申请实施例提供的技术方案能够让客服更快、更简单地解决用户反馈的问题。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种页面回溯、信息备份与问题解决方法、系统及设备。
背景技术
目前，在以电商、金融类业务等为代表的涉及面向终端消费者的业务领域中，服务提供方经常需要为终端消费者提供线上服务，例如：为用户解决其在运行过程中所遇到的故障问题。
现有技术中，服务提供方的客服人员在接收到用户反馈的问题时，只能通过前后端日志进行排查，这对客服人员的技术能力要求较高，并且排查效率较慢，难以快速解决用户反馈的问题。
发明内容
鉴于上述问题，提出了本申请以提供一种解决上述问题或至少部分解决上述问题的页面回溯、信息备份与问题解决方法、系统及设备。
于是，在本申请的一个实施例中，提供了一种页面回溯方法。该方法包括：
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
在本申请的又一个实施例中，提供了一种页面回溯方法。该方法，包括：
接收客户端发送的含有第一页面和第二页面差异信息的同步消息；
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程；
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到。
在本申请的又一个实施例中，提供了一种页面回溯系统。该系统，包括：
客户端，用于监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面，得到差异信息；将所述差异信息同步至目标设备端；
所述目标设备端，用于接收所述客户端发送的含有第一页面和第二页面差异信息的同步消息；根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程。
在本申请的又一个实施例中，提供了一种信息备份方法，适于用户侧客户端。该方法，包括：
监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
在本申请的又一个实施例中，提供了一种问题解决方法，适于客服侧客户端。该方法，包括：
接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求；
根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；
根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
在本申请的又一个实施例中，提供了一种服务系统。该系统，包括：
用户侧客户端，用于监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面，得到差异信息；将所述差异信息发送至服务端；
服务端，用于将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储；
客服侧客户端，用于接收所述用户侧客户端在所述用户遇到有关页面操作的问题时发送的询问请求；根据所述询问请求中携带的用户信息，从所述服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；根据所述至少一次操作前后页面的差异信息，回溯所述用户至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
在本申请的又一个实施例中，提供了一种客户端设备。该设备，包括：第一存储器和第一处理器，其中，
所述第一存储器，用于存储程序；
所述第一处理器，与所述第一存储器耦合，用于执行所述第一存储器中存储的所述程序，以用于：
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
在本申请的又一个实施例中，提供了一种电子设备。该设备，包括：第二存储器和第二处理器，其中，
所述第二存储器，用于存储程序；
所述第二处理器，与所述第二存储器耦合，用于执行所述第二存储器中存储的所述程序，以用于：
接收客户端发送的含有第一页面和第二页面差异信息的同步消息；
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程；
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到的。
在本申请的又一个实施例中，提供了一种电子设备。该电子设备，包括：第三存储器和第三处理器，其中，
所述第三存储器，用于存储程序；
所述第三处理器，与所述第三存储器耦合，用于执行所述第三存储器中存储的所述程序，以用于：
监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
在本申请的又一个实施例中，提供了一种电子设备。该电子设备，包括：第四存储器和第四处理器，其中，
所述第四存储器，用于存储程序；
所述第四处理器，与所述第四存储器耦合，用于执行所述第四存储器中存储的所述程序，以用于：
接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求；
根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；
根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明一实施例提供的页面回溯系统的结构框图；
图2为本发明一实施例提供的页面回溯方法的流程示意图；
图3为本发明又一实施例提供的页面回溯方法的流程示意图；
图4为本发明一实施例提供的第一DOM树结构的示意图；
图5为本发明一实施例提供的第二DOM树结构的示意图；
图6为本发明一实施例提供的服务系统的结构框图；
图7为本发明一实施例提供的信息备份方法的流程示意图；
图8为本发明又一实施例提供的问题解决方法的流程示意图；
图9为本发明一实施例提供的页面回溯装置的结构框图；
图10为本发明又一实施例提供的页面回溯装置的结构框图；
图11为本发明一实施例提供的信息备份装置的结构框图；
图12为本发明一实施例提供的问题解决装置的结构框图；
图13为本发明一实施例提供的客户端设备的结构框图；
图14为本发明一实施例提供的电子设备的结构框图；
图15为本发明又一实施例提供的电子设备的结构框图；
图16为本发明又一实施例提供的电子设备的结构框图。
具体实施方式
现有技术中，客服对用户反馈的问题只能通过前后端日志排查的方式来帮助解决用户的问题。这对客服要求较高，并且排查效率较慢，所以需要一种可视化重现用户操作步骤的方案来帮助客服更快，更简单的解决用户反馈的问题。
目前有一种基于状态机实现时间回溯的解决方案。即，页面构建所依赖的框架根据状态机的方式控制页面UI(User Interface，用户界面)的变化。例如，React(是一种用于构建用户界面的JAVASCRIPT库)，通过将不同时段的状态序列化后传输到远程目标设备端，然后在远程目标设备端中反向通过状态重现UI的变化。上述采用状态机实现实时回溯的方式，页面必须采用基于状态渲染UI的框架搭建。但是如果页面采用其他框架进行搭建，如jquery，kissy等，则完全不能采用此方案进行页面回溯，所以此方案不够通用。
为此，本申请实施例提供的技术方案提供了一种较为通用的页面回溯方案。
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。
在本发明的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在介绍本申请提供的页面回溯方法之前，先对本申请提供的所述方法所基于的系统架构进行说明。
如图1所示，本申请一实施例提供的页面回溯系统的结构示意图。如图1所示，本实施例提供的所述系统包括：客户端101和目标设备端102。
客户端101，用于监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面，得到差异信息；将所述差异信息同步至目标设备端102；
目标设备端102，用于接收所述客户端101发送的含有第一页面和第二页面差异信息的同步消息；根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程。
其中，同步消息指的是客户端同步过来的消息。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
本申请实施例提供的页面回溯系统中各组成单元，如客户端、目标设备端的具体工作流程及之间的信令交互将在以下各实施例中作进一步的说明。
图2示出了本申请一实施例提供的页面回溯方法的流程示意图。本申请实施例提供的所述方法适于客户端。其中，所述客户端可以是集成在终端上的一个具有嵌入式程序的硬件，也可以是安装在终端中的一个应用软件，还可以是嵌入在终端操作系统中的工具软件等，本申请实施例对此不作限定。该终端可以为手机、平板电脑、智能穿戴设备、车载智能设备等任意终端设备。具体的，如图2所示，所述方法包括：
201、监听到页面变化时，获取变化前的第一页面以及变化后的第二页面。
202、比对所述第一页面和所述第二页面，得到差异信息。
203、将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
上述201中，通常，页面变化是由用户的一次操作导致的，即用户在页面上触发了某种操作，会导致页面发生变化。例如：用户点击或滑动页面上的某一页面元素后，页面所展示的内容会发生变化或者页面会发生跳转。页面一旦发生变化，就会被监听到，从而去获取变化前的第一页面和变化后的第二页面。
上述202中，页面的本质就是HTML(HyperText Markup Language，超文本标记语言)，通过结合使用其他的web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。一个页面对应多个HTML文件。因此，本步骤中比对两个页面的差异，可采用比较两个页面的HTML文件得到。当然，在具体实施时，也可将两个页面转换为DOM(DocumentObjectModel，文档对象模型)树结构；然后采用diff算法得到两个页面对应的DOM树结构的最小操作路径集合，将最小操作路径集合作为所述差异信息。HTML DOM定义了访问和操作HTML文件的标准方法。HTML DOM把HTML文件呈现为带有元素、属性和文本的DOM树结构。
上述203中，将差异信息同步至目标设备端。目标设备端根据差异信息来重现第一页面变化至第二页面的过程。例如：根据差异信息对第一页面对应的第一DOM树结构进行更改操作，以得到第二页面对应的第二DOM树结构，从而实现第一页面到第二页面的变化过程的回溯。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
在一种可实现的方案中，当用户在页面上触发了导致页面DOM树结构发生变化的操作时，上述202“比对所述第一页面和所述第二页面，得到差异信息”可具体包括如下步骤：
2021、将所述第一页面转换为第一DOM树结构。
2022、将所述第二页面转换为第二DOM树结构。
2023、对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合。
2024、将所述最小操作路径集合作为所述差异信息。
上述2021和2022中，各种语言都有自己的DOM解析器。解析器的作用是完成结构化文件和DOM树结构之间的转换关系。因此，本实施例中可利用解析器实现将第一页面转换为第一DOM树结构，将第二页面转换为第二DOM结构的过程。
上述2023中，将第一DOM树结构和所述第二DOM树结构作为diff算法的入参，diff算法的出参即为从第一DOM树结构变化至所述第二DOM树结构所需要的最小操作路径集合。最小操作路径集合指的是从第一DOM树结构变化至所述第二DOM树结构所需的最小变动。其中，最小操作路径集合中包含至少一次DOM操作。对第一DOM树结构执行至少一次DOM操作后可得到第二DOM树结构。DOM操作包括但不限于删除DOM树结构中某父节点的一个子节点、为某父节点创建一个新的子节点或对某父节点下的多个子节点进行重新排序。
需要补充说明的是，通过Diff算法得到最小操作路径集合，可大幅度减少DOM操作次数，提高性能。Diff算法的具体处理过程可参见现有技术中的相应内容，此处不再详述。
上述2024中，将最小操作路径集合作为差异信息。因此，上述203中“目标设备端能根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程”可具体包括：根据最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构；根据所述第二DOM树结构，得到所述第二页面。最小化重绘的过程也即是对第一DOM树结构进行上述至少一次DOM操作的过程。
需进行页面回溯的情况大多发生在为远程通信场景中，因此为了便于远程传输，可先对差异信息进行序列化处理，之后再传输至目标设备端。即上述203中“将差异信息同步至目标设备端”，具体包括：
2031、对所述差异信息进行序列化处理，得到字符串。
2032、将所述字符串同步至所述目标设备端。
例如，在一具体应用实例中，所述差异信息可为Javascript对象。上述2031中对所述差异信息进行序列化处理，也即是对Javascript对象进行序列化处理，以将所述Javascript对象转换成JSON字符串。
进一步的，本申请提供的实施例可通过变动观察器Mutation Observer采用观察者模式来监听页面是否发生变化。Mutation Observer是用于替代mutation events(变动事件)的新API(Application Programming Interface，应用程序编程接口)，所有监听操作以及相应处理都是在其他脚本执行完成之后异步执行的，并且是所有变动触发之后，将变动记录在数组中，统一进行回调的。也就是说，DOM树结构发生变动以后,并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。可见，采用Mutation Observer来监听页面是否发生变化不会导致页面刷新被拖慢，更不会导致阻塞Javascript线程，甚至导致页面崩溃。具体地，本申请实施例还可包括：
204、使用变动观察器Mutation Observer构造函数，以新建一个实例。
205、为所述实例指定需要观察的对象。
206、调用并执行所述实例，以监听页面中所述对象是否发生变化。
上述205中，所述对象包括但不限于子元素childList、属性attributes、节点内容或节点文本characterData、子节点subtree中的一种或多种。可通过observer方法来为所述实例指定需要观察的对象，即想要观察哪一种对象，就在observer的option对象中指定它的值为true。例如：想要观察子元素childList和属性attributes，则将childList和attributes的值均赋为true。
由于页面对应的任何对象发生变化，都有可能会引起页面的变化。因此，可监听页面对应的所有对象是否发生变化。
此外，在新建一个实例之后，可指定这个实例的回调函数。即本申请实施例提供的所述方法还可包括：
207、为所述实例指定回调函数。
上述207中回调函数用于在页面发生变化时，获取第一页面和第二页面。即上述201中，“监听到页面变化时，获取变化前的第一页面以及变化后的第二页面”，可采用如下方法实现：监听到页面变化时，执行所述回调函数以获得所述第一页面及所述第二页面。具体地，可执行所述回调函数以获得所述第一页面对应的第一文档对象模型DOM树结构和所述第二页面对应的第二文档对象模型DOM树结构。
图3示出了本申请又一实施例提供的页面回溯方法的流程示意图。本实施例提供的所述方法适用于目标设备端。其中，所述目标设备端可以是集成在终端上的一个具有嵌入式程序的硬件，也可以是安装在终端中的一个应用软件，还可以是嵌入在终端操作系统中的工具软件等，本申请实施例对此不作限定。该终端可以为包括手机、平板电脑、台式电脑等任意终端设备。如图3所示，本实施例提供的所述方法包括：
301、接收客户端发送的含有第一页面和第二页面差异信息的同步消息。
302、根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程。
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到的。监听页面是否发生变化的方法、第一页面和第二页面的获取方法以及通过比对变化前的第一页面和变化后的第二页面得到差异信息的具体实现可参见上述实施例中的相应内容，此处不再赘述。同步消息指的是客户端同步过来的消息。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
进一步的，为了方便数据的传输，客户端在发送差异信息之前，对差异信息进行序列化处理以得到字符串，将字符串作为同步消息。即接收到的同步消息为字符串。上述302具体包括：
3021、对所述字符串进行反序列化处理，以得到所述差异信息。
3022、根据所述差异信息，回溯从所述第一页面变化至所述第二页面的过程。
上述3021中，字符串可为JSON字符串，对JSON字符串进行反序列化处理，以将JSON字符串转换成Javascript对象，Javascript对象即为差异信息。
其中，所述差异信息可为从所述第一页面对应的第一DOM树结构变化至所述第二页面对应的第二DOM树结构所需的最小操作路径集合。对第一DOM树结构和第二DOM树结构作diff算法比对，可得到最小操作路径集合。最小操作路径集合指的是从第一DOM树结构变化至所述第二DOM树结构所需的最小变动。其中，最小操作路径集合中包含至少一次DOM操作。对第一DOM树结构执行至少一次DOM操作后可得到第二DOM树结构。DOM操作包括但不限于删除DOM树结构中某父节点的一个子节点、为某父节点创建一个新的子节点或对某父节点下的多个子节点进行重新排序。
需要补充说明的是，通过Diff算法得到最小操作路径集合，可大幅度减少DOM操作次数，提高性能。Diff算法的具体处理过程可参见现有技术中的相应内容，此处不再详述。
因此，上述3022，可采用如下步骤实现：
S31、根据最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构。
S32、根据所述第二DOM树结构，得到所述第二页面。
上述S31中，最小操作路径集合中包括至少一次DOM操作。依次按照至少一次DOM操作中各DOM操作对第一DOM树结构执行更改操作，以得到第二DOM树结构。
为了方便理解，下面将结合图4和图5来做简单介绍。图4示意了一个第一页面对应的第一DOM树结构，图5示意了一个第二页面对应的第二DOM树结构。从第一DOM树结构转换到(即变化到)第二DOM树结构所需的最小操作路径集合H包括：删除根节点下的子节点A、为子节点D创建一个新的子节点A、为新创建的子节点A创建一个子节点B以及为新创建的子节点A创建一个子节点C。最小操作路径集合H可通过diff算法得到。得到最小操作路径集合H后，根据最小操作路径集合H对第一DOM树结构进行DOM操作处理，也即是：第一步：删除第一DOM树结构中根节点下的子节点A，第二步：在第一步的基础上为子节点D创建一个新的子节点A，第三步：在第二步的基础上为新创建的子节点A创建一个子节点B，第四步：在第三步的基础上为新创建的子节点A创建一个子节点C。
这里需要说明的是：本申请实施例各步骤的具体实现，在本实施例中未详细阐述的部分可参见上述各实施例中的相关内容，此处不再赘述。
在本申请的如下实施例中提供了一种离线化处理技术，即先将页面变化对应的差异信息进行备份存储，在后续需要进行回溯时，再从备份中提取出对应的差异信息进行回溯。在介绍本申请下述实施例提供的信息备份方法和问他解决方法之前，先对本申请提供的所述方法所基于的系统架构进行说明。
如图6所示，本申请又一实施例提供的服务系统的结构示意图。如图6所示，本实施例提供的所述系统包括：用户侧客户端601、服务端602、客服侧客户端603。其中，
用户侧客户端601，用于监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面，得到差异信息；将所述差异信息发送至服务端.
服务端602，用于将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
客服侧客户端603，用于接收所述用户侧客户端在所述用户遇到有关页面操作的问题时发送的询问请求；根据所述询问请求中携带的用户信息，从所述服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；根据所述至少一次操作前后页面的差异信息，回溯所述用户至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息发送至服务端进行备份，后续接收到用户发送的询问请求时，根据备份的差异信息进行页面变化过程的回溯。不仅实现了页面变化的可视化重现，还实现了页面回溯的离线化处理，离线化处理使得客服人员能够对过去的页面变化进行回溯。
本申请实施例提供的所述服务系统中各组成单元，如用户侧客户端、服务端、客服侧客户端的具体工作流程及之间的信令交互将在以下各实施例中作进一步的说明。
图7示出了本申请又一实施例提供的信息备份方法的流程示意图。本申请实施例提供的所述方法适于用户侧客户端。其中，所述用户侧客户端可以是集成在终端上的一个具有嵌入式程序的硬件，也可以是安装在终端中的一个应用软件，还可以是嵌入在终端操作系统中的工具软件等，本申请实施例对此不作限定。该终端可以为手机、平板电脑、智能穿戴设备、车载智能设备等任意终端设备。具体的，如图7所示，所述方法包括：
701、监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面。
702、比对所述第一页面和所述第二页面，得到差异信息。
703、将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
上述701中，通常页面变化是由用户的一次操作导致的，即用户在页面上触发了某种操作，会导致页面发生变化。例如：用户点击或滑动页面上的某一页面元素后，页面所展示的内容会发生变化或者页面会发生跳转。页面一旦发生变化，就会被监听到，从而去获取变化前的第一页面和变化后的第二页面。
获取第一页面和第二页面的具体实现以及上述702的具体实现可参见上述各实施例中相应内容，在此不再赘述。
上述703中，服务端将差异信息作为与所述用户关联的历史页面操作记录进行备份存储，以便于后续通过这种关联关系来获取对应的差异信息。差异信息中可携带有所述用户的用户信息，用户信息包括但不限于用户ID号、登陆名等。在备份存储差异信息时，将用户信息与差异信息进行关联存储，例如：将用户ID号与差异信息进行关联存储。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息发送至服务端进行备份，后续接收到用户发送的询问请求时，根据备份的差异信息进行页面变化过程的回溯。不仅实现了页面变化的可视化重现，还实现了页面回溯的离线化处理，离线化处理使得客服人员能够对过去的页面变化进行回溯。
在一种可实现的方案中，上述701中，“获取所述第一页面和变化后的第二页面”，具体为：获取所述第一页面对应的第一文档对象模型DOM树结构和所述第二页面对应的第二文档对象模型DOM树结构。相应的，上述702可采用如下步骤实现：比对所述第一页面和所述第二页面，得到差异信息，包括：
7021、将所述第一页面转换为第一DOM树结构。
7022、将所述第二页面转换为第二DOM树结构。
7023、对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合。
7024、将所述最小操作路径集合作为所述差异信息。
上述7021和7024可参见上述各实施例中的相应内容，在此不再赘述。
进一步的，为了减少传输中数据包的大小，可先对差异信息进行序列化处理，之后再传输至服务端。即上述703中“将所述差异信息发送至服务端”，可采用如下步骤实现：
7031、对所述差异信息进行序列化处理，得到字符串。
7032、将所述字符串同步至所述目标设备端。
其中，所述差异信息可为Javascript对象。上述7031中对所述差异信息进行序列化处理，也即是对Javascript对象进行序列化处理，以将所述Javascript对象转换成JSON字符串。
因此，服务端在接收到JSON字符串后，可对JSON字符串做反序列化处理，以得到Javascript对象，Javascript对象即为差异信息。将Javascript对象做为所述用户关联的历史页面操作记录进行备份存储。
此外，可通过Mutation Observer来监听页面是否发生变化。具体实现可参见上述各实施例中相应内容，在此不再赘述。
这里需要说明的是：本申请实施例各步骤的具体实现，在本实施例中未详细阐述的部分可参见上述各实施例中的相关内容，此处不再赘述。
图8示出了本申请又一实施例提供的问题解决方法的流程示意图。本申请实施例提供的所述方法适于客服侧客户端。其中，所述客服侧客户端可以是集成在终端上的一个具有嵌入式程序的硬件，也可以是安装在终端中的一个应用软件，还可以是嵌入在终端操作系统中的工具软件等，本申请实施例对此不作限定。该终端可以为手机、平板电脑、台式电脑等任意终端设备。如图8所示，该方法包括：
801、接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求。
802、根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录。
其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息。
803、根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
上述801中，用户侧客户端可在用户操作页面过程中遇到有关页面操作的问题(如BUG)时自动发送询问请求，或者，用户在遇到有关页面操作的问题时，用户侧客户端弹出反馈页面，以提示用户是否发送询问请求；用户侧客户端在接收到用户的确认操作时，发送询问请求。
上述802中，询问请求所携带的用户信息包括但不限于用户ID号、登陆名等。从服务端备份数据中获取与用户信息关联的历史页面操作记录。历史页面操作记录中记录有至少一次操作前后页面的差异信息。
至少一次操作包括用户在遇到页面操作的问题前预设时长内触发的所有操作，例如，预设时长为1min，用户在用户侧客户端启动运行到第20min时遇到页面操作问题，则至少一次操作包括第19min至第20min之间的用户的所有操作。或者，至少一次操作包括用户侧客户端启动后的用户的所有操作。本实施例对此不做限定。
但考虑到服务端数据存储量有限，可配置服务端每隔预设时间间隔或实时对备份数据做删减处理，只保留用户最后一次启动用户侧客户端后的至少一次操作前后页面的差异信息或只保留用户遇到页面操作问题前预设时长内的至少一次操作前后页面的差异信息。
上述803中，为了重现用户侧客户端的连贯页面变化，可按照至少一次操作的操作时间点的先后顺序依次根据至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程。即操作时间点靠前的一次操作页面的变化过程会被先回溯，操作时间点靠后的一次操作页面的变化过程会被后回溯。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息发送至服务端进行备份，在后续接收到用户发送的询问请求时，根据备份的差异信息进行页面变化过程的回溯。不仅实现了页面变化的可视化重现，还实现了页面回溯的离线化处理，离线化处理使得客服人员能够对过去的页面变化进行回溯。
至少一次操作页面的变化过程中的每一次操作页面的变化过程的回溯方法都是一致的。为了方便理解，下面仅对其中一次操作页面的变化过程的回溯过程做介绍：
至少一次操作前后页面的差异信息中的第一次操作前后页面的差异信息为从第一页面对应的第一DOM树结构变化至第二页面对应的第二DOM树结构所需的最小操作路径集合。根据所述第一次操作前后页面的差异信息，回溯所述用户进行所述第一次操作页面的变化过程，包括：
S81、根据所述最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构。
S82、根据所述第二DOM树结构，得到所述第二页面。
需要说明的是，上述第一次操作并非指代的是至少一次操作中的首次操作，而是指代至少一次操作中的任一次操作。有关上述步骤S81和S82的具体实现可参见上述各实施例中的相应内容，此处不再赘述。
这里需要说明的是：本申请实施例各步骤的具体实现，在本实施例中未详细阐述的部分可参见上述各实施例中的相关内容，此处不再赘述。
图9示出了本申请一实施例提供的页面回溯装置的结构示意图。如图9所示，所述页面回溯装置包括：第一获取模块11、第一比对模块12和第一发送模块13。其中，
第一获取模块11，用于包括监听到页面变化时，获取变化前的第一页面以及变化后的第二页面。
第一比对模块12，用于比对所述第一页面和所述第二页面，得到差异信息。
第一发送模块13，用于将所述差异信息同步至目标设备端，以使所述目标设备端能根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
进一步的，第一获取模块11，具体用于：获取所述第一页面对应的第一文档对象模型DOM树结构和所述第二页面对应的第二文档对象模型DOM树结构；以及
第一比对模块12，具体用于：对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合；将所述最小操作路径集合作为所述差异信息。
进一步的，第一发送模块13，具体用于：对所述差异信息进行序列化处理，得到字符串；将所述字符串同步至所述目标设备端。
进一步的，所述差异信息为Javascript对象；以及
第一发送模块13，具体用于：将所述Javascript对象转换成JSON字符串。
进一步的，上述装置，还包括：第一构造模块、第一指定模块和第一调用模块。其中，
第一构造模块，用于使用变动观察器Mutation Observer构造函数，以新建一个实例。
第一指定模块，用于为所述实例指定需要观察的对象。
第一调用模块，用于调用并执行所述实例，以监听页面中所述对象是否发生变化。
进一步的，所述对象包括以下至少一种：子元素、属性、节点内容或文本、子节点。
进一步的，上述装置，还包括：第二指定模块，用于为所述实例指定回调函数。以及第一获取模块11，具体用于：监听到页面变化时，执行所述回调函数以获得所述第一页面及所述第二页面。
这里需要说明的是：上述实施例提供的页面回溯装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图10示出了本申请另一实施例提供页面回溯装置的结构示意图。如图所示，所述页面回溯装置包括：第一接收模块21和第一回溯模块22。其中，
第一接收模块21，用于接收客户端发送的含有第一页面和第二页面差异信息的同步消息。
第一回溯模块22，用于根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程。其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到的。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息同步至目标设备端，实现目标设备端对页面变化过程的回溯，即实现页面变化的可视化重现，使得客服能够更快、更简单地解决用户反馈的问题。同时，还能降低对客服人员的技术水平要求以及客服人员的工作量。
进一步的，所述同步消息为字符串。第一回溯模块22，包括：第一处理单元和第一回溯单元。其中，
第一处理单元，用于对所述字符串进行反序列化处理，以得到所述差异信息。
第一回溯单元，用于根据所述差异信息，回溯从所述第一页面变化至所述第二页面的过程。
进一步的，所述差异信息为从所述第一页面对应的第一DOM树结构变化至所述第二页面对应的第二DOM树结构所需的最小操作路径集合；以及
第一回溯单元，具体用于：根据最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构；根据所述第二DOM树结构，得到所述第二页面。
这里需要说明的是：上述实施例提供的页面回溯装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图11示出了本申请另一实施例提供的信息备份装置的结构示意图。如图所示，所述信息备份装置包括：第二获取模块31、第二比对模块32和第二发送模块33。其中，
第二获取模块31，用于监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
第二比对模块32，用于比对所述第一页面和所述第二页面，得到差异信息；
第二发送模块33，用于将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息发送至服务端进行备份，后续接收到用户发送的询问请求时，根据备份的差异信息进行页面变化过程的回溯。不仅实现了页面变化的可视化重现，还实现了页面回溯的离线化处理，离线化处理使得客服人员能够对过去的页面变化进行回溯。
进一步的，第二获取模块31，具体用于：获取所述第一页面对应的第一文档对象模型DOM树结构和所述第二页面对应的第二文档对象模型DOM树结构；以及
第二比对模块32，具体用于：对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合；将所述最小操作路径集合作为所述差异信息。
进一步的，第二发送模块33，包括：第二处理单元和第二发送单元。其中，
第二处理单元，用于对所述差异信息进行序列化处理，得到字符串。
第二发送单元，用于将所述字符串发送至所述服务端。
这里需要说明的是：上述实施例提供的信息备份装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图12示出了本申请另一实施例提供的问题解决装置的结构示意图。如图所示，所述问题解决装置包括：第二接收模块41，第三获取模块42和第二回溯模块43。其中，
第二接收模块41，用于接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求。
第三获取模块42，用于根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息。
第二回溯模块43，用于根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
本申请实施例提供的技术方案，对变化前和变化后的页面做比对处理，以得到变化前和变化后的页面之间的差异信息。将差异信息发送至服务端进行备份，在后续接收到用户发送的询问请求时，根据备份的差异信息进行页面变化过程的回溯。不仅实现了页面变化的可视化重现，还实现了页面回溯的离线化处理，离线化处理使得客服人员能够对过去的页面变化进行回溯。
进一步的，所述至少一次操作前后页面的差异信息中的第一次操作前后页面的差异信息为从第一页面对应的第一DOM树结构变化至第二页面对应的第二DOM树结构所需的最小操作路径集合；以及第二回溯模块43，具体用于：根据所述最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构；根据所述第二DOM树结构，得到所述第二页面。
这里需要说明的是：上述实施例提供的问题解决装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。
图13为本申请一实施例提供的客户端设备的结构示意图。该客户端设备包括：第一存储器51和第一处理器52，其中，第一存储器51可被配置为存储其它各种数据以支持在客户端设备上的操作。这些数据的示例包括用于在客户端设备上操作的任何应用程序或方法的指令。第一存储器51可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第一处理器52，与所述第一存储器51耦合，用于执行所述第一存储器51中存储的所述程序，以用于：
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
其中，第一处理器52在执行第一存储器51中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图13所示，客户端设备还包括：第一通信组件53、第一显示器54、第一电源组件55、第一音频组件56等其它组件。图13中仅示意性给出部分组件，并不意味着客户端设备只包括图13所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的页面回溯方法步骤或功能。
图14为本申请一实施例提供的电子设备的结构示意图。该电子设备包括：第二存储器61和第二处理器62，其中，第二存储器61可被配置为存储其它各种数据以支持在远程设备上的操作。这些数据的示例包括用于在远程设备上操作的任何应用程序或方法的指令。第二存储器61可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第二处理器62，与所述第二存储器61耦合，用于执行所述第二存储器61中存储的所述程序，以用于：
接收客户端发送的含有第一页面和第二页面差异信息的同步消息；
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程；
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到的。
其中，第二处理器62在执行第二存储器61中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图14所示，电子设备还包括：第二通信组件63、第二显示器64、第二电源组件65、第二音频组件66等其它组件。图14中仅示意性给出部分组件，并不意味着电子设备只包括图14所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的页面回溯方法步骤或功能。
图15示出了本申请一实施例提供的电子设备的结构示意图。如图所示，所述电子设备包括第三存储器71以及第三处理器72。第三存储器71可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令。第三存储器71可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第三处理器72，与所述第三存储器71耦合，用于执行所述第二存储器71中存储的所述程序，以用于：
监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
其中，第三处理器72在执行第三存储器71中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图15所示，电子设备还包括：第三通信组件73、第三显示器74、第三电源组件75、第三音频组件76等其它组件。图15中仅示意性给出部分组件，并不意味着电子设备只包括图15所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的信息备份方法步骤或功能。
图16示出了本申请一实施例提供的电子设备的结构示意图。如图所示，所述电子设备包括第四存储器81以及第四处理器82。第四存储器81可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令。第四存储器81可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
所述第四处理器82，与所述第四存储器81耦合，用于执行所述第四存储器81中存储的所述程序，以用于：
接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求；
根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；
根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
其中，第四处理器82在执行第四存储器81中的程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面各实施例的描述。
进一步，如图16所示，电子设备还包括：第四通信组件83、第四显示器84、第四电源组件85、第四音频组件86等其它组件。图16中仅示意性给出部分组件，并不意味着电子设备只包括图16所示组件。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的问题解决方法步骤或功能。
终端可以以各种形式来实施。例如，本申请中描述的终端可以包括诸如移动电话、智能电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、导航装置等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。
在本申请的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。
Claims (21)
1.一种页面回溯方法，其特征在于，包括：
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
2.根据权利要求1所述的方法，其特征在于，比对所述第一页面和所述第二页面，得到差异信息，包括：
将所述第一页面转换为第一文档对象模型DOM树结构；
将所述第二页面转换为第二文档对象模型DOM树结构；
对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合；
将所述最小操作路径集合作为所述差异信息。
3.根据权利要求1所述的方法，其特征在于，将所述差异信息同步至目标设备端，包括：
对所述差异信息进行序列化处理，得到字符串；
将所述字符串同步至所述目标设备端。
4.根据权利要求3所述的方法，其特征在于，所述差异信息为Javascript对象；以及
对所述差异信息进行序列化处理，得到字符串，包括：
将所述Javascript对象转换成JSON字符串。
5.根据权利要求1至4中任一项所述的方法，其特征在于，还包括：
使用变动观察器Mutation Observer构造函数，以新建一个实例；
为所述实例指定需要观察的对象；
调用并执行所述实例，以监听页面中所述对象是否发生变化。
6.根据权利要求5所述的方法，其特征在于，所述对象包括以下至少一种：子元素、属性、节点内容或文本、子节点。
7.根据权利要求5所述的方法，其特征在于，在所述新建一个实例之后，还包括：
为所述实例指定回调函数；以及
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面，包括：监听到页面变化时，执行所述回调函数以获得所述第一页面及所述第二页面。
8.一种页面回溯方法，其特征在于，包括：
接收客户端发送的含有第一页面和第二页面差异信息的同步消息；
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程；
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到。
9.根据权利要求8所述的方法，其特征在于，所述同步消息为字符串；以及
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程，包括：
对所述字符串进行反序列化处理，以得到所述差异信息；
根据所述差异信息，回溯从所述第一页面变化至所述第二页面的过程。
10.根据权利要求9所述的方法，其特征在于，所述差异信息为从所述第一页面对应的第一DOM树结构变化至所述第二页面对应的第二DOM树结构所需的最小操作路径集合；以及
根据所述差异信息，回溯从所述第一页面变化至所述第二页面的过程，包括：
根据最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构；
根据所述第二DOM树结构，得到所述第二页面。
11.一种页面回溯系统，其特征在于，包括：
客户端，用于监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面得到差异信息；将所述差异信息同步至目标设备端；
所述目标设备端，用于接收所述客户端发送的含有第一页面和第二页面差异信息的同步消息；根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程。
12.一种信息备份方法，适于用户侧客户端，其特征在于，包括：
监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
13.根据权利要求12所述的方法，其特征在于，比对所述第一页面和所述第二页面，得到差异信息，包括：
将所述第一页面转换为第一DOM树结构；
将所述第二页面转换为第二DOM树结构；
对所述第一DOM树结构和所述第二DOM树结构做diff算法比对，得到从所述第一页面变化至所述第二页面所需的最小操作路径集合；
将所述最小操作路径集合作为所述差异信息。
14.根据权利要求12所述的方法，其特征在于，将所述差异信息发送至服务端，包括：
对所述差异信息进行序列化处理，得到字符串；
将所述字符串发送至所述服务端。
15.一种问题解决方法，适于客服侧客户端，其特征在于，包括：
接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求；
根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；
根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
16.根据权利要求15所述的方法，其特征在于，所述至少一次操作前后页面的差异信息中的第一次操作前后页面的差异信息为从第一页面对应的第一DOM树结构变化至第二页面对应的第二DOM树结构所需的最小操作路径集合；以及
根据所述第一次操作前后页面的差异信息，回溯所述用户进行所述第一次操作页面的变化过程，包括：
根据所述最小操作路径集合，对所述第一DOM树结构进行最小化重绘得到所述第二DOM树结构；
根据所述第二DOM树结构，得到所述第二页面。
17.一种服务系统，其特征在于，包括：
用户侧客户端，用于监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；比对所述第一页面和所述第二页面得到差异信息；将所述差异信息发送至服务端；
服务端，用于将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储；
客服侧客户端，用于接收所述用户侧客户端在所述用户遇到有关页面操作的问题时发送的询问请求；根据所述询问请求中携带的用户信息，从所述服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；根据所述至少一次操作前后页面的差异信息，回溯所述用户至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
18.一种客户端设备，其特征在于，包括：第一存储器和第一处理器，其中，
所述第一存储器，用于存储程序；
所述第一处理器，与所述第一存储器耦合，用于执行所述第一存储器中存储的所述程序，以用于：
监听到页面变化时，获取变化前的第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息同步至目标设备端，以使所述目标设备端根据所述差异信息回溯从所述第一页面变化至所述第二页面的过程。
19.一种电子设备，其特征在于，包括：第二存储器和第二处理器，其中，
所述第二存储器，用于存储程序；
所述第二处理器，与所述第二存储器耦合，用于执行所述第二存储器中存储的所述程序，以用于：
接收客户端发送的含有第一页面和第二页面差异信息的同步消息；
根据所述同步消息，回溯从所述第一页面变化至所述第二页面的过程；
其中，所述差异信息是在监听到页面变化时，通过比对变化前的所述第一页面与变化后的所述第二页面得到的。
20.一种电子设备，其特征在于，第三存储器和第三处理器，其中，
所述第三存储器，用于存储程序；
所述第三处理器，与所述第三存储器耦合，用于执行所述第三存储器中存储的所述程序，以用于：
监听到用户对第一页面进行一次操作后页面变化时，获取所述第一页面以及变化后的第二页面；
比对所述第一页面和所述第二页面，得到差异信息；
将所述差异信息发送至服务端，以由所述服务端将所述差异信息作为与所述用户关联的历史页面操作记录进行备份存储。
21.一种电子设备，其特征在于，包括：第四存储器和第四处理器，其中，
所述第四存储器，用于存储程序；
所述第四处理器，与所述第四存储器耦合，用于执行所述第四存储器中存储的所述程序，以用于：
接收用户侧客户端在用户遇到有关页面操作的问题时发送的询问请求；
根据所述询问请求中携带的用户信息，从服务端获取与所述用户关联的历史页面操作记录，其中，所述历史操作记录中记录有至少一次操作前后页面的差异信息；
根据所述至少一次操作前后页面的差异信息，回溯所述用户进行至少一次操作页面的变化过程，以由使用所述客服侧客户端的客服人员根据回溯过程为所述用户解决问题。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810904766.0A CN110865843B (zh) | 2018-08-09 | 2018-08-09 | 页面回溯、信息备份与问题解决方法、系统及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810904766.0A CN110865843B (zh) | 2018-08-09 | 2018-08-09 | 页面回溯、信息备份与问题解决方法、系统及设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110865843A true CN110865843A (zh) | 2020-03-06 |
| CN110865843B CN110865843B (zh) | 2024-03-26 |
Family
ID=69650827
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810904766.0A Active CN110865843B (zh) | 2018-08-09 | 2018-08-09 | 页面回溯、信息备份与问题解决方法、系统及设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110865843B (zh) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
| CN111741257A (zh) * | 2020-05-21 | 2020-10-02 | 深圳市商汤科技有限公司 | 数据处理方法及装置、电子设备及存储介质 |
| CN112015414A (zh) * | 2020-08-26 | 2020-12-01 | 支付宝(杭州)信息技术有限公司 | 页面构建方法及装置、基于区块链的数据处理方法及装置 |
| CN112241506A (zh) * | 2020-12-11 | 2021-01-19 | 支付宝(杭州)信息技术有限公司 | 用户行为的回溯方法、装置、设备及系统 |
| CN112631869A (zh) * | 2020-12-28 | 2021-04-09 | 深圳市彬讯科技有限公司 | 页面加载数据监控方法、装置、计算机设备及存储介质 |
| CN112800146A (zh) * | 2021-02-02 | 2021-05-14 | 北京互金新融科技有限公司 | 风控数据的回溯方法及装置、存储介质和处理器 |
| CN113127129A (zh) * | 2021-05-08 | 2021-07-16 | 口碑(上海)信息技术有限公司 | 数据初始化方法、装置、计算机设备及可读存储介质 |
| CN113656119A (zh) * | 2021-07-14 | 2021-11-16 | 深圳万物安全科技有限公司 | 一种通过dom节点回溯用户操作的方法及系统 |
| CN113760825A (zh) * | 2021-09-16 | 2021-12-07 | 平安医疗健康管理股份有限公司 | 可视化用户操作回溯方法、装置、计算机设备及存储介质 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101169716A (zh) * | 2007-11-30 | 2008-04-30 | 清华大学 | 一种基于产品结构树的仿真流程信息建模及维护方法 |
| US20110035433A1 (en) * | 2009-08-07 | 2011-02-10 | Hitachi, Ltd. | Webpage display method, computer system, and program |
| CN103544213A (zh) * | 2013-09-16 | 2014-01-29 | 青岛英网资讯股份有限公司 | 网站内容更新检测评价方法及系统 |
| EP3021550A1 (en) * | 2014-11-13 | 2016-05-18 | Nicolo Pastore | System and method for identifying internet attacks |
| CN105630843A (zh) * | 2014-11-17 | 2016-06-01 | 广州市动景计算机科技有限公司 | 网页变化监控方法及装置 |
| CN106446118A (zh) * | 2016-09-19 | 2017-02-22 | 中国南方电网有限责任公司信息中心 | 一种页面变更模版自动生成方法 |
| CN107562600A (zh) * | 2017-08-23 | 2018-01-09 | 广州阿里巴巴文学信息技术有限公司 | 页面检测方法、装置、计算设备以及存储介质 |
| CN108073828A (zh) * | 2016-11-16 | 2018-05-25 | 阿里巴巴集团控股有限公司 | 一种网页防篡改方法、装置及系统 |
| CN108255898A (zh) * | 2017-02-20 | 2018-07-06 | 平安科技（深圳）有限公司 | 页面显示方法和装置 |
| CN108334429A (zh) * | 2017-01-19 | 2018-07-27 | 阿里巴巴集团控股有限公司 | 用于排查前端页面问题的方法、装置及系统 |
-
2018
- 2018-08-09 CN CN201810904766.0A patent/CN110865843B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101169716A (zh) * | 2007-11-30 | 2008-04-30 | 清华大学 | 一种基于产品结构树的仿真流程信息建模及维护方法 |
| US20110035433A1 (en) * | 2009-08-07 | 2011-02-10 | Hitachi, Ltd. | Webpage display method, computer system, and program |
| CN103544213A (zh) * | 2013-09-16 | 2014-01-29 | 青岛英网资讯股份有限公司 | 网站内容更新检测评价方法及系统 |
| EP3021550A1 (en) * | 2014-11-13 | 2016-05-18 | Nicolo Pastore | System and method for identifying internet attacks |
| CN105630843A (zh) * | 2014-11-17 | 2016-06-01 | 广州市动景计算机科技有限公司 | 网页变化监控方法及装置 |
| CN106446118A (zh) * | 2016-09-19 | 2017-02-22 | 中国南方电网有限责任公司信息中心 | 一种页面变更模版自动生成方法 |
| CN108073828A (zh) * | 2016-11-16 | 2018-05-25 | 阿里巴巴集团控股有限公司 | 一种网页防篡改方法、装置及系统 |
| CN108334429A (zh) * | 2017-01-19 | 2018-07-27 | 阿里巴巴集团控股有限公司 | 用于排查前端页面问题的方法、装置及系统 |
| CN108255898A (zh) * | 2017-02-20 | 2018-07-06 | 平安科技（深圳）有限公司 | 页面显示方法和装置 |
| CN107562600A (zh) * | 2017-08-23 | 2018-01-09 | 广州阿里巴巴文学信息技术有限公司 | 页面检测方法、装置、计算设备以及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 冯菲菲等: "基于Webpack及React技术的Scratch互动在线学习平台设计", vol. 14, no. 20, pages 3 * |
| 喻潇;王捷;刘畅;: "基于可视化的Web漏洞分析", no. 07 * |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
| CN111741257B (zh) * | 2020-05-21 | 2022-01-28 | 深圳市商汤科技有限公司 | 数据处理方法及装置、电子设备及存储介质 |
| CN111741257A (zh) * | 2020-05-21 | 2020-10-02 | 深圳市商汤科技有限公司 | 数据处理方法及装置、电子设备及存储介质 |
| CN112015414A (zh) * | 2020-08-26 | 2020-12-01 | 支付宝(杭州)信息技术有限公司 | 页面构建方法及装置、基于区块链的数据处理方法及装置 |
| CN112241506A (zh) * | 2020-12-11 | 2021-01-19 | 支付宝(杭州)信息技术有限公司 | 用户行为的回溯方法、装置、设备及系统 |
| CN112241506B (zh) * | 2020-12-11 | 2021-04-09 | 支付宝(杭州)信息技术有限公司 | 用户行为的回溯方法、装置、设备及系统 |
| CN112631869A (zh) * | 2020-12-28 | 2021-04-09 | 深圳市彬讯科技有限公司 | 页面加载数据监控方法、装置、计算机设备及存储介质 |
| CN112631869B (zh) * | 2020-12-28 | 2023-01-17 | 深圳市彬讯科技有限公司 | 页面加载数据监控方法、装置、计算机设备及存储介质 |
| CN112800146A (zh) * | 2021-02-02 | 2021-05-14 | 北京互金新融科技有限公司 | 风控数据的回溯方法及装置、存储介质和处理器 |
| CN112800146B (zh) * | 2021-02-02 | 2024-05-14 | 北京互金新融科技有限公司 | 风控数据的回溯方法及装置、存储介质和处理器 |
| CN113127129A (zh) * | 2021-05-08 | 2021-07-16 | 口碑(上海)信息技术有限公司 | 数据初始化方法、装置、计算机设备及可读存储介质 |
| CN113656119A (zh) * | 2021-07-14 | 2021-11-16 | 深圳万物安全科技有限公司 | 一种通过dom节点回溯用户操作的方法及系统 |
| CN113760825A (zh) * | 2021-09-16 | 2021-12-07 | 平安医疗健康管理股份有限公司 | 可视化用户操作回溯方法、装置、计算机设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110865843B (zh) | 2024-03-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110865843B (zh) | 页面回溯、信息备份与问题解决方法、系统及设备 | |
| US20230177062A1 (en) | Generating files for visualizing query results | |
| CN107491488B (zh) | 页面数据采集的方法和装置 | |
| US20190372868A1 (en) | Identification of network issues by correlation of cross-platform performance data | |
| US9420068B1 (en) | Log streaming facilities for computing applications | |
| US9208141B2 (en) | Generating and displaying active reports | |
| US10769137B2 (en) | Integration query builder framework | |
| CN111190888A (zh) | 一种管理图数据库集群的方法和装置 | |
| CN107766509B (zh) | 一种网页静态备份的方法和装置 | |
| CN109829121B (zh) | 一种点击行为数据上报的方法和装置 | |
| CN110263070A (zh) | 事件上报方法及装置 | |
| US9509560B2 (en) | Unified configuration for cloud integration | |
| CN113505302A (zh) | 支持动态获取埋点数据的方法、装置、系统及电子设备 | |
| US20130290934A1 (en) | Monitoring applications executing on a computer device using programmatic triggers | |
| CN114553709A (zh) | 拓扑关系展示方法及相关设备 | |
| CN112799741A (zh) | 一种应用程序分身方法、装置、电子设备及存储介质 | |
| US11615363B2 (en) | Digital chat conversation and virtual agent analytics | |
| US10644971B2 (en) | Graph search in structured query language style query | |
| US20150199247A1 (en) | Method and system to provide a unified set of views and an execution model for a test cycle | |
| CN106406842A (zh) | 一种网页上柱状图的显示方法和系统 | |
| US9374437B2 (en) | Schema validation proxy | |
| CN113485909A (zh) | 测试方法、装置、计算设备以及介质 | |
| US20140337728A1 (en) | Operating oracle forms using a web service | |
| CN109756393B (zh) | 信息处理方法、系统、介质和计算设备 | |
| CN107704491B (zh) | 消息处理方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |