[发明专利]一种页面的组件显示方法、装置、电子设备及存储介质

说明书

本申请实施例提供一种页面的组件显示方法、装置、电子设备及存储介质，其中，该方法包括：在所述页面中创建html元素的可显示区域；获取需要显示的组件的轮廓坐标；根据所述轮廓坐标在所述可显示区域生成待显示组件；提取所述待显示组件的变化属性；根据所述变化属性在所述页面中显示所述待显示组件。实施本申请实施例，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。

技术领域

本申请涉及前端技术领域，具体而言，涉及一种页面的组件显示方法、装置、电子设备及计算机可读存储介质。

背景技术

前端页面应用一旦发展到一定规模，会出现一些问题，常见的例如多个不同层级叠加起来构成一个应用的场景。

这样的场景会存在一些问题，例如：两个不同层级的应用A，B(A通过定位浮在B上，A的层级比B高)，当B里面其中一个组件需要显示在主界面上，例如需要调用B里面的一个弹窗组件C，如果A在相同位置有元素，就会产生遮挡问题。因为B和C是一个整体(层级是一样的)，如果提升层级的话，需要提升B整一个的层级，就会把相同位置的A遮挡。这导致前端页面出现卡顿，应用中的功能无法展示，甚至使应用无法使用。

发明内容

本申请实施例的目的在于提供一种页面的组件显示方法、装置、电子设备及计算机可读存储介质，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。

第一方面，本申请实施例提供了一种页面的组件显示方法，所述方法包括：

在所述页面中创建html元素的可显示区域；

获取需要显示的组件的轮廓坐标；

根据所述轮廓坐标在所述可显示区域生成待显示组件；

提取所述待显示组件的变化属性；

根据所述变化属性在所述页面中显示所述待显示组件。

在上述实现过程中，在可显示区域创建待显示组件，并实时根据变化属性在页面中对待显示组件进行显示，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。

进一步地，所述根据所述轮廓坐标在所述可显示区域生成待显示组件的步骤，包括：

根据所述轮廓坐标在所述可显示区域拼接不规则路径；

根据所述不规则路径生成所述待显示组件。

在上述实现过程中，根据不规则路径生成待显示组件，保证待显示组件的准确性和完整性，不易出现误差。

进一步地，所述提取所述待显示组件的变化属性的步骤，包括：

创建所述待显示组件的观察者实例；

根据所述观察者实例监视所述待显示组件中目标节点的变动，得到变化属性。

在上述实现过程中，创建观察者实例，并根据观察者实例监视目标节点的变动，可以提高加载待显示组件的速度，避免卡顿，减少冗余，提高应用效率。

进一步地，所述创建所述待显示组件的观察者实例的步骤，包括：

获取所述待显示组件的dom对象和组件ID；

根据所述dom对象和组件ID构建回调函数；

根据所述回调函数创建所述观察者实例。

在上述实现过程中，根据待显示组件的dom对象和组件ID构建回调函数，再根据回调函数创建观察者实例，使得观察者实例可以更好地监视待显示组件，提高待显示组件的的加载速度。