页面元素的处理方法、装置、存储介质及电子设备与流程

本申请涉及计算机，具体涉及一种页面元素的处理方法、装置、存储介质及电子设备。

背景技术：

1、在用户对万维网(web)页面(可简称为页面)的交互过程中，页面中会出现初始化时不存在的元素，但在用户进行某种交互后才会出现的情况。因此需要确定这种动态变化的页面元素(可简称为动态元素)在虚拟文档对象模型(document object model，dom)树中对应的dom节点，方便进行相应的页面元素配置更新。

2、目前，当虚拟dom树发生变化后，相关技术可通过diff算法对比新旧虚拟dom树中的差异，进而检测出动态元素在虚拟dom树中对应的dom节点。

3、然而，如果虚拟dom树的结构比较复杂，相关技术需要对该复杂的新旧虚拟dom树进行较多的数据搜索比对，会耗费较多时长，进而会影响检测动态元素在虚拟dom树中对应dom节点的效率，从而会影响页面元素的更新效率。

技术实现思路

1、有鉴于此，本申请提供了一种页面元素的处理方法、装置、存储介质及电子设备，主要目的在于改善目前对新旧虚拟dom树进行数据搜索比对所需时间较长，导致检测动态元素在虚拟dom树中对应dom节点的效率较低的技术问题。

2、第一方面，本申请提供了一种页面元素的处理方法，包括：获取页面中出现变化的位置；根据所述位置对所述页面对应的图片进行裁剪，得到与所述位置对应的目标图片；对所述目标图片进行分类，并获取与所述目标图片的分类对应的前端组件类型；按照所述前端组件类型对应预设的搜索深度，在所述页面的虚拟dom树中进行广度优先搜索，以检测所述页面的动态元素在所述虚拟dom树中对应的dom节点，所述搜索深度为从所述虚拟dom树的根节点出发到达目标节点所经过的边的数量。

3、可选的，所述获取页面中出现变化的位置，包括：获取所述页面变化前后的像素帧；根据所述像素帧使用canvas画布进行分析，获得所述页面中出现变化的位置。

4、可选的，根据所述像素帧使用canvas画布进行分析，获得所述页面中出现变化的位置，包括：根据所述像素帧将所述页面的像素信息绘制到canvas画布上；在所述canvas画布上扫描所述页面变化前后分别绘制的所述像素信息，获得目标区域的坐标信息，所述目标区域为所述canvas画布中的所述像素信息出现变化的区域；依据所述坐标信息确定所述页面中出现变化的位置。

5、可选的，所述对所述目标图片进行分类，包括：通过图片分类模型对所述目标图片进行识别，得到所述目标图片的分类，其中，所述图片分类模型为基于注意力机制的深度残差模型，所述深度残差模型包括resnet50网络，所述resnet50网络中包含多个注意力模块。

6、可选的，按照所述前端组件类型对应预设的搜索深度，在所述页面的虚拟dom树中进行广度优先搜索，包括：将所述页面变化前后的所述虚拟dom树中的相同分支，按照所述推荐搜索深度进行搜索比对，以获取所述页面变化前后的所述虚拟dom树中的差异节点；依据所述差异节点，确定所述动态元素在所述虚拟dom树中对应的dom节点。

7、可选的，加载所述dom节点对应的元素配置信息，并更新映射到所述页面的真实dom树中。

8、第二方面，本申请提供了一种页面元素的处理装置，包括：

9、获取模块，被配置为获取页面中出现变化的位置；

10、裁剪模块，被配置为根据所述位置对所述页面对应的图片进行裁剪，得到与所述位置对应的目标图片；

11、分类模块，被配置为对所述目标图片进行分类，并获取与所述目标图片的分类对应的前端组件类型；

12、搜索模块，被配置为按照所述前端组件类型对应预设的搜索深度，在所述页面的虚拟dom树中进行广度优先搜索，以检测所述页面的动态元素在所述虚拟dom树中对应的dom节点，所述搜索深度为从所述虚拟dom树的根节点出发到达目标节点所经过的边的数量。

13、第三方面，本申请提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的方法。

14、第四方面，本申请提供了一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面所述的方法。

15、第五方面，本申请提供了一种计算机程序产品，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的方法。

16、借由上述技术方案，本申请提供的页面元素的处理方法、装置、存储介质及电子设备，首先获取页面中出现变化的位置；根据位置对页面对应的图片进行裁剪，得到与位置对应的目标图片；然后对目标图片进行分类，并获取与目标图片的分类对应的前端组件类型；再按照前端组件类型对应预设的搜索深度，在页面的虚拟dom树中进行广度优先搜索，以检测页面的动态元素在虚拟dom树中对应的dom节点，该搜索深度为从虚拟dom树的根节点出发到达目标节点所经过的边的数量。与目前现有技术相比，本申请通过找到与页面中的动态元素对应的前端组件类型，并采用与前端组件类型相对应预设的搜索深度，在虚拟dom树中进行广度优先搜索，提高了检测动态元素在虚拟dom树中对应dom节点的效率，从而提高了页面元素的更新效率。

17、上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

技术特征：

1.一种页面元素的处理方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述获取页面中出现变化的位置，包括：

3.根据权利要求2所述的方法，其特征在于，根据所述像素帧使用canvas画布进行分析，获得所述页面中出现变化的位置，包括：

4.根据权利要求1所述的方法，其特征在于，所述对所述目标图片进行分类，包括：

5.根据权利要求1所述的方法，其特征在于，按照所述前端组件类型对应预设的搜索深度，在所述页面的虚拟dom树中进行广度优先搜索，包括：

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

7.一种页面元素的处理装置，其特征在于，包括：

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法。

9.一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法。

10.一种计算机程序产品，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法。

技术总结本申请公开了一种页面元素的处理方法、装置、存储介质及电子设备，涉及计算机技术领域，首先获取页面中出现变化的位置；根据位置对页面对应的图片进行裁剪，得到与位置对应的目标图片；然后对目标图片进行分类，并获取与目标图片的分类对应的前端组件类型；再按照前端组件类型对应预设的搜索深度，在页面的虚拟DOM树中进行广度优先搜索，以检测页面的动态元素在虚拟DOM树中对应的DOM节点。与目前现有技术相比，本申请通过找到与页面中的动态元素对应的前端组件类型，并采用与前端组件类型相对应的推荐搜索深度，在虚拟DOM树中进行广度优先搜索，提高了检测动态元素在虚拟DOM树中对应DOM节点的效率，从而提高了页面元素的更新效率。技术研发人员：范宇受保护的技术使用者：中移（苏州）软件技术有限公司技术研发日：技术公布日：2024/11/14