CN111443969A - 一种录制网页页面的方法及装置 - Google Patents

一种录制网页页面的方法及装置 Download PDF

Info

Publication number
CN111443969A
CN111443969A CN202010213018.5A CN202010213018A CN111443969A CN 111443969 A CN111443969 A CN 111443969A CN 202010213018 A CN202010213018 A CN 202010213018A CN 111443969 A CN111443969 A CN 111443969A
Authority
CN
China
Prior art keywords
dom tree
change information
equipment
change
webpage
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.)
Pending
Application number
CN202010213018.5A
Other languages
English (en)
Inventor
张卓韬
曾祥美
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
WeBank Co Ltd
Original Assignee
WeBank Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by WeBank Co Ltd filed Critical WeBank Co Ltd
Priority to CN202010213018.5A priority Critical patent/CN111443969A/zh
Publication of CN111443969A publication Critical patent/CN111443969A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种录制网页页面的方法及装置
技术领域
本发明涉及金融科技(Fintech)领域，尤其涉及一种录制网页页面的方法及装置。
背景技术
随着计算机技术的发展，越来越多的技术(例如：云计算或大数据)应用在金融领域，传统金融业正在逐步向金融科技转变，大数据技术也不例外。但由于金融、支付行业的安全性、实时性要求，也对大数据技术提出了更高的要求。
对于屏幕录制，目前业内主要有如下解决方案：逐帧截屏上传，即按照一秒25帧的频率利用Canvas截图，把照片逐帧上传到服务端。服务端通过对照片进行重组处理，还原成视频文件。如此，实现了对于屏幕的录制。
对于上述的屏幕录制技术，通常表现出消耗巨大的性能开销的问题。具体表现为：为了使得生成流畅视频，按照一秒25帧(即需要25张截图)计算，假设一张图片为300KB，当需要30秒的视频时，图片的大小总共为220M，即使配合WebRTC(Web Real-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树中的元素的变化信息进行上报，而非上报全部时刻的信息，极大地避免了无用的性能开销；而且，上报数据为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树的还原，最终可以还原至第一时刻的第一网页页面；以及通过对接收到变化信息的还原，也即第二设备按照各变化信息中的变化事件的先后对各变化信息排序，最终可以实现对基于第一时刻的第一网页页面的全部过程的还原。
第五方面，本发明实施例提供了一种计算设备，包括：
存储器，用于存储程序指令；
处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行如第一方面和第二方面任一所述的方法。
第六方面，本发明实施例提供了一种计算机可读存储介质，所述计算机存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行如第一方面和第二方面任一所述的方法。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种录制网页页面的方法；
图2为本发明实施例提供的一种第一网页页面的示意图；
图3为本发明实施例提供的一种数字输入框；
图4为本发明实施例提供的一种还原网页页面的方法；
图5为本发明实施例提供的一种录制网页页面的装置；
图6为本发明实施例提供的一种还原网页页面的装置。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
如图1所示，为本发明实施例提供的一种录制网页页面的方法，该方法包括：
步骤101，第一设备获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识。
步骤102，所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件。
步骤103，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。
基于该方案，通过获取第一网页页面对应的第一DOM树，也即舍弃把第一网页页面转化为图片对于第一设备而言高开销的操作，改为通过DOM快照的方式上报数据，极大地节省了第一设备的开销；此外，通过将第二时刻所监听到的有关于第一DOM树中的元素的变化信息进行上报，而非上报全部时刻的信息，极大地避免了无用的性能开销；而且，上报数据为DOM快照，而非传统意义的图片，因此从本质上来说，被还原的并不是视频的格式，而是被还原成与用户所见一致的Web页面的变化过程，因而更容易与其他Web技术相结合，通过二次开发，做成辅助远程问题定位的产品。
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
在上述步骤101中，第一设备获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识。
第一设备可以是移动终端；对于T1时刻，移动终端可以获取自身在该时刻展示的当前页面所对应的文档对象模型DOM_1；其中，T1时刻即为第一时刻，当前页面即为第一网页页面，DOM_1即为第一DOM树。
对于DOM_1，通过一定的规则，给当前DOM_1中的每个DOM元素标记一个唯一标识。比如可以通过以下方式来实现：遍历DOM节点，按照从1开始递增的方式生成(父)节点唯一标识；通过递归的方式遍历(父)节点的子节点，生成子节点唯一标识，其中，父节点唯一标识加上子节点唯一标识，中间用连接符号分隔。连接符号可以为“-”，对此不做限定。
如图2所示，为本发明实施例提供的一种第一网页页面的示意图。设一位名叫安妮的女士需要在一家名叫XX_Bank银行的自助服务平台上注销自己曾经办理过的一张银行卡，令该自助服务平台会录制该女士注销银行卡的整个流程。参考图2，该自助服务平台在注销过程中的初始展示页面如图：自助服务平台的初始注销页面的长为50cm，宽为40cm，分辨率为640*480；其中，初始注销页面上显示有“XX_Bank”的标识，以及一些需要用户输入的选项信息，如“姓名”，“身份证号”，“银行卡号”，“密码”，“确认密码”，以及最后的“完成”选项。
其中，令该自助服务平台上所显示的初始注销页面对应于DOM_1：“XX_Bank”这个节点元素的唯一标识为1，“姓名”这个子节点元素的唯一标识为1-1，“身份证号”这个子节点元素的唯一标识为1-2，“银行卡号”这个子节点元素的唯一标识为1-3，“密码”这个子节点元素的唯一标识为1-4，“确认密码”这个子节点元素的唯一标识为1-5，“完成”这个节点元素的唯一标识为2。
在上述步骤102中，所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件。
如前述在自助服务平台注销银行卡的例子，当该自助服务平台监听到DOM_1中元素发生变化，如监听到DOM_1中的1-1这个子节点元素发生变化，也即监听到有用户在“姓名”这个子节点元素中输入信息，则该自助服务平台记录发生变化的1-1这个子节点元素的变化信息；其中，该变化信息包括元素的标识(如1-1)，变化时间(如T2)以及变化事件(输入事件)。
在上述步骤103中，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。
如前述在自助服务平台注销银行卡的例子，该自助服务平台将DOM_1对应的虚拟DOM_1发送至第二设备，该自助服务平台将变化信息发送至第二设备；其中，第二设备也可以为移动终端，虚拟DOM_1即为第一虚拟DOM树。
需要说明的是，将DOM_1转换至虚拟DOM_1，可以通过以下方式实现：从DOM_1的body元素开始往下遍历，记录需要用的属性，如元素具有的唯一标识，以及一些扩展属性，如便于还原的自定义属性，包括节点类型，SVG标记等；递归处理子节点元素，直到body元素下的树形结构被完全保留。此外，在转换过程中还需要执行Js脚本的去除操作。
该自助服务平台将虚拟DOM_1和变化信息发送至第二设备，有助于在第二设备上还原该自助服务平台各时刻所显示的页面。
作为一种可能实现的方法，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：所述第一设备将所述第一网页页面的全局属性、所述第一虚拟DOM树和所述变化信息发送至所述第二设备。
如前述在自助服务平台注销银行卡的例子，该自助服务平台不仅会将虚拟DOM_1和变化信息发送至第二设备，同时该自助服务平台还会将第一网页页面的全局属性发送至第二设备。也即，该自助服务平台会将T1时刻下的初始注销页面的全局属性信息发送至第二设备，具体的，该自助服务平台会将初始注销页面的长度是50cm，宽度是40cm，分辨率是640*480，以及其他一些固有属性信息等全局属性发送至第二设备，有助于第二设备根据第一网页页面的全局属性信息，还原出T1时刻的第一网页页面。
作为一种可能实现的方法，所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化，包括：所述第一设备通过第一函数监听所述第一DOM树的树结构的变化；所述第一设备通过第二函数监听所述第一DOM树的元素的变化。
如前述在自助服务平台注销银行卡的例子，在T2时刻，安妮女士点击了自助服务平台中初始注销页面上的“姓名”选项所在一行的空白框，企图输入自己的姓名。此时，该自助服务平台通过第二函数监听到外界发生了欲改变DOM_1的元素的事件：监听到1-1这个子节点元素发生点击事件。其中，第二函数可以是该自助服务平台中的window.addEventListener，也即该自助服务平台可以通过window.addEventListener来监听对初始注销页面产生影响的事件。
其中，可能对初始注销页面产生影响的事件包括各类点击事件、输入事件、滚动事件、缩放事件等。通过window.addEventListener对以上各种事件进行监听，当监听到事件触发时，记录为一个变化内容。其中，变化内容可以表现为类型、唯一标识以及其他扩展属性的改变。如变化类型可以包括节点属性变更和子节点元素变更。其中，节点属性变更可以通过“属性名-属性值”键值对的方式定义；子节点元素变更仅记录子节点元素的新增与删除事件，对于新增的子节点元素，它的唯一标识不同于现有的子节点元素的唯一标识，对于被删除的子节点元素，它的唯一标识随之被永久删除，后续不会再使用。
如T3时刻，window.addEventListener监听到1-2这个子节点元素发生了点击事件；如T4时刻，window.addEventListener监听到1-2这个子节点元素产生了弹出数字输入框的事件，如图3所示，为本发明实施例提供的一种数字输入框，用户可以通过点击图3中数字输入框中的任一数字来实现对自己身份证号的输入；如T5时刻，window.addEventListener监听到1-2这个子节点元素接收到安妮点击输入自己身份证号的第一位数字“3”；如T6时刻，window.addEventListener监听到1-2这个子节点元素接收到安妮点击输入自己身份证号的第二位数字“1”；同理，window.addEventListener可以监听任意时刻下对初始注销页面产生影响的各种事件。
第一设备监听第一DOM树的树结构的变化时，采用第一函数的方式，具体可以通过MutationObserver实现：每当MutationObserver回调函数被触发的时候，记录其变化信息，变化信息包括节点唯一标识、变化时间及变化事件。
作为一种可能实现的方法，所述第一设备在第三时刻监听到所述第一设备展示的第二网页页面；所述第一设备获取所述第二网页页面的第二DOM树并保存。
当第一设备通过第一函数监听到第一DOM树的树结构的变化，如第一设备在某个时刻T时监听到第一设备展示的第二网页页面，该第二网页页面的产生可以为在第一网页页面中出现动态插入的弹出框，则对于第一设备上展示的第二网页页面，可以将该第二网页页面当作新增DOM；从而，第一设备仿照处理第一网页页面的方法，获取该第二网页页面的第二DOM，如DOM_2；同时产生对应于DOM_2的虚拟DOM_2，并将虚拟DOM_2保存在变化信息中。
作为一种可能实现的方法，所述第一DOM树是所述第一设备首次打开所述第一网页页面时生成的；和/或所述第二DOM树是所述第一设备首次打开所述第二网页页面时生成的。
如前述在自助服务平台注销银行卡的例子，安妮女士通过点击自助服务平台的任意区域、进入到如图2所示的界面，则图2所示界面即为第一网页页面，同时可以根据第一网页页面、生成与其对应的第一DOM树，也即DOM_1；同理，可以将第一网页页面中出现的动态插入的弹出框即为第二网页页面，同时可以根据第二网页页面、生成与其对应的第二DOM树，也即DOM_2。
作为一种可能实现的方法，所述第一设备将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备，包括：所述第一设备在第二时刻监听到所述第一DOM树中的元素发生变化之前，将所述第一虚拟DOM树发送至所述第二设备；所述第一设备定时将各周期内获取的变化信息发送至所述第二设备。
如前述在自助服务平台注销银行卡的例子，自助服务平台在T1时刻获取到当前时刻的显示页面对应的DOM_1，并将产生的对应于DOM_1的虚拟DOM_1发送至第二设备；随后该自助服务平台定时将各周期内获取的变化信息发送至第二设备，比如可以为每隔10秒钟，该自助服务平台将10秒内所获取的变化信息发送至第二设备，从而避免了让该自助服务平台将每获取的一条变化信息、逐条发送至第二设备。比如从T1时刻后的第一个10秒钟内，该自助服务平台获取到20条变化信息：如这20条变化信息按照时间推进的顺序进行排序，在T2时刻，安妮女士点击了自助服务平台的初始注销页面中的“姓名”选项所在一行的空白框，企图输入自己的姓名；在T3时刻，window.addEventListener监听到1-2这个子节点元素产生了弹出数字输入框的事件；T4时刻，window.addEventListener监听到1-2这个子节点元素接收到安妮点击输入自己身份证号的第一位数字“3”；如T5时刻，window.addEventListener监听到1-2这个子节点元素接收到安妮点击输入自己身份证号的第二位数字“1”；对于其他T6、T7、T8……T21的任一时刻的变化信息的产生与记录参考T2等各个时刻的情形，对此不赘述。
如图4所示，为本发明实施例提供的一种还原网页页面的方法，该方法包括：
步骤401，第二设备接收第一设备发送的第一DOM树对应的第一虚拟DOM树和第一DOM树对应的变化信息；所述第一DOM树是所述第一设备在第一时刻展示的第一网页页面；所述变化信息是所述第一设备在第二时刻监听到的所述第一DOM树中的元素发生变化时生成的；所述变化信息中包括元素的标识、变化时间及变化事件。
步骤402，所述第二设备根据所述第一虚拟DOM树还原出所述第一DOM树。
步骤403，所述第二设备根据所述第一DOM树还原所述第一时刻的第一网页页面。
步骤404，所述第二设备按照各变化信息中的变化时间的先后对各变化信息排序，并依序对所述第一网页页面进行渲染。
在上述步骤401中，如前述在自助服务平台注销银行卡的例子，第二设备可以接收到自助服务平台发送给自己的虚拟DOM_1和DOM_1对应的变化信息；其中，虚拟DOM_1即为第一DOM树对应的第一虚拟DOM树，DOM_1对应的变化信息即为第一DOM树对应的变化信息；DOM_1对应于自助服务平台在T1时刻展示的初始注销页面，显示界面如图2所示；DOM_1对应的变化信息是自助服务平台在第二时刻监听到的DOM_1中的元素发生变化时生成的，其中第二时刻具体表现为DOM_1中的元素发生变化时的各个时刻，如前述的T2时刻、T3时刻……等诸多时刻；变化信息包括元素的标识、变化事件及变化事件，如一条变化信息可以表示为1-2这个节点元素在T5时刻发生了输入事件(输入身份证号的第一位数字“3”)。
在上述步骤402中，第二设备根据虚拟DOM_1还原出DOM_1。
在上述步骤403中，第二设备根据DOM_1还原出T1时刻的第一网页页面，也即如图2所示的页面。
在上述步骤404中，第二设备按照各变化信息中的变化时间的先后对各变化信息排序，比如，第二设备根据通过对所接收的各变化信息中的变化时间的提取，将各条变化信息按照时间推进的顺序进行排序，如得到T2时刻、T3时刻……直到结束本次录制网页页面的时刻。
具体的，第二设备的显示屏幕上会还原出以下网页录制的全过程：在T1时刻展示的初始注销页面的基础上，渲染T2时刻对应的变化事件；在完成对T2时刻对应的变化事件的渲染后，继续渲染T3时刻对应的变化事件；……至本次录制网页页面的最终时刻，渲染最终时刻对应的变化事件，至此，实现了在第二设备上还原了第一设备的录制网页页面的全过程。
基于同样的构思，本发明实施例还提供一种录制网页页面的装置，如图5所示，该装置包括：
获取单元501，用于获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识。
监听单元502，用于在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件。
发送单元503，将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。
进一步地，对于所述装置，所述发送单元503，具体用于将所述第一网页页面的全局属性、所述第一虚拟DOM树和所述变化信息发送至所述第二设备。
进一步地，对于所述装置，所述监听单元502，具体用于通过第一函数监听所述第一DOM树的树结构的变化；通过第二函数监听所述第一DOM树的元素的变化。
进一步地，对于所述装置，所述监听单元502，还用于在第三时刻监听到所述第一设备展示的第二网页页面；所述获取单元501，还用于获取所述第二网页页面的第二DOM树并保存。
进一步地，对于所述装置，所述第一DOM树是所述第一设备首次打开所述第一网页页面时生成的；和/或所述第二DOM树是所述第一设备首次打开所述第二网页页面时生成的。
进一步地，对于所述装置，所述发送单元503，具体用于在第二时刻监听到所述第一DOM树中的元素发生变化之前，将所述第一虚拟DOM树发送至所述第二设备；定时将各周期内获取的变化信息发送至所述第二设备。
基于同样的构思，本发明实施例还提供一种还原网页页面的装置，如图6所示，该装置包括：
接收单元601，用于接收第一设备发送的第一DOM树对应的第一虚拟DOM树和第一DOM树对应的变化信息；所述第一DOM树是所述第一设备在第一时刻展示的第一网页页面；所述变化信息是所述第一设备在第二时刻监听到的所述第一DOM树中的元素发生变化时生成的；所述变化信息中包括元素的标识、变化时间及变化事件。
还原单元602，用于根据所述第一虚拟DOM树还原出所述第一DOM树。
所述还原单元602，还用于根据所述第一DOM树还原所述第一时刻的第一网页页面。
渲染单元603，用于按照各变化信息中的变化时间的先后对各变化信息排序，并依序对所述第一网页页面进行渲染。
本发明实施例提供了一种计算设备，该计算设备具体可以为桌面计算机、便携式计算机、智能手机、平板电脑、个人数字助理(Personal Digital Assistant，PDA)等。该计算设备可以包括中央处理器(Center Processing Unit，CPU)、存储器、输入/输出设备等，输入设备可以包括键盘、鼠标、触摸屏等，输出设备可以包括显示设备，如液晶显示器(Liquid Crystal Display，LCD)、阴极射线管(Cathode Ray Tube，CRT)等。
存储器，可以包括只读存储器(ROM)和随机存取存储器(RAM)，并向处理器提供存储器中存储的程序指令和数据。在本发明实施例中，存储器可以用于录制网页页面的方法的程序指令；
处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行录制网页页面的方法。
本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行录制网页页面的方法。
本领域内的技术人员应明白，本发明的实施例可提供为方法、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

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树对应的变化信息；所述第一DOM树是所述第一设备在第一时刻展示的第一网页页面；所述变化信息是所述第一设备在第二时刻监听到的所述第一DOM树中的元素发生变化时生成的；所述变化信息中包括元素的标识、变化时间及变化事件；
所述第二设备根据所述第一虚拟DOM树还原出所述第一DOM树；
所述第二设备根据所述第一DOM树还原所述第一时刻的第一网页页面；
所述第二设备按照各变化信息中的变化时间的先后对各变化信息排序，并依序对所述第一网页页面进行渲染。
8.一种录制网页页面的装置，其特征在于，包括：
获取单元，用于获取所述第一设备在第一时刻展示的第一网页页面对应的第一DOM树；所述第一DOM树中的各元素具有各自的唯一标识；
监听单元，用于在第二时刻监听到所述第一DOM树中的元素发生变化，则记录发生变化的元素的变化信息，所述变化信息中包括元素的标识、变化时间及变化事件；
发送单元，将所述第一DOM树对应的第一虚拟DOM树和所述变化信息发送至第二设备；所述第一虚拟DOM树和所述变化信息用于还原所述第一设备在各时刻展示的第一网页页面。
9.一种还原网页页面的装置，其特征在于，包括：
接收单元，用于接收第一设备发送的第一DOM树对应的第一虚拟DOM树和第一DOM树对应的变化信息；所述第一DOM树是所述第一设备在第一时刻展示的第一网页页面；所述变化信息是所述第一设备在第二时刻监听到的所述第一DOM树中的元素发生变化时生成的；所述变化信息中包括元素的标识、变化时间及变化事件；
还原单元，用于根据所述第一虚拟DOM树还原出所述第一DOM树；
所述还原单元，还用于根据所述第一DOM树还原所述第一时刻的第一网页页面；
渲染单元，用于按照各变化信息中的变化时间的先后对各变化信息排序，并依序对所述第一网页页面进行渲染。
10.一种计算设备，其特征在于，包括：
存储器，用于存储程序指令；
处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行如权利要求1-6或7任一项所述的方法。
11.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行如权利要求1-6或7任一项所述的方法。
CN202010213018.5A 2020-03-24 2020-03-24 一种录制网页页面的方法及装置 Pending CN111443969A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010213018.5A CN111443969A (zh) 2020-03-24 2020-03-24 一种录制网页页面的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010213018.5A CN111443969A (zh) 2020-03-24 2020-03-24 一种录制网页页面的方法及装置

Publications (1)

Publication Number Publication Date
CN111443969A true CN111443969A (zh) 2020-07-24

Family

ID=71650738

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010213018.5A Pending CN111443969A (zh) 2020-03-24 2020-03-24 一种录制网页页面的方法及装置

Country Status (1)

Country Link
CN (1) CN111443969A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112068919A (zh) * 2020-09-17 2020-12-11 北京五八信息技术有限公司 一种网页截屏处理方法、装置、电子设备及存储介质
CN112256524A (zh) * 2020-09-27 2021-01-22 湖南映客互娱网络信息有限公司 一种基于录屏回放的web前端监控方法与系统
CN112307384A (zh) * 2020-10-21 2021-02-02 深圳市欢太科技有限公司 页面快照展示方法、装置、电子设备及存储介质
CN113010825A (zh) * 2021-03-09 2021-06-22 腾讯科技（深圳）有限公司 一种数据处理方法和相关装置
CN113656119A (zh) * 2021-07-14 2021-11-16 深圳万物安全科技有限公司 一种通过dom节点回溯用户操作的方法及系统
CN113901360A (zh) * 2021-10-25 2022-01-07 联想(北京)有限公司 一种数据处理方法、装置及电子设备
CN113946256A (zh) * 2021-10-28 2022-01-18 北京海泰方圆科技股份有限公司 一种页面操作录制方法、装置、介质和设备

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112068919A (zh) * 2020-09-17 2020-12-11 北京五八信息技术有限公司 一种网页截屏处理方法、装置、电子设备及存储介质
CN112068919B (zh) * 2020-09-17 2024-01-30 北京五八信息技术有限公司 一种网页截屏处理方法、装置、电子设备及存储介质
CN112256524A (zh) * 2020-09-27 2021-01-22 湖南映客互娱网络信息有限公司 一种基于录屏回放的web前端监控方法与系统
CN112307384A (zh) * 2020-10-21 2021-02-02 深圳市欢太科技有限公司 页面快照展示方法、装置、电子设备及存储介质
CN112307384B (zh) * 2020-10-21 2024-05-03 深圳市欢太科技有限公司 页面快照展示方法、装置、电子设备及存储介质
CN113010825A (zh) * 2021-03-09 2021-06-22 腾讯科技（深圳）有限公司 一种数据处理方法和相关装置
CN113656119A (zh) * 2021-07-14 2021-11-16 深圳万物安全科技有限公司 一种通过dom节点回溯用户操作的方法及系统
CN113901360A (zh) * 2021-10-25 2022-01-07 联想(北京)有限公司 一种数据处理方法、装置及电子设备
CN113946256A (zh) * 2021-10-28 2022-01-18 北京海泰方圆科技股份有限公司 一种页面操作录制方法、装置、介质和设备

Similar Documents

Publication Publication Date Title
CN111443969A (zh) 一种录制网页页面的方法及装置
CN111352800A (zh) 大数据集群监控方法及相关设备
CN107146012A (zh) 风险事件处理方法及系统
CN111694926A (zh) 基于场景动态配置的交互处理方法、装置、计算机设备
CN112084179B (zh) 一种数据处理的方法、装置、设备及存储介质
EP4174656A1 (en) Dynamic intelligent log analysis tool
CN110784377A (zh) 一种多云环境下的云监控数据统一管理的方法
CN111666298A (zh) 基于flink的用户服务类别检测方法、装置、计算机设备
CN114416877A (zh) 一种数据处理方法、装置、设备及可读存储介质
CN112732763A (zh) 数据的聚合方法、装置、电子设备及介质
CN115526160A (zh) 富文本处理方法、装置、设备及存储介质
CN106557483B (zh) 一种数据处理、数据查询方法及设备
CN112035401A (zh) 模型数据处理方法、装置、电子设备及可读介质
CN114443905A (zh) 接口文档更新方法、装置、电子设备及可读存储介质
US20140089525A1 (en) Compressed analytics data for multiple recurring time periods
CN107679096B (zh) 数据集市间指标共享的方法和装置
CN110928540A (zh) 一种页面生成方法及装置
CN111435326A (zh) 一种分析崩溃日志的方法和装置
CN115018473A (zh) 一种业务处理方法、装置、存储介质及设备
CN113947166A (zh) 问卷统计实时处理方法、系统、电子设备及存储介质
CN107526827A (zh) 用于问答展示的方法、设备和计算机可读存储介质
CN111125501B (zh) 用于处理信息的方法和装置
CN113963440A (zh) 一种客户购买意愿分析方法及装置
CN112634088A (zh) 房源动态信息推送方法及装置
CN110750563A (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