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

技术编号:26890996 阅读:13 留言:0更新日期:2020-12-29 16:08
本申请公开了一种页面骨架屏生成方法、装置、电子设备和存储介质,涉及云计算技术领域。具体实现方案为:获取页面中至少两个页面元素,并确定所述页面元素的属性信息;根据所述属性信息对各所述页面元素进行区分;根据区分结果,确定各所述页面元素归属于至少两级骨架屏结构,其中,每级所述骨架屏结构所对应的页面元素不完全相同。本申请能够提高页面骨架屏的生成效率。

【技术实现步骤摘要】
页面骨架屏生成方法、装置、电子设备和存储介质
本申请涉及数据处理
,尤其涉及云计算
,具体涉及一种页面骨架屏生成方法、装置、电子设备和存储介质。
技术介绍
开发人员在对网页页面进行开发时,为了提升网页的用户产品体验,减少用户因等待而流失,在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充需要显示的数据内容。然而,当开发人员需要对页面内容和结构进行重新开发时,需要重新编写匹配的骨架屏,开发量大,开发效率较低。
技术实现思路
本公开提供了一种用于页面骨架屏生成方法、装置、电子设备以及存储介质。根据本公开的一方面,提供了一种页面骨架屏生成方法,包括:获取页面中至少两个页面元素,并确定所述页面元素的属性信息;根据所述属性信息对各所述页面元素进行区分;根据区分结果,确定各所述页面元素归属于至少两级骨架屏结构,其中,每级所述骨架屏结构所对应的页面元素不完全相同。根据本公开的一方面,提供了一种页面骨架屏生成装置,包括:属性确定模块,用于获取页面中至少两个页面元素,并确定所述页面元素的属性信息;元素区分模块,用于根据所述属性信息对各所述页面元素进行区分;骨架屏构建模块,用于根据区分结果,确定各所述页面元素归属于至少两级骨架屏结构,其中,每级所述骨架屏结构所对应的页面元素不完全相同。根据本公开的一方面,提供了一种电子设备,该电子设备包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如本申请实施例中任一项所述的页面骨架屏生成方法。根据本公开的一方面,提供了一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行如本申请实施例中任一项所述的页面骨架屏生成方法。根据本申请的技术能够提高页面骨架屏的生成效率。应当理解,本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征,也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。附图说明附图用于更好地理解本方案,不构成对本申请的限定。其中:图1是根据本申请实施例提供的一种页面骨架屏生成方法的流程示意图;图2是根据本申请实施例提供的页面的骨架屏金字塔结构的示意图;图3是根据本申请实施例提供的另一种页面骨架屏生成方法的流程示意图;图4是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图;图5是根据本申请实施例提供的又一种页面骨架屏生成方法的流程示意图;图6是根据本申请实施例提供的页面构建不同等级骨架屏结构的流程示意图;图7是根据本申请实施例提供的一种页面骨架屏生成装置的结构示意图;图8是用来实现本申请实施例的页面骨架屏生成方法的电子设备的框图。具体实施方式以下结合附图对本申请的示范性实施例做出说明,其中包括本申请实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本申请的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。图1是根据本申请实施例提供的页面骨架屏生成方法的流程示意图。本实施例可适用于自动生成多级页面骨架屏的情况,从而提高开发人员对前端页面骨架屏的开发效率。本实施例公开的页面骨架屏生成方法可以由页面骨架屏生成装置来执行,该装置可以由软件和/或硬件的方式实现,配置于电子设备中。参见图1,本实施例提供的页面骨架屏生成方法包括:S110、获取页面中至少两个页面元素,并确定页面元素的属性信息。其中,页面元素是指构成网页页面的基本元素,例如块级元素:h1~h6、p、div、ul、table等具有块的属性,能够独立存在且元素之间以换行分割;顶级元素:html、body以及框架等;内联元素:指依附其他块级元素存在,紧接于被联元素之间显示而不换行。常用的内联元素包括img、span、li、br等。页面元素可以理解为页面上的图片、按钮或者文本框等。属性信息是指页面元素中对骨架屏显示有关的相关信息,例如页面元素的标签类型、标签名称、层级关系或者在页面中的尺寸大小等。在一个可行的实施例中,页面元素的属性信息包括下述至少一类:页面元素在页面中的空间布局属性;页面元素在页面中的关键性属性;页面元素的内容属性。其中,空间布局属性是指页面元素在页面中的区域覆盖信息,根据区域覆盖信息可以确定该页面元素在骨架屏结构中的占位信息。关键性属性用于表征该页面元素对页面的贡献度,例如根据该页面元素对应的文档对象模型(DocumentObjectModel,DOM)节点距离页面根节点的距离确定该页面元素对页面的贡献度,即确定该页面元素的关键性,距离根节点越近贡献度越大,关键性属性值越高。内容属性用于描述该页面元素在页面中所表示的内容,例如内容属性包括页面元素中所包括的具体内容,以及内容所表达出的信息量大小等。通过空间布局属性可以确定页面元素的区域信息,提高确定页面元素在骨架屏结构中占位信息的准确性;通过关键性属性可以确定页面元素对页面的贡献度,提高确定归属于骨架屏结构的页面元素的准确性;通过内容属性可以确定页面元素中所包含内容所表达信息量的高低,提高确定归属于骨架屏结构的页面元素的准确性。通过对页面元素的各种属性信息的确定,提高对页面元素的掌握度,进而提高骨架屏显示的精准度,避免在骨架屏结构中出现信息量较低的页面元素,使得展示给用户的骨架屏尽可能表达页面的整体框架。在一个可行的实施例中,获取页面中至少两个页面元素,包括:对页面进行解析,得到包含所有页面元素的文档对象模型的骨架树;其中,骨架树中包括如下至少一项:每个页面元素的标签类型、标签名称、尺寸以及层级关系,页面为基于HTML协议构建的页面。其中,DOM是指描述页面整体内容和结构等的基于树的API文档。骨架树是指一种存储页面布局结构的数据存储结构。标签类型是指描述页面元素进行分类的结果。标签名称用于对该页面元素进行区分。尺寸是指该页面元素在页面中的所覆盖的区域信息,例如包括该页面元素的覆盖页面的宽度和高度。层级关系是指页面元素之间的上下级或者包含关系。标签类型、标签名称、尺寸以及层级关系均可以通过对页面进行解析直接获取。具体的,根据输入的页面地址获取页面结构,或者直接获取页面HTML页面结构,基于HTML和CSS渲染规则,对页面结构进行解析,得到页面中各页面元素的标签类型、标签名称、尺寸以及层级关系,并根据获取到的页面元素相关信息通过树结构进行存储,得到骨架树。在骨架树中可以清楚地得到各页面元素的基本信息以及页面元素之间的层级关系,例如A页面元素属于B页面元素的子节点。通过对页面的解析得到页面元素的本文档来自技高网...

【技术保护点】
1.一种页面骨架屏生成方法,包括:/n获取页面中至少两个页面元素,并确定所述页面元素的属性信息;/n根据所述属性信息对各所述页面元素进行区分;/n根据区分结果,确定各所述页面元素归属于至少两级骨架屏结构,其中,每级所述骨架屏结构所对应的页面元素不完全相同。/n

【技术特征摘要】
1.一种页面骨架屏生成方法,包括:
获取页面中至少两个页面元素,并确定所述页面元素的属性信息;
根据所述属性信息对各所述页面元素进行区分;
根据区分结果,确定各所述页面元素归属于至少两级骨架屏结构,其中,每级所述骨架屏结构所对应的页面元素不完全相同。


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


3.根据权利要求1所述的方法,其中,所述属性信息包括下述至少一类:
所述页面元素在所述页面中的空间布局属性;
所述页面元素在所述页面中的关键性属性;
所述页面元素的内容属性。


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


5.根据权利要求4所述的方法,其中,所述根据所述属性信息对各所述页面元素进行区分,包括:
根据所述层级与层级权重的映射关系,确定所述页面元素的层级权重;其中,所述映射关系包括所述层级与所述层级权重为逆增长关系;
根据所述层级权重对所述页面元素进行区分。


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


7.根据权利要求6所述的方法,其中,所述根据所述属性信息对各所述页面元素进行区分,包括:
根据所述标签内容与内容权重的映射关系,确定所述页面元素的内容权重;
根据所述层级与层级权重的映射关系,确定所述页面元素的层级权重;
根据所述内容权重和所述层级权重对所述页面元素进行区分。


8.根据权利要求1-3任一项所述的方法,其中,所述根据所述属性信息对各所述页面元素进行区分,包括:
根据至少一类属性信息与属性权重的映射关系,确定各所述页面元素的至少一个属性权重值;
根据各所述页面元素的属性权重值所属区间范围,对各所述页面元素进行区分;其中,所述区间范围的数量为至少两个,每个所述区间范围分别与一级骨架屏结构对应。


9.根据权利要求1所述的方法,其中,所述获取页面中至少两个页面元素,包括:
对所述页面进行解析,得到包含所有页面元素的文档对象模型的骨架树;其中,所述骨架树中包括如下至少一项:每个页面元素的标签类型、标签名称、尺寸以及层级关系,所述页面为基于HTML协议构建的页面。


10.一种页面骨架屏生成装置,包括:
属性确定模块,用于获取页面中至少两个页面元素,并确定所述页面元素的属性信息;
元素区分模块,用于根据所述属性信息对各所述页面元素进行区分;
骨架屏构建模块,用于根据区...

【专利技术属性】
技术研发人员:兰建国李升起白志杰
申请(专利权)人:北京百度网讯科技有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1