一种录制网页页面的方法及装置制造方法及图纸

本发明专利技术涉及金融科技(Fintech)领域，公开了一种录制网页页面的方法及装置，第一设备获取第一设备在第一时刻展示的第一网页页面对应的第一DOM树；第一DOM树中的各元素具有各自的唯一标识；第一设备在第二时刻监听到第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息；第一设备将第一DOM树对应的第一虚拟DOM树和变化信息发送至第二设备。该方案通过获取第一网页页面对应的第一DOM树，也即通过DOM快照的方式上报数据，极大地节省了第一设备的开销；此外，通过将第二时刻所监听到的有关于第一DOM树中的元素的变化信息进行上报，而非上报全部时刻的信息，极大地避免了无用的性能开销。

【技术实现步骤摘要】
一种录制网页页面的方法及装置
本专利技术涉及金融科技(Fintech)领域，尤其涉及一种录制网页页面的方法及装置。
技术介绍
随着计算机技术的发展，越来越多的技术(例如：云计算或大数据)应用在金融领域，传统金融业正在逐步向金融科技转变，大数据技术也不例外。但由于金融、支付行业的安全性、实时性要求，也对大数据技术提出了更高的要求。对于屏幕录制，目前业内主要有如下解决方案：逐帧截屏上传，即按照一秒25帧的频率利用Canvas截图，把照片逐帧上传到服务端。服务端通过对照片进行重组处理，还原成视频文件。如此，实现了对于屏幕的录制。对于上述的屏幕录制技术，通常表现出消耗巨大的性能开销的问题。具体表现为：为了使得生成流畅视频，按照一秒25帧(即需要25张截图)计算，假设一张图片为300KB，当需要30秒的视频时，图片的大小总共为220M，即使配合WebRTC(WebReal-TimeCommunication，源自网页即时通信)等相关技术优化网络传输的问题，客户端也无法承受如此巨大的性能开销。另外，此方案会生成大量“无用”的截图，因为本身界面展示变化并不是一个连续的过程，而是由诸如用户操作、或者网络返回等条件触发的离散的过程。因而很可能在某个时间段，界面展示没有变化，导致所获取的对应于界面展示没有变化的截屏在一定程度上可以算作是无用的开销。综上，现有技术在屏幕录制的过程中存在巨大的性能开销的问题。
技术实现思路
本专利技术提供一种录制网页页面的方法及装置，用以解决屏幕录制过程中存在巨大性能开销的问题。第一方面，本专利技术实施例提供一种录制网页页面的方法，该方法包括：第一设备获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识；所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件；所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。基于该方案，通过获取第一网页页面对应的第一DOM树，也即舍弃把第一网页页面转化为图片对于第一设备而言高开销的操作，改为通过DOM快照的方式上报数据，极大地节省了第一设备的开销；此外，通过将第二时刻所监听到的有关于第一DOM树中的元素的变化信息进行上报，而非上报全部时刻的信息，极大地避免了无用的性能开销；而且，上报数据为DOM快照，而非传统意义的图片，因此从本质上来说，被还原的并不是视频的格式，而是被还原成与用户所见一致的Web页面的变化过程，因而更容易与其他Web技术相结合，通过二次开发，做成辅助远程问题定位的产品。作为一种可能实现的方法，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：所述第一设备将所述第一网页页面的全局属性、所述第一虚拟DOM树和所述变化信息发送至所述第二设备。基于该方案，第一设备将第一网页页面的全局属性和第一虚拟DOM树发送至第二设备，便于第二设备根据全局属性和第一虚拟DOM树对所述第一网页页面的还原；以及，第一设备将变化信息发送至第二设备，便于第二设备根据变化信息、实现对所述第一网页页面后续各个变化时刻的全部还原，其中被还原的信息包括内容和格式。作为一种可能实现的方法，所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，包括：所述第一设备通过第一函数监听所述第一DOM树的树结构的变化；所述第一设备通过第二函数监听所述第一DOM树的元素的变化。基于该方案，第一设备通过第一函数可以监听到所述第一DOM树的树结构的变化，通过第二函数可以实现对所述第一DOM树的元素进行事件监听，通过这两种方式的监听，可以实现对变化信息的全方位采集。作为一种可能实现的方法，所述第一设备在第三时刻监听到所述第一设备展示的第二网页页面；所述第一设备获取所述第二网页页面的第二DOM树并保存。基于该方案，对于第三时刻所出现的、不同于第一网页页面的第二网页页面，通过获取所述第二网页页面的第二DOM树并保存，后期通过将第二DOM树对应的第二虚拟DOM树发送至第二设备，有助于第二设备根据该变化信息、实现对第二网页页面的还原。作为一种可能实现的方法，所述第一DOM树是所述第一设备首次打开所述第一网页页面时生成的；和/或所述第二DOM树是所述第一设备首次打开所述第二网页页面时生成的。作为一种可能实现的方法，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化之前，将所述第一虚拟DOM树发送至所述第二设备；所述第一设备定时将各周期内获取的变化信息发送至所述第二设备。基于该方案，通过将第一虚拟DOM树发送至第二设备，有助于第二设备根据所述第一虚拟DOM树实现对第一网页页面的还原；以及通过定时将各周期内获取的变化信息发送至第二设备，有助于第二设备根据所获取的变化信息中的变化时间来还原变化信息中的变化事件。第二方面，本专利技术实施例提供一种还原网页页面的方法，该方法包括：第二设备接收第一设备发送的第一DOM树对应的第一虚拟DOM树和第一DOM树对应的变化信息；所述第一DOM树是所述第一设备在第一时刻展示的第一网页页面；所述变化信息是所述第一设备在第二时刻监听到的所述第一DOM树中的元素发生变化时生成的；所述变化信息中包括元素的标识、变化时间及变化事件；所述第二设备根据所述第一虚拟DOM树还原出所述第一DOM树；所述第二设备根据所述第一DOM树还原所述第一时刻的第一网页页面；所述第二设备按照各变化信息中的变化时间的先后对各变化信息排序，并依序对所述第一网页页面进行渲染。基于该方案，第二设备通过对接收到第一虚拟DOM树的还原，最终可以还原至第一时刻的第一网页页面；以及通过对接收到变化信息的还原，也即第二设备按照各变化信息中的变化事件的先后对各变化信息排序，最终可以实现对基于第一时刻的第一网页页面的全部过程的还原。第三方面，本专利技术实施例提供一种录制网页页面的装置，该装置包括：获取单元，用于获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识；监听单元，用于在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件；发送单元，将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。基于该方案，通过获取第一网页页面对应的第一DOM树，也即舍弃把第一网页页面转化为图片对于第一设备而言高开销的操作，改为通过DOM快照的方式上报数据，极大地节省了第一设备的开销；此外，通过将第二时刻所监听到的有关于第一DOM树中的元素本文档来自技高网...

【技术保护点】
1.一种录制网页页面的方法，其特征在于，包括：/n第一设备获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识；/n所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件；/n所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。/n

【技术特征摘要】
1.一种录制网页页面的方法，其特征在于，包括：
第一设备获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识；
所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件；
所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。


2.如权利要求1所述的方法，其特征在于，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：
所述第一设备将所述第一网页页面的全局属性、所述第一虚拟DOM树和所述变化信息发送至所述第二设备。


3.如权利要求1所述的方法，其特征在于，所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，包括：
所述第一设备通过第一函数监听所述第一DOM树的树结构的变化；
所述第一设备通过第二函数监听所述第一DOM树的元素的变化。


4.如权利要求1所述的方法，其特征在于，还包括：
所述第一设备在第三时刻监听到所述第一设备展示的第二网页页面；
所述第一设备获取所述第二网页页面的第二DOM树并保存。


5.如权利要求1至4任一项所述的方法，其特征在于，包括：
所述第一DOM树是所述第一设备首次打开所述第一网页页面时生成的；和/或
所述第二DOM树是所述第一设备首次打开所述第二网页页面时生成的。


6.如权利要求1至4任一项所述的方法，其特征在于，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：
所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化之前，将所述第一虚拟DOM树发送至所述第二设备；
所述第一设备定时将各周期内获取的变化信息发送至所述第二设备。


7.一种还原网页页面的方法，其特征在于，包括：
第二设备接收第一设备发送的第一DOM树对应的第一虚拟DOM树和第一DOM树对应的变化信息；所述...

【专利技术属性】
技术研发人员：张卓韬，曾祥美，
申请(专利权)人：深圳前海微众银行股份有限公司，
类型：发明
国别省市：广东;44