CN112149040A - 页面骨架屏生成方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请公开了一种页面骨架屏生成方法、装置、电子设备和存储介质，涉及云计算技术领域。具体实现方案为：获取页面中至少两个页面元素，并确定所述页面元素的属性信息；根据所述属性信息对各所述页面元素进行区分；根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。本申请能够提高页面骨架屏的生成效率。

Description

页面骨架屏生成方法、装置、电子设备和存储介质

技术领域

本申请涉及数据处理技术领域，尤其涉及云计算技术领域，具体涉及一种页面骨架屏生成方法、装置、电子设备和存储介质。

背景技术

开发人员在对网页页面进行开发时，为了提升网页的用户产品体验，减少用户因等待而流失，在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充需要显示的数据内容。

然而，当开发人员需要对页面内容和结构进行重新开发时，需要重新编写匹配的骨架屏，开发量大，开发效率较低。

发明内容

本公开提供了一种用于页面骨架屏生成方法、装置、电子设备以及存储介质。

根据本公开的一方面，提供了一种页面骨架屏生成方法，包括：

获取页面中至少两个页面元素，并确定所述页面元素的属性信息；

根据所述属性信息对各所述页面元素进行区分；

根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。

根据本公开的一方面，提供了一种页面骨架屏生成装置，包括：

属性确定模块，用于获取页面中至少两个页面元素，并确定所述页面元素的属性信息；

元素区分模块，用于根据所述属性信息对各所述页面元素进行区分；

骨架屏构建模块，用于根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。

根据本公开的一方面，提供了一种电子设备，该电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如本申请实施例中任一项所述的页面骨架屏生成方法。

根据本公开的一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如本申请实施例中任一项所述的页面骨架屏生成方法。

根据本申请的技术能够提高页面骨架屏的生成效率。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是根据本申请实施例提供的一种页面骨架屏生成方法的流程示意图；

图2是根据本申请实施例提供的页面的骨架屏金字塔结构的示意图；

图3是根据本申请实施例提供的另一种页面骨架屏生成方法的流程示意图；

图4是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图；

图5是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图；

图6是根据本申请实施例提供的页面构建不同等级骨架屏结构的流程示意图；

图7是根据本申请实施例提供的一种页面骨架屏生成装置的结构示意图；

图8是用来实现本申请实施例的页面骨架屏生成方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本申请实施例提供的页面骨架屏生成方法的流程示意图。本实施例可适用于自动生成多级页面骨架屏的情况，从而提高开发人员对前端页面骨架屏的开发效率。本实施例公开的页面骨架屏生成方法可以由页面骨架屏生成装置来执行，该装置可以由软件和/或硬件的方式实现，配置于电子设备中。参见图1，本实施例提供的页面骨架屏生成方法包括：

S110、获取页面中至少两个页面元素，并确定页面元素的属性信息。

其中，页面元素是指构成网页页面的基本元素，例如块级元素：h1～h6、p、div、ul、table等具有块的属性，能够独立存在且元素之间以换行分割；顶级元素：html、body以及框架等；内联元素：指依附其他块级元素存在，紧接于被联元素之间显示而不换行。常用的内联元素包括img、span、li、br等。页面元素可以理解为页面上的图片、按钮或者文本框等。属性信息是指页面元素中对骨架屏显示有关的相关信息，例如页面元素的标签类型、标签名称、层级关系或者在页面中的尺寸大小等。

在一个可行的实施例中，页面元素的属性信息包括下述至少一类：

页面元素在页面中的空间布局属性；

页面元素在页面中的关键性属性；

页面元素的内容属性。

其中，空间布局属性是指页面元素在页面中的区域覆盖信息，根据区域覆盖信息可以确定该页面元素在骨架屏结构中的占位信息。关键性属性用于表征该页面元素对页面的贡献度，例如根据该页面元素对应的文档对象模型(Document Object Model，DOM)节点距离页面根节点的距离确定该页面元素对页面的贡献度，即确定该页面元素的关键性，距离根节点越近贡献度越大，关键性属性值越高。内容属性用于描述该页面元素在页面中所表示的内容，例如内容属性包括页面元素中所包括的具体内容，以及内容所表达出的信息量大小等。

通过空间布局属性可以确定页面元素的区域信息，提高确定页面元素在骨架屏结构中占位信息的准确性；通过关键性属性可以确定页面元素对页面的贡献度，提高确定归属于骨架屏结构的页面元素的准确性；通过内容属性可以确定页面元素中所包含内容所表达信息量的高低，提高确定归属于骨架屏结构的页面元素的准确性。通过对页面元素的各种属性信息的确定，提高对页面元素的掌握度，进而提高骨架屏显示的精准度，避免在骨架屏结构中出现信息量较低的页面元素，使得展示给用户的骨架屏尽可能表达页面的整体框架。

在一个可行的实施例中，获取页面中至少两个页面元素，包括：

对页面进行解析，得到包含所有页面元素的文档对象模型的骨架树；其中，骨架树中包括如下至少一项：每个页面元素的标签类型、标签名称、尺寸以及层级关系，页面为基于HTML协议构建的页面。

其中，DOM是指描述页面整体内容和结构等的基于树的API文档。骨架树是指一种存储页面布局结构的数据存储结构。标签类型是指描述页面元素进行分类的结果。标签名称用于对该页面元素进行区分。尺寸是指该页面元素在页面中的所覆盖的区域信息，例如包括该页面元素的覆盖页面的宽度和高度。层级关系是指页面元素之间的上下级或者包含关系。标签类型、标签名称、尺寸以及层级关系均可以通过对页面进行解析直接获取。

具体的，根据输入的页面地址获取页面结构，或者直接获取页面HTML页面结构，基于HTML和CSS渲染规则，对页面结构进行解析，得到页面中各页面元素的标签类型、标签名称、尺寸以及层级关系，并根据获取到的页面元素相关信息通过树结构进行存储，得到骨架树。在骨架树中可以清楚地得到各页面元素的基本信息以及页面元素之间的层级关系，例如A页面元素属于B页面元素的子节点。

通过对页面的解析得到页面元素的骨架树，便于对页面中所有页面元素的信息进行确定，剔除无关信息，避免页面元素信息缺失或者无关信息造成对骨架屏结构确定的干扰。

S120、根据属性信息对各页面元素进行区分。

根据各页面元素属性信息的不同对页面元素进行分类。示例性的，当属性信息是空间布局属性时，按照页面元素所处的区域不同将页面中各页面元素进行分类，例如按照页面元素在页面中的位置将页面元素分为不同等级，以对页面元素进行区分。当属性信息是关键性属性时，按照各页面元素的关键性对各页面元素进行分类，例如将贡献度进行分段，位于不同分段区间内的页面元素属于不同等级，以对页面元素进行区分。当属性信息是内容属性时，按照各页面元素中的内容对各页面元素进行区分，例如为不同内容预先设置对应的等级，以根据内容对页面元素进行区分。

通过属性信息对页面元素进行区分以实现对页面元素所表征信息的粗细粒度进行确定，进而提高根据区分结果构建不同等级的骨架屏结构的准确性。

S130、根据区分结果，确定各页面元素归属于至少两级骨架屏结构，其中，每级骨架屏结构所对应的页面元素不完全相同。

根据区分结果确定各页面元素所表征信息的粗细粒度，并根据表征粒度的不同将页面元素归属于至少两级骨架屏结构。每级骨架屏结构所对应的页面元素不完全相同是指每级骨架屏结构中的页面元素所成的框架大小不同。

具体的，根据空间布局属性对页面元素进行区分得到的区分结果，确定至少两级骨架屏结构中，至少一级骨架屏结构中存在至少一个页面元素的区域可以覆盖另一级骨架屏结构中的至少两个页面元素的区域，以达到在不同等级的骨架屏结构中页面元素不完全相同。或者，根据关键性属性得到的区分结果，在确定的至少两级骨架屏结构中，至少一级骨架屏结构中去除了另一级骨架屏结构中的关键性低的页面元素，以达到在不同等级的骨架屏结构中页面元素不完全相同，关于所去除的关键性低的标准可以根据实际骨架屏构建需求进行确定，在此不作限制。或者，根据内容属性得到的区分结果，在确定的至少两级骨架屏结构中，至少一级骨架屏结构中去除了另一级骨架屏结构中内容信息量低的页面元素。

可选的，对于不同级骨架屏结构所对应的页面元素可以是包含关系或者交叉关系。例如，在上述示例中，当某区域可以由页面元素A完全覆盖，或者由页面元素B和页面元素C完全覆盖时，则在至少两级骨架屏结构中分别包括页面元素A或者页面元素B和页面元素C，此时在不同等级骨架屏结构中页面元素属于交叉关系，只包括页面元素A的骨架屏结构框架比包括了页面元素B和页面元素C的骨架屏框架的粒度更粗。或者，在上述示例的基础上，页面元素A的关键性大于页面元素B，页面元素B的关键性大于页面元素C，则在至少两级骨架屏结构中分别包括页面元素A、B和C以及页面元素A和页面元素B，在该条件下，在不同等级骨架屏结构中页面元素属于包含关系。

在一个可行的实施例中，骨架屏结构的等级从上至下分为至少两级，上级骨架屏结构包括相邻下级骨架屏结构的部分页面元素。

其中，下级骨架屏结构是指更细粒度的页面骨架结构，所包括的页面要素数量比上级骨架屏结构多，内容也更详细，随着层级的向上，对下级骨架屏结构中的页面元素进行进一步精简，页面元素逐层减少，生成不同粒度的骨架结构。

示例性的，将生成的不同等级的骨架屏结构按照金字塔的方式进行构建，实现金字塔从底层到顶层逐层缩减页面元素。最底层的骨架屏结构是最详细的页面框架布局，包括了所有的页面元素，也就是最细粒度的框架结构，而上级骨架屏结构中的页面元素是下级骨架屏结构去除部分页面元素确定的，即粗粒度的框架结构。骨架屏金字塔结构实现骨架屏从繁到简的逐级递减，高度概括抽象。如图2所示，为页面的骨架屏金字塔结构的示意图，图2中最右侧的骨架屏结构为骨架屏金字塔的顶层结构，从左到右骨架屏结构中的页面元素逐层增加，骨架结构粒度越来越细，直至最后一层骨架屏结构包括了最左侧页面中的所有页面元素。

本申请实施例的技术方案，通过确定页面元素的属性信息对页面元素进行区分，以根据区分结果构建不同等级的骨架屏结构。对页面实现了不同等级骨架屏结构的自动生成，提高骨架屏结构的生成效率；并且在开发人员对页面进行开发时，可以直接选择适配等级的骨架屏结构，避免在页面结构重构后需要对骨架屏结构进行修改，进而提高开发人员的开发效率。

图3是根据本申请实施例提供的另一种页面骨架屏生成方法的流程示意图。本实施例是在上述实施例的基础上提出的一种可选方案。参见图3，本实施例提供的页面骨架屏生成方法包括：

S310、获取页面中至少两个页面元素，并确定页面元素的属性信息，其中，属性信息为页面元素在页面中所属文档对象模型DOM的层级。

其中，页面元素在页面中所属文档对象模型DOM的层级是指该页面元素对应的DOM节点距离文档对象模型根节点的层级数量。示例性的，页面元素A对应的DOM节点所在的位置与根节点相邻，则页面元素A的层级为1；页面元素B对应的DOM节点所在的位置与根节点之间的节点数量为2，则页面元素B的层级为3，以此类推可以确定页面中所有页面元素的层级。

通过对页面元素在页面中所属文档对象模型DOM的层级的确定，实现对页面元素层级的确定，使得页面元素的层级可以准确描述页面元素对页面的贡献度高低，层级越小，表示距离根节点越近，所表征的贡献度越高。

S320、根据层级与层级权重的映射关系，确定页面元素的层级权重；其中，映射关系包括层级与层级权重为逆增长关系。

其中，层级与层级权重的映射关系可以根据骨架屏结构的等级粗细粒度构建需求进行预先确定，或者根据页面元素的层级总数量和各层级页面元素的数量进行预先确定，在此不作限制。并且，由于层级越高，对应的页面元素距离根节点的距离越远，对页面的贡献度也越小，因此层级权重越小；相反，层级越小，对应的页面元素距离根节点的距离越近，对页面的贡献度也越高，因此层级权重越大。

具体的，预先确定层级与层级权重的映射关系，根据各页面元素的层级从映射关系中确定对应的层级权重。示例性的，页面中所有页面元素的层级区间为1-10，则层级与层级权重的映射关系为10-1，即层级为1的页面元素的层级权重为10，层级为2的页面元素的层级权重为9，以此类推，通过该映射关系即可确定页面中各页面元素的层级权重。

S330、根据层级权重对页面元素进行区分。

通过页面元素的层级权重的不同可以对页面元素进行区分。示例性的，为层级权重划分区间，例如权重1-3为第一区间，权重4-6为第二区间，权重为7-10为第三区间，则将页面元素划分为不同等级，权重在第一区间的页面元素为第一类别，权重在第二区间的页面元素为第二类别，权重在第三区间的页面元素为第三类别，以此完成对页面元素的区分。

S340、根据区分结果，确定各页面元素归属于至少两级骨架屏结构，其中，每级骨架屏结构所对应的页面元素不完全相同。

根据层级权重确定的区分结果，为各页面元素确定不同等级的归属骨架屏结构。示例性的，将第三类别的页面元素归属为第一等级的骨架屏结构，将第三类别和第二类别的页面元素归属为第二等级的骨架屏结构，将三个类别所有的页面元素归属为第三等级的骨架屏结构，以完成为页面构建不同等级不同粗细粒度的骨架屏结构。

本申请实施例的技术方案，通过页面元素在页面中所属文档对象模型DOM的层级确定页面元素的层级，进而确定页面元素的层级权重，通过层级权重实现对页面元素的区分，保证了对页面元素的区分结果可以反映页面元素对页面的贡献度高低，进而保证根据区分结果构建不同等级骨架屏结构的精准度，使得不同等级的骨架屏结构可以准确反映页面不同粒度的页面框架。

图4是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图。本实施例是在上述实施例的基础上提出的一种可选方案。参见图4，本实施例提供的页面骨架屏生成方法包括：

S410、获取页面中至少两个页面元素，并确定页面元素的属性信息，其中，属性信息为页面元素在页面中所属文档对象模型DOM的层级以及页面元素的标签内容。

其中，页面元素的标签内容用于表征该页面元素中的内容所代表的类型以及字体属性信息，如字体字号或者加粗等信息。页面元素的标签内容可以通过对页面结构的解析进行获取。示例性的，在页面元素开头以不同的字符表示不同的标签内容，如<div>表示文字段落，<img>表示图片，<h1>-<h5>表示不同字号标题等。

通过对页面元素的标签内容的确定，实现了对页面元素中所表示的具体内容重要性的确定，根据标签内容所表示的不同类型为该页面元素确定不同的重要性，以及根据页面元素中字体属性信息为页面元素确定对应的重要性，当页面元素属于特殊字体时表示该页面元素中所表示信息量较为重要。

S420、根据标签内容与内容权重的映射关系，确定页面元素的内容权重。

其中，标签内容与内容权重的映射关系可以根据骨架屏结构的等级粗细粒度构建需求进行预先确定，或者根据页面元素的具体内容进行预先确定，在此不作限制。示例性的，标签内容与内容权重的映射关系可以是：标签内容为标题的页面元素的内容权重为10，H1和H2字号标题的页面元素的内容权重为8，H3-H5字号标题的页面元素的内容权重为3，文字段落的页面元素的内容权重为4，图片的页面元素的内容权重为4。

根据页面元素中的标签内容在映射关系中确定对应的内容权重，以此作为该页面元素的内容权重。

S430、根据层级与层级权重的映射关系，确定页面元素的层级权重。

S440、根据内容权重和层级权重对页面元素进行区分。

根据内容权重和层级权重可以确定该页面元素的总权重。示例性的，将内容权重和层级权重之和作为页面元素的总权重，或者对内容权重和层级权重进行加权求和，求和结果为页面元素的总权重。

根据总权重的不同对页面元素进行区分。示例性的，总权重的范围为1-100，则将1-30设为第一区间，31-60设置为第二区间，61-100设置为第三区间，根据区间范围和各页面元素的总权重实现对页面元素的区分。

S450、根据区分结果，确定各页面元素归属于至少两级骨架屏结构，其中，每级骨架屏结构所对应的页面元素不完全相同。

本申请实施例的技术方案，通过页面元素在页面中所属文档对象模型DOM的层级确定页面元素的层级，进而确定页面元素的层级权重，结合根据标签内容确定的页面元素内容权重，实现根据内容权重和层级权重共同完成对页面元素的区分，进一步提高了对页面元素贡献度高低确定的准确度，进而保证根据区分结果构建不同等级骨架屏结构的精准度，使得不同等级的骨架屏结构可以准确反映页面不同粒度的页面框架。

图5是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图。本实施例是在上述实施例的基础上提出的一种可选方案。参见图5，本实施例提供的页面骨架屏生成方法包括：

S510、获取页面中至少两个页面元素，并确定页面元素的属性信息。

S520、根据至少一类属性信息与属性权重的映射关系，确定各页面元素的至少一个属性权重值。

其中，至少一类属性信息是指可以表征页面元素对骨架屏显示有关的信息，例如上述实施例中的页面元素在页面中所属文档对象模型DOM的层级以及标签内容等。除此之外，还包括页面元素在页面中的空间布局属性、页面元素在页面中的关键性属性或者页面元素的内容属性等。

根据不同类属性信息对骨架屏结构构建的贡献度不同，确定属性信息与属性权重的映射关系，进而可以根据页面元素的该类属性信息的具体值确定映射的属性权重值。可选的，对于页面元素可以包括多种对骨架屏结构显示有关的属性信息，因此可以包括多个属性权重值，可以根据骨架屏结构构建的实际需求进行确定，在此不作限制。

在上述实施例中，只是列举了两种具体的与骨架屏显示有关的属性信息，除此之外，对于页面元素其他属性信息也在本申请的保护范围内。

S530、根据各页面元素的属性权重值所属区间范围，对各页面元素进行区分；其中，区间范围的数量为至少两个，每个区间范围分别与一级骨架屏结构对应。

其中，区间范围可以根据骨架屏实际构建需求进行预先设置。对于页面元素的属性权重为至少两个，可以对至少两个属性权重进行综合计算，确定页面元素的总权重。针对总权重确定所述区间范围。

示例性的，总权重的区间范围为1-100，第一级骨架屏结构对应的区间范围为60-100，第二级骨架屏结构对应的区间范围为40-100，第三级骨架屏结构对应的区间范围为1-100。根据页面元素的总权重确定该页面元素归属骨架屏结构的区分结果。例如，当页面元素的总权重为50时，所述区间范围包括第一级和第二级，则该页面元素的区分结果在第一级骨架屏结构中和第二级骨架屏结构中。

由于每级骨架屏结构对应了一个区间范围，因此每级骨架屏结构中所包括的页面元素表示出的内容详细程度不同，实现不同等级骨架屏结构的粒度不同。开发人员在对页面进行开发时，根据开发需求，对页面的修改程度，选择不同等级的骨架屏结构，例如只是针对页面具体文字内容进行修改，可以直接提取最细粒度的骨架屏结构进行开发；又或者，当需要对页面中更大范围的区域进行调整，则根据调整内容从不同等级的骨架屏结构中确定匹配的骨架屏结构，能够让前端开发人员专注页面业务开发，不需要关注骨架屏开发和页面结构重构后的骨架屏修改。

S540、根据区分结果，确定各页面元素归属于至少两级骨架屏结构，其中，每级骨架屏结构所对应的页面元素不完全相同。

示例性的，如图6所示是页面构建不同等级骨架屏结构的流程示意图。

S610、页面结构解析：对页面进行页面结构解析，得到页面中的整体布局信息。

S620、页面结构提取：获取页面中所有的页面元素，确定页面元素的属性信息，并根据页面元素的属性信息将页面元素进行区分，根据区分结果得到包括页面布局结构的骨架树(skeleton tree)。

S630、金字塔抽取生成新的骨架树：通过对骨架树中页面元素的抽取，对页面元素实现划分，根据划分结果生成新的骨架树。根据新的骨架树可以得到不同等级的骨架结构。根据抽取等级的不同生成的骨架结构的粗细程度不同。若页面元素抽取等级低，则执行S640；若页面元素抽取等级高，则执行S650。

S640、抽取等级低的骨架结构：当生成新的骨架树中包括的页面元素数量较多时，生成的为等级低的骨架屏结构。

S650、抽取等级高的骨架结构：当生成新的骨架树中包括的页面元素数量较少时，生成的为等级高的骨架屏结构。

本申请实施例的技术方案，通过页面元素的至少一类属性信息对至少一类属性权重进行确定，根据属性权重确定页面元素所属骨架屏结构的等级，进而构建不同等级的骨架屏结构。对页面实现了不同等级骨架屏结构的自动生成，提高骨架屏结构的生成效率；并且在开发人员对页面进行开发时，可以直接选择适配等级的骨架屏结构，避免在页面结构重构后需要对骨架屏结构进行修改，进而提高开发人员的开发效率。

图7是根据本申请实施例提供的页面骨架屏生成装置的结构示意图。参见图7，本申请实施例公开了页面骨架屏生成装置700，该装置700可以包括：

属性确定模块701，用于获取页面中至少两个页面元素，并确定所述页面元素的属性信息；

元素区分模块702，用于根据所述属性信息对各所述页面元素进行区分；

骨架屏构建模块703，用于根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。

本申请实施例的技术方案，通过确定页面元素的属性信息对页面元素进行区分，以根据区分结果构建不同等级的骨架屏结构。对页面实现了不同等级骨架屏结构的自动生成，提高骨架屏结构的生成效率；并且在开发人员对页面进行开发时，可以直接选择适配等级的骨架屏结构，避免在页面结构重构后需要对骨架屏结构进行修改，进而提高开发人员的开发效率。

可选的，所述骨架屏结构的等级从上至下分为至少两级，上级骨架屏结构包括相邻下级骨架屏结构的部分页面元素。

可选的，所述属性信息包括下述至少一类：

所述页面元素在所述页面中的空间布局属性；

所述页面元素在所述页面中的关键性属性；

所述页面元素的内容属性。

可选的，所述属性信息为所述页面元素在页面中所属文档对象模型DOM的层级。

可选的，所述元素区分模块，具体用于：

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；其中，所述映射关系包括所述层级与所述层级权重为逆增长关系；

根据所述层级权重对所述页面元素进行区分。

可选的，所述属性信息还包括所述页面元素的标签内容。

可选的，所述元素区分模块，具体用于：

根据所述标签内容与内容权重的映射关系，确定所述页面元素的内容权重；

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；

根据所述内容权重和所述层级权重对所述页面元素进行区分。

可选的，所述元素区分模块，具体用于：

根据至少一类属性信息与属性权重的映射关系，确定各所述页面元素的至少一个属性权重值；

根据各所述页面元素的属性权重值所属区间范围，对各所述页面元素进行区分；其中，所述区间范围的数量为至少两个，每个所述区间范围分别与一级骨架屏结构对应。

可选的，所述属性确定模块，包括：

页面解析单元，用于对所述页面进行解析，得到包含所有页面元素的文档对象模型的骨架树；其中，所述骨架树中包括如下至少一项：每个页面元素的标签类型、标签名称、尺寸以及层级关系，所述页面为基于HTML协议构建的页面。

本申请实施例所提供的页面骨架屏生成装置可执行本申请任意实施例所提供的页面骨架屏生成方法，具备执行页面骨架屏生成方法相应的功能模块和有益效果。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图8所示，是根据本申请实施例的页面骨架屏生成的方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图8所示，该电子设备包括：一个或多个处理器801、存储器802，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图8中以一个处理器801为例。

存储器802即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的页面骨架屏生成的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面骨架屏生成的方法。

存储器802作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面骨架屏生成的方法对应的程序指令/模块(例如，附图7所示的属性确定模块701、元素区分模块702以及骨架屏构建703)。处理器801通过运行存储在存储器802中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及页面骨架屏生成，即实现上述方法实施例中的页面骨架屏生成的方法。

存储器802可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据页面骨架屏生成的电子设备的使用所创建的数据等。此外，存储器802可以包括高速随机存储存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器802可选包括相对于处理器801远程设置的存储器，这些远程存储器可以通过网络连接至页面骨架屏生成的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

页面骨架屏生成的方法的电子设备还可以包括：输入装置803和输出装置804。处理器801、存储器802、输入装置803和输出装置804可以通过总线或者其他方式连接，图8中以通过总线连接为例。

输入装置803可接收输入的数字或字符信息，以及产生与页面骨架屏生成的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置804可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

本申请实施例的技术方案，通过确定页面元素的属性信息对页面元素进行区分，以根据区分结果构建不同等级的骨架屏结构。对页面实现了不同等级骨架屏结构的自动生成，提高骨架屏结构的生成效率；并且在开发人员对页面进行开发时，可以直接选择适配等级的骨架屏结构，避免在页面结构重构后需要对骨架屏结构进行修改，进而提高开发人员的开发效率。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (20)

1.一种页面骨架屏生成方法，包括：

获取页面中至少两个页面元素，并确定所述页面元素的属性信息；

根据所述属性信息对各所述页面元素进行区分；

根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。

2.根据权利要求1所述的方法，其中，所述骨架屏结构的等级从上至下分为至少两级，上级骨架屏结构包括相邻下级骨架屏结构的部分页面元素。

3.根据权利要求1所述的方法，其中，所述属性信息包括下述至少一类：

所述页面元素在所述页面中的空间布局属性；

所述页面元素在所述页面中的关键性属性；

所述页面元素的内容属性。

4.根据权利要求1或3所述的方法，其中，所述属性信息为所述页面元素在页面中所属文档对象模型DOM的层级。

5.根据权利要求4所述的方法，其中，所述根据所述属性信息对各所述页面元素进行区分，包括：

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；其中，所述映射关系包括所述层级与所述层级权重为逆增长关系；

根据所述层级权重对所述页面元素进行区分。

6.根据权利要求4所述的方法，其中，所述属性信息还包括所述页面元素的标签内容。

7.根据权利要求6所述的方法，其中，所述根据所述属性信息对各所述页面元素进行区分，包括：

根据所述标签内容与内容权重的映射关系，确定所述页面元素的内容权重；

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；

根据所述内容权重和所述层级权重对所述页面元素进行区分。

8.根据权利要求1-3任一项所述的方法，其中，所述根据所述属性信息对各所述页面元素进行区分，包括：

根据至少一类属性信息与属性权重的映射关系，确定各所述页面元素的至少一个属性权重值；

根据各所述页面元素的属性权重值所属区间范围，对各所述页面元素进行区分；其中，所述区间范围的数量为至少两个，每个所述区间范围分别与一级骨架屏结构对应。

9.根据权利要求1所述的方法，其中，所述获取页面中至少两个页面元素，包括：

对所述页面进行解析，得到包含所有页面元素的文档对象模型的骨架树；其中，所述骨架树中包括如下至少一项：每个页面元素的标签类型、标签名称、尺寸以及层级关系，所述页面为基于HTML协议构建的页面。

10.一种页面骨架屏生成装置，包括：

属性确定模块，用于获取页面中至少两个页面元素，并确定所述页面元素的属性信息；

元素区分模块，用于根据所述属性信息对各所述页面元素进行区分；

骨架屏构建模块，用于根据区分结果，确定各所述页面元素归属于至少两级骨架屏结构，其中，每级所述骨架屏结构所对应的页面元素不完全相同。

11.根据权利要求10所述的装置，其中，所述骨架屏结构的等级从上至下分为至少两级，上级骨架屏结构包括相邻下级骨架屏结构的部分页面元素。

12.根据权利要求10所述的装置，其中，所述属性信息包括下述至少一类：

所述页面元素在所述页面中的空间布局属性；

所述页面元素在所述页面中的关键性属性；

所述页面元素的内容属性。

13.根据权利要求10或12所述的装置，其中，所述属性信息为所述页面元素在页面中所属文档对象模型DOM的层级。

14.根据权利要求13所述的装置，其中，所述元素区分模块，具体用于：

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；其中，所述映射关系包括所述层级与所述层级权重为逆增长关系；

根据所述层级权重对所述页面元素进行区分。

15.根据权利要求13所述的装置，其中，所述属性信息还包括所述页面元素的标签内容。

16.根据权利要求15所述的装置，其中，所述元素区分模块，具体用于：

根据所述标签内容与内容权重的映射关系，确定所述页面元素的内容权重；

根据所述层级与层级权重的映射关系，确定所述页面元素的层级权重；

根据所述内容权重和所述层级权重对所述页面元素进行区分。

17.根据权利要求10-12任一项所述的装置，其中，所述元素区分模块，具体用于：

根据至少一类属性信息与属性权重的映射关系，确定各所述页面元素的至少一个属性权重值；

根据各所述页面元素的属性权重值所属区间范围，对各所述页面元素进行区分；其中，所述区间范围的数量为至少两个，每个所述区间范围分别与一级骨架屏结构对应。

18.根据权利要求10所述的装置，其中，所述属性确定模块，包括：

页面解析单元，用于对所述页面进行解析，得到包含所有页面元素的文档对象模型的骨架树；其中，所述骨架树中包括如下至少一项：每个页面元素的标签类型、标签名称、尺寸以及层级关系，所述页面为基于HTML协议构建的页面。

19.一种电子设备，其中，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-9中任一项所述的方法。

20.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行权利要求1-9中任一项所述的方法。

Images