一种基于浏览器DOM的用户行为回溯方法、系统和存储介质与流程

一种基于浏览器dom的用户行为回溯方法、系统和存储介质
技术领域
1.本技术实施例涉及数据处理的技术领域，具体而言，涉及一种基于浏览器dom的用户行为回溯方法、系统和存储介质。


背景技术：

2.对用户在浏览器上的行为回溯是至关重要，记录回溯用户行为时通过采集用户之前的操作并可以回溯查看，进而可以对出现错误的操作进行及时地分析和反馈、或者通过跟进用户的操作习惯，为用户推荐个性化服务及优化系统等方面都具有关键的应用价值。
3.现有的绝大部分记录回溯用户行为的方法都是通过摄像头来做屏幕录制并上传，通过对视频进行回放来实现的，但是这种通过视频流的方式记录用户行为的方法消耗了大量的的网络资源，如带宽或流量等，并且由于视频的数据包的体积过大，上传的过程缓慢，若是在网速较慢的时候，很容易导致上传失败等问题，从而使得整个追溯过程效率降低。


技术实现要素：

4.本技术实施例提供一种基于浏览器dom的用户行为回溯方法、系统和存储介质，旨在提高用户行为的追溯效率。
5.第一方面，本技术实施例提供一种基于浏览器dom的用户行为回溯方法，所述方法包括：
6.获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储，其中，所述每个界面对应的dom增量表征为与上一界面的dom变化；
7.根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。
8.可选地，获取针对目标浏览器进行操作后的多个界面各自对应的dom增量，包括：
9.每隔第一标定时间间隔，获取当前界面对应的实时dom；
10.确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量。
11.可选地，获取针对目标浏览器进行操作后的多个界面各自对应的dom增量，包括：
12.响应于目标操作指令，获取当前界面对应的实时dom；
13.确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量；
14.其中，所述目标操作指令是响应于设置操作选择的一个或多个操作指令。
15.可选地，在上传之前，所述方法包括：
16.对所述目标浏览器的初始界面对应的dom全量，以及所述多个界面各自对应的dom增量进行序列化处理；
17.基于初始界面对应的dom全量以及所述多个界面各自对应的dom增量，对每个界面的dom的节点进行序列化处理。
18.可选地，在序列化处理后，所述方法包括：
19.基于mutationobserver监听dom的变化，并将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式进行缓存；
20.每隔第二预设时间间隔，将当前缓存的josn文件的上传至服务器。
21.可选地，根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，包括：
22.响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量；
23.基于所述初始界面对应的dom全量与所述多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；
24.根据所述第一界面的dom全量与所述多个界面中第二界面对应的dom增量，叠加生成所述第二界面的dom全量；
25.直到依次生成所述多个界面中每个界面各自对应的dom全量；
26.根据所述多个界面中每个界面各自对应的dom全量，显示所述目标浏览器经过操作后的多个完整界面。
27.可选地，依次动态显示所述目标浏览器经过操作后的多个完整界面，包括：
28.在依次重建所述目标浏览器经过操作后的多个完整界面时进行录屏，生成针对目标浏览器的操作行为的视频；
29.或，启动浏览器进程以显示重建后的多个完整界面，并进行录屏，生成针对目标浏览器的操作行为的视频。
30.第二方面，本技术实施例提供一种基于浏览器dom的用户行为回溯系统，所述系统包括：
31.录制模块，用于获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储，其中，所述每个界面对应的dom增量表征为与上一界面的dom变化；
32.回放模块，用于根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。
33.可选地，所述录制模块包括：
34.第一获取单元，用于每隔第一标定时间间隔，获取当前界面对应的实时dom；
35.第一确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量。
36.可选地，所述录制模块包括：
37.第二获取单元，用于响应于目标操作指令，获取当前界面对应的实时dom；
38.第二确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量；其中，所述目标操作指令是响应于设置操作选择的一个或多个操作指令。
39.可选地，所述录制模块包括：
40.第一序列化单元，用于对所述目标浏览器的初始界面对应的dom全量，以及所述多个界面各自对应的dom增量进行序列化处理；
41.第二序列化单元，用于基于初始界面对应的dom全量以及所述多个界面各自对应的dom增量，对每个界面的dom的节点进行序列化处理。
42.可选地，所述录制模块包括：
43.监听单元，用于基于mutationobserver监听dom的变化，并将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式进行缓存；
44.上传单元，用于每隔第二预设时间间隔，将当前缓存的josn文件的上传至服务器。
45.可选地，所述回放模块包括：
46.调用单元，用于响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量；
47.重建单元，用于基于所述初始界面对应的dom全量与所述多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；根据所述第一界面的dom全量与所述多个界面中第二界面对应的dom增量，叠加生成所述第二界面的dom全量；直到依次生成所述多个界面中每个界面各自对应的dom全量；
48.显示单元，用于根据所述多个界面中每个界面各自对应的dom全量，显示所述目标浏览器经过操作后的多个完整界面。
49.可选地，所述回放模块包括：
50.第一视频生成单元，用于在依次重建所述目标浏览器经过操作后的多个完整界面时进行录屏，生成针对目标浏览器的操作行为的视频；
51.或，第二视频生成单元，用于启动浏览器进程以显示重建后的多个完整界面，并进行录屏，生成针对目标浏览器的操作行为的视频。
52.第三方面，本技术实施例提供一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如实施例第一方面所述的基于浏览器dom的用户行为回溯方法。
53.有益效果：
54.在记录用户的操作行为时，首先获取客户端上目标浏览器在未操作时的初始界面对应的dom全量，然后获取针对目标浏览器进行操作后的多个界面各自对应的dom增量，将初始界面对应的dom全量和dom增量上传服务器进行存储，对于目标浏览器的操作只上传dom增量，可以有效减少传输的数据量，提高数据传输的效率，减少数据上传失败的问题，从而提高用户行为的追溯效率。
55.在回放用户的操作行为时，根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，从而可以动态地显示用户针对目标浏览器的操作行为。
附图说明
56.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例的描述中所
需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
57.图1是本技术一实施例提出的基于浏览器dom的用户行为回溯方法的步骤流程图；
58.图2是本技术一实施例提出的基于浏览器dom的用户行为回溯系统的功能模块图。
具体实施方式
59.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
60.对用户在浏览器上的行为回溯可以对出现错误的操作进行及时地分析和反馈、或者通过跟进用户的操作习惯，为用户推荐个性化服务及优化系统等方面都具有关键的应用价值。
61.现有的绝大部分记录回溯用户行为的方法都是通过摄像头来做屏幕录制并上传，通过对视频进行回放来实现的，但是这种通过视频流的方式记录用户行为的方法消耗了大量的的网络资源，如带宽或流量等，并且由于视频的数据包的体积过大，上传的过程缓慢，若是在网速较慢的时候，很容易导致上传失败等问题，从而使得整个追溯过程效率降低；也有一些基于浏览器页面dom的方法，但是页面整体的dom其实也非常庞大，数据传输依旧效率低下，从而导致整个回溯流程耗时增加，效率降低。
62.基于此，本技术实施例提供一种基于浏览器dom的用户行为回溯方法。
63.参照图1，示出了本技术实施例中提供的一种基于浏览器dom的用户行为回溯方法的步骤流程图，所述方法具体可以包括以下步骤：
64.s101：获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储。
65.目标浏览器的客户端，如手机或电脑上的呈现可以多种形式的，例如web、app或小程序等；文档对象模型(document object model，dom)包含了浏览器整个界面的信息，也就是用户看到的浏览器页面的效果。
66.在用户运行目标浏览器时，在用户尚未进行操作时，获取目标浏览器的初始界面的dom全量，根据初始界面的dom全量可以得到初始界面所有呈现的界面元素。
67.当用户在目标浏览器上开始操作时，会导致界面出现变化，例如触发某控件改变界面元素，或者鼠标移动、点击或滚动等操作均会导致dom状态出现变化，本实施例中，获取的是经过操作后的多个界面对应的dom增量，每个界面对应的dom增量表征为与上一界面的dom变化。
68.获取基于操作行为导致的dom变化后的dom增量时，可以通过实时获取的方式捕捉每次dom变化的过程，但是实际上用户在浏览器界面上的操作频率并不是连续不断，因此为了减少产生的数据量，可以间隔获取界面对应的dom，并得到该界面的dom增量。
69.在一种可行的实施方式中，获取dom增量时，可以每隔第一标定时间间隔，获取当前界面对应的实时dom，然后确定当前界面对应的实时dom与上一个界面的实时dom的变化，
作为所述当前界面对应的dom增量。
70.示例地，第一标定时间间隔可以为5s，即每隔5s获取一次当前界面的实时dom，然后与上一次获取的界面的实施dom进行比较，即可获得当前界面对应的dom增量，在这5s内用户可能进行操作导致页面出现了变化，也可以能没有进行任何操作，若是没有进行任何操作就不会导致dom出现变化，也就没有所谓的dom增量，则针对当前界面可以不产生任何数据，从而可以进一步减少数据量；在具体实施时，第一标定时间间隔可以根据实际需求进行适应性设置。
71.在另一种可行的实施方式中，在获取dom增量时，若是由于业务需求，只需要对用户的部分行为进行分析与回溯，可以设置一个或多个目标操作指令，目标操作指令可以根据行为回溯业务的不同而不同，也可以由用户根据其隐私需求设置允许被回溯的目标操作指令；然后每当响应于目标操作指令，获取当前界面对应的实时dom，然后再确定当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量，从而可以不遗漏目标操作指令，只要执行了目标操作指令，就记录对应界面的dom增量，从而可以将目标操作指令的行为进行记录。
72.获取到初始页面的对应的dom全量或多个界面对应的dom增量后，客户端对初始页面的对应的dom全量和多个界面对应的dom增量进行序列化处理，并对dom的节点进行序列化处理。
73.如果仅仅需要在本地录制和回放浏览器中用户的操作行为，可以简单地通过深拷贝dom来实现当前界面的保存，然后再用requestanimationframe进行播放即可，但是在将数据上传服务器时，为了减少数据传输量，可以将dom通过序列化保存为json文件的形式进行数据传输，json(javascript object notation，js对象简谱)是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得json成为理想的数据交换语言，不仅易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
74.在实际实施时，对dom进行序列化时，包括执行以下过程：
75.a、去脚本化处理；这样做的目的一是为了一个安全的沙盒环境，二是由于没必要执行script，因为用户的操作行为事件的逻辑处理已经可以体现在dom的更新或者增量变化中了，并且可以通过mutationobserver api监听到dom的变化，因此不需要脚本形式；
76.b、处理form表单，对于input的值根据type类型，可能会设置在value/checked/selected等属性上，需要单独记录；
77.c、资源路径转换为绝对路径；由于可能存在无法确认客户端的文件目录结构，因此采用将资源路径转化为绝对路径的方式，在实际实施的过程中，在起始阶段生成source map文件的时候，也可以采用设置绝对路径的方式。
78.d、对样式进行内联，可以避免额外请求资源，从而可以保证回放体验。
79.dom中包含有多个dom节点，dom节点映射为浏览器界面中的元素对象，除了对整个dom节点进行序列化，还需要对每个dom节点进行序列化。
80.dom呈现树形结构，构成dom树的基本要素是节点，而文档的结构就是由层次化的节点组成；在dom树中，整个文档就是一个文档节点，称为document节点，文档节点对应的为根元素；根元素的下一级节点可以为head或body；根元素下级节点的下级节点可以还是元
素节点，直至元素节点为文本或属性节点。
81.本实施例在对dom节点进行序列化的过程中，采用serializenode方法，依据nodetype判断节点的类型，依次序列化节点，其中：
82.对于document节点，由compatmode判断文档的渲染模式是否为标准模式；对于文档类型节点，即documenttype节点，则直接返回节点的基本信息，如name，type，publicid和systemidd；对于元素节点，采用调用transformattribute方法，把标签上的属性转换为绝对路径；将link引入的远程样式转换为inlinestylesheet；并对表单元素处理，如input、textarea以及select等元素，记录其value或者checked；对option元素记录selected属性；对于占位元素，只需记录dom元素的宽高，重绘时用空div占位。
83.将dom以及dom中的节点进行序列化，可以使得数据存储时更加清晰有序，减少了在大量的数据中不断选取数据的过程，基于序列化后的dom和dom节点，可以方便地叠加dom增量，从而显示出界面在操作行为下的变化。
84.但是将dom和dom节点序列化后，需要判断dom的变化，本实施例中采用dom变动观察器mutationobserver监听dom的变化，在实际实施时，为了避免遗漏dom节点，需要遍历所有的子节点，然后使用set节后进行去重。
85.由于dom的关联关系是通过parentid和nextid建立起来的，方便绘制界面，但是在对dom节点进行序列化时，会出现有dom节点的父节点、或下一个兄弟节点尚未被序列化，从而有些节点不具有id，因此本实施例中采用维护一个双向链表，遍历addedset中节点依次添加到双向链表中，最后倒序遍历链表，从而依次序列化节点。
86.在实际实施时，可以现将将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式缓存在客户端，然后每隔第二预设时间间隔，将当前缓存的josn文件的批量上传至服务器进行存储。
87.s102：根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。
88.将数据上传至服务器中存储时，若是需要对用户的操作行为进行回溯时，响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，由于为了减少数据传输量，提高传输效率，向服务器上传的是dom增量，无法根据dom增量还原完整的界面，因此需要根据多个界面的dom增量进行叠加生成多个界面各自对应的完整的dom全量。
89.具体地，根据存储在服务器中的json文件格式的数据，通过逆向执行序列化，即反序列化；然后基于初始界面对应的dom全量与多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；根据第一界面的dom全量与多个界面中第二界面对应的dom增量，叠加生成第二界面的dom全量；依次执行这个过程，直到依次生成多个界面中每个界面各自对应的dom全量，凭借多个界面各自对应的dom全量即可显性化地显示目标浏览器在用户操作下变化的多个完整界面。
90.通过对目标浏览器在用户操作下变化的多个完整界面进行动态显示，可以展示用户在目标浏览器上的操作行为。
91.在实际实施时，用户的操作行为入库供调用的是录像形式，因此需要对根据每个
界面的dom全量生成的多个界面的动态显示进行录屏，可以是采用通过在依次重建所述目标浏览器经过操作后的多个完整界面时，基于ffmpeg等视频程序进行录屏，生成针对目标浏览器的操作行为的视频；或者，通过java启动一个浏览器进程以显示重建后的多个完整界面，同时进行录屏，生成针对目标浏览器的操作行为的视频。
92.本方法通过记录目标浏览器在初始页面的dom全量，然后间隔在某个特定时刻或某个操作指令下获取dom的变化作为一个增量的sanpshot，在进行回放时，在初始页面的dom全量的基础上，不断加入根据行为解析的dom增量数据，构建了后续界面的的snapshot，比起现有的通过上传视频流的方法，本方法对于目标浏览器的操作只上传dom增量，可以有效减少传输的数据量，提高数据传输的效率，减少数据上传失败的问题，从而提高用户行为的追溯效率，同时还可以提高采集的精度。
93.参照图2，示出了本技术实施例提供的一种基于浏览器dom的用户行为回溯系统的功能模块图，所述系统包括：
94.录制模块100，用于获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储，其中，所述每个界面对应的dom增量表征为与上一界面的dom变化；
95.回放模块200，用于根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。
96.可选地，所述录制模块包括：
97.第一获取单元，用于每隔第一标定时间间隔，获取当前界面对应的实时dom；
98.第一确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量。
99.可选地，所述录制模块包括：
100.第二获取单元，用于响应于目标操作指令，获取当前界面对应的实时dom；
101.第二确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量；其中，所述目标操作指令是响应于设置操作选择的一个或多个操作指令。
102.可选地，所述录制模块包括：
103.第一序列化单元，用于对所述目标浏览器的初始界面对应的dom全量，以及所述多个界面各自对应的dom增量进行序列化处理；
104.第二序列化单元，用于基于初始界面对应的dom全量以及所述多个界面各自对应的dom增量，对每个界面的dom的节点进行序列化处理。
105.可选地，所述录制模块包括：
106.监听单元，用于基于mutationobserver监听dom的变化，并将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式进行缓存；
107.上传单元，用于每隔第二预设时间间隔，将当前缓存的josn文件的上传至服务器。
108.可选地，所述回放模块包括：
109.调用单元，用于响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量；
110.重建单元，用于基于所述初始界面对应的dom全量与所述多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；根据所述第一界面的dom全量与所述多个界面中第二界面对应的dom增量，叠加生成所述第二界面的dom全量；直到依次生成所述多个界面中每个界面各自对应的dom全量；
111.显示单元，用于根据所述多个界面中每个界面各自对应的dom全量，显示所述目标浏览器经过操作后的多个完整界面。
112.可选地，所述回放模块包括：
113.第一视频生成单元，用于在依次重建所述目标浏览器经过操作后的多个完整界面时进行录屏，生成针对目标浏览器的操作行为的视频；
114.或，第二视频生成单元，用于启动浏览器进程以显示重建后的多个完整界面，并进行录屏，生成针对目标浏览器的操作行为的视频。
115.本技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如实施例所述的基于浏览器dom的用户行为回溯方法。
116.本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
117.本领域内的技术人员应明白，本技术实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本技术实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
118.本技术实施例是参照根据本技术实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
119.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
120.这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
121.尽管已描述了本技术实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本技术实施例范围的所有变更和修改。
122.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
123.本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。

技术特征：
1.一种基于浏览器dom的用户行为回溯方法，其特征在于，所述方法包括：获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储，其中，所述每个界面对应的dom增量表征为与上一界面的dom变化；根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。2.根据权利要求1所述的方法，其特征在于，获取针对目标浏览器进行操作后的多个界面各自对应的dom增量，包括：每隔第一标定时间间隔，获取当前界面对应的实时dom；确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量。3.根据权利要求1所述的方法，其特征在于，获取针对目标浏览器进行操作后的多个界面各自对应的dom增量，包括：响应于目标操作指令，获取当前界面对应的实时dom；确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量；其中，所述目标操作指令是响应于设置操作选择的一个或多个操作指令。4.根据权利要求1所述的方法，其特征在于，在上传之前，所述方法包括：对所述目标浏览器的初始界面对应的dom全量，以及所述多个界面各自对应的dom增量进行序列化处理；基于初始界面对应的dom全量以及所述多个界面各自对应的dom增量，对每个界面的dom的节点进行序列化处理。5.根据权利要求4所述的方法，其特征在于，在序列化处理后，所述方法包括：基于mutationobserver监听dom的变化，并将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式进行缓存；每隔第二预设时间间隔，将当前缓存的josn文件的上传至服务器。6.根据权利要求1所述方法，其特征在于，根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，包括：响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量；基于所述初始界面对应的dom全量与所述多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；根据所述第一界面的dom全量与所述多个界面中第二界面对应的dom增量，叠加生成所述第二界面的dom全量；直到依次生成所述多个界面中每个界面各自对应的dom全量；根据所述多个界面中每个界面各自对应的dom全量，显示所述目标浏览器经过操作后的多个完整界面。7.根据权利要求1所述方法，其特征在于，依次动态显示所述目标浏览器经过操作后的
多个完整界面，包括：在依次重建所述目标浏览器经过操作后的多个完整界面时进行录屏，生成针对目标浏览器的操作行为的视频；或，启动浏览器进程以显示重建后的多个完整界面，并进行录屏，生成针对目标浏览器的操作行为的视频。8.一种基于浏览器dom的用户行为回溯系统，其特征在于，所述系统包括：录制模块，用于获取客户端上目标浏览器的初始界面对应的dom全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的dom增量并上传服务器进行存储，其中，所述每个界面对应的dom增量表征为与上一界面的dom变化；回放模块，用于根据所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。9.根据权利要求8所述的系统，其特征在于，所述录制模块包括：第一获取单元，用于每隔第一标定时间间隔，获取当前界面对应的实时dom；第一确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量。10.根据权利要求8所述的系统，其特征在于，所述录制模块包括：第二获取单元，用于响应于目标操作指令，获取当前界面对应的实时dom；第二确定单元，用于确定所述当前界面对应的实时dom与上一个界面的实时dom的变化，作为所述当前界面对应的dom增量；其中，所述目标操作指令是响应于设置操作选择的一个或多个操作指令。11.根据权利要求8所述的系统，其特征在于，所述录制模块包括：第一序列化单元，用于对所述目标浏览器的初始界面对应的dom全量，以及所述多个界面各自对应的dom增量进行序列化处理；第二序列化单元，用于基于初始界面对应的dom全量以及所述多个界面各自对应的dom增量，对每个界面的dom的节点进行序列化处理。12.根据权利要求11所述的系统，其特征在于，所述录制模块包括：监听单元，用于基于mutationobserver监听dom的变化，并将序列化后的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量以josn文件的形式进行缓存；上传单元，用于每隔第二预设时间间隔，将当前缓存的josn文件的上传至服务器。13.根据权利要求8所述系统，其特征在于，所述回放模块包括：调用单元，用于响应于回放选择操作，调用服务器中存储的所述初始界面对应的dom全量以及所述多个界面各自对应的dom增量；重建单元，用于基于所述初始界面对应的dom全量与所述多个界面中第一界面对应的dom增量，叠加生成所述第一界面的dom全量；根据所述第一界面的dom全量与所述多个界面中第二界面对应的dom增量，叠加生成所述第二界面的dom全量；直到依次生成所述多个界面中每个界面各自对应的dom全量；显示单元，用于根据所述多个界面中每个界面各自对应的dom全量，显示所述目标浏览器经过操作后的多个完整界面。
14.根据权利要求8所述系统，其特征在于，所述回放模块包括：第一视频生成单元，用于在依次重建所述目标浏览器经过操作后的多个完整界面时进行录屏，生成针对目标浏览器的操作行为的视频；或，第二视频生成单元，用于启动浏览器进程以显示重建后的多个完整界面，并进行录屏，生成针对目标浏览器的操作行为的视频。15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的基于浏览器dom的用户行为回溯方法。

技术总结
本申请提供一种基于浏览器DOM的用户行为回溯方法、系统和存储介质，属于数据处理的技术领域。所述方法包括获取客户端上目标浏览器的初始界面对应的DOM全量，以及获取针对目标浏览器进行操作后的多个界面各自对应的DOM增量并上传服务器进行存储，其中，所述每个界面对应的DOM增量表征为与上一界面的DOM变化；根据所述初始界面对应的DOM全量以及所述多个界面各自对应的DOM增量，重建所述目标浏览器经过操作后的多个完整界面，并依次动态显示所述目标浏览器经过操作后的多个完整界面，以展示针对于目标浏览器的操作行为。本申请旨在提高用户行为的追溯效率。用户行为的追溯效率。用户行为的追溯效率。


技术研发人员：汪鸣峰 张晨曦
受保护的技术使用者：天翼云科技有限公司
技术研发日：2022.12.30
技术公布日：2023/7/12