页面骨架展示方法、装置、电子设备及存储介质制造方法及图纸

本公开提供了一种页面骨架展示方法、装置、电子设备及存储介质，该方法包括：基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息；所述第一属性信息包括元素路径信息、元素尺寸信息以及元素样式信息中的至少一种；基于所述目标页面的源码文件，确定所述至少一个页面元素的第二属性信息；所述第二属性信息包括元素位置信息；基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件；基于所述骨架代码文件，展示骨架页面。本公开实施例，可以自动生成元素级的骨架代码文件，可以提高页面骨架的场景适配能力，进而提高骨架代码文件的生成效率。进而提高骨架代码文件的生成效率。进而提高骨架代码文件的生成效率。

【技术实现步骤摘要】
页面骨架展示方法、装置、电子设备及存储介质


[0001]本公开涉及计算机
，具体而言，涉及一种页面骨架展示方法、页面骨架展示装置、电子设备以及计算机可读存储介质。

技术介绍

[0002]骨架屏(Skeleton Screen)，也被称为加载占位图，它可以在页面数据加载完成前先给用户展示出页面的大致结构，在页面数据加载完成后再显示页面的数据内容。
[0003]在相关技术中，生成页面骨架的方式包括通过预渲染插件实现，在使用该方法生成骨架屏时，其页面骨架代码的生成逻辑为页面级别，因此在生成骨架代码的过程中具有组装不够灵活、适用场景单一等缺点。

技术实现思路

[0004]本公开实施例至少提供一种页面骨架展示方法、装置、电子设备以及存储介质。
[0005]本公开实施例提供了一种页面骨架展示方法，包括：
[0006]基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息；所述第一属性信息包括元素路径信息、元素尺寸信息以及元素样式信息中的至少一种；
[0007]基于所述目标页面的源码文件，确定所述至少一个页面元素的第二属性信息；所述第二属性信息包括元素位置信息；
[0008]基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件；
[0009]基于所述骨架代码文件，展示骨架页面。
[0010]本公开实施例，通过确定至少一个页面元素的第一属性信息以及第二属性信息生成骨架代码文件，也即基于页面元素(即组件级)生成骨架代码文件，相对于通常使用的页面级的页面骨架生成方法，可以根据需求对元素骨架进行灵活组装，有利于提高页面骨架的场景适配能力，进而提高骨架代码文件的生成效率。
[0011]一种可选的实施方式中，所述基于所述源码文件，确定所述目标页面元素的第二属性信息，包括：
[0012]基于所述源码文件，生成抽象语法树；
[0013]基于所述抽象语法树，确定所述第二属性信息。
[0014]本公开实施例中，通过将所述源码文件解析为抽象语法树的文件格式，可以提高确定所述目标页面元素的第二属性信息的效率，进而可以提高骨架代码文件的生成效率。
[0015]一种可选的实施方式中，所述基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件，包括：
[0016]将属于同一目标页面元素的所述第一属性信息与所述第二属性信息进行匹配；
[0017]基于所述第一属性信息，对所述目标页面元素进行数据处理，生成所述骨架代码文件。
[0018]本公开实施例中，通过将属于同一目标页面元素的第一属性信息与第二属性信息
进行匹配，并基于第一属性信息对目标页面元素进行处理，如此，可以生成具有源码文件逻辑的与之匹配的骨架代码文件，即可以确保骨架代码文件的逻辑性。
[0019]一种可选的实施方式中，所述第二属性信息还包括元素内容信息，所述基于所述第一属性信息，对所述目标页面元素进行数据处理，包括：
[0020]删除所述目标页面元素中的元素内容信息；
[0021]基于所述第一属性信息，确定所述目标页面元素的元素尺寸信息和骨架标识信息。
[0022]本公开实施例中，由于第二属性信息是基于源码文件确定的，因此在删除元素内容信息后，能够保持原有逻辑，并且，基于所述第一属性信息，确定目标页面元素的元素尺寸信息和骨架标识信息，可以确保目标页面元素与源码文件的页面元素的结构类似，进而可以确保骨架代码文件的逻辑性。
[0023]一种可选的实施方式中，所述基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息之前，所述方法还包括：
[0024]响应于页面加载请求操作，加载所述目标页面对应的目标页面内容；
[0025]基于所述目标页面内容，确定所述目标页面相对于当前页面发生改变的所述至少一个页面元素。
[0026]本公开实施例中，基于目标页面内容，确定目标页面相对于当前页面发生改变的所述至少一个页面元素，如此，可以实现只针对部分需要改变的目标页面内容的更新，进而提高骨架代码文件的细粒度。
[0027]一种可选的实施方式中，所述方法还包括：
[0028]在确定所述目标页面内容加载完成的情况下，基于所述骨架页面以及所述目标页面内容，展示所述目标页面。
[0029]本公开实施例中，在确定所述目标页面内容加载完成的情况下，基于骨架页面以及目标页面内容，展示目标页面，如此可以更准确的衔接骨架页面与目标页面的展示过程，以使目标页面的展示形式更加丰富和形象。
[0030]一种可选的实施方式中，所述骨架代码文件包括多个子骨架代码文件；所述基于所述骨架代码文件展示骨架页面，包括：
[0031]基于所述多个子骨架代码文件，展示所述骨架页面。
[0032]本公开实施例中，由于骨架代码文件包括多个子骨架代码文件，因此可以基于多个子骨架代码文件，展示所述骨架页面，比如可以根据具体需求将所述多个子骨架代码文件进行自动拼接，进而可以提升骨架代码文件的适配能力。
[0033]本公开实施例还提供一种页面骨架展示装置，所述装置包括：
[0034]第一属性信息确定模块，用于基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息；所述第一属性信息包括元素路径信息、元素尺寸信息以及元素样式信息中的至少一种；
[0035]第二属性信息确定模块，用于获取所述预设页面的第一元素的第一属性信息；所述第一属性信息包括元素路径信息、元素尺寸信息以及元素样式信息中的至少一种；
[0036]骨架代码文件生成模块，用于基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件；
[0037]骨架页面展示模块，用于基于所述骨架代码文件，展示骨架页面。
[0038]一种可选的实施方式中，所述第二属性信息确定模块具体用于：
[0039]基于所述源码文件，生成抽象语法树；
[0040]基于所述抽象语法树，确定所述第二属性信息。
[0041]一种可选的实施方式中，所述骨架代码文件生成模块具体用于：
[0042]将属于同一目标页面元素的所述第一属性信息与所述第二属性信息进行匹配，其中，所述目标页面元素为所述至少一个页面元素的其中一个；
[0043]基于所述第一属性信息，对所述目标页面元素进行数据处理，生成所述骨架代码文件。
[0044]一种可选的实施方式中，所述骨架代码文件生成模块具体用于：
[0045]删除所述目标页面元素中的元素内容信息；
[0046]基于所述第一属性信息，确定所述目标页面元素的元素尺寸信息和骨架标识信息。
[0047]一种可选的实施方式中，所述装置还包括页面内容加载模块以及页面元素确定模块，所述页面内容加载模块用于：
[0048]响应于页面加载请求操作，加载所述目标页面对应的目标页面内容；
[0049]所述页面元素确定模块用于：<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面骨架展示方法，其特征在于，包括：基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息；所述第一属性信息包括元素路径信息、元素尺寸信息以及元素样式信息中的至少一种；基于所述目标页面的源码文件，确定所述至少一个页面元素的第二属性信息；所述第二属性信息包括元素位置信息；基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件；基于所述骨架代码文件，展示骨架页面。2.根据权利要求1所述的方法，其特征在于，所述基于所述目标页面的源码文件，确定所述至少一个页面元素的第二属性信息，包括：基于所述源码文件，生成抽象语法树；基于所述抽象语法树，确定所述至少一个页面元素的第二属性信息。3.根据权利要求1所述的方法，其特征在于，所述基于所述第一属性信息以及所述第二属性信息，生成骨架代码文件，包括：将属于同一目标页面元素的所述第一属性信息与所述第二属性信息进行匹配，其中，所述目标页面元素为所述至少一个页面元素的其中一个；基于所述第一属性信息，对所述目标页面元素进行数据处理，生成所述骨架代码文件。4.根据权利要求3所述的方法，其特征在于，所述第二属性信息还包括元素内容信息，所述基于所述第一属性信息，对所述目标页面元素进行数据处理，包括：删除所述目标页面元素中的元素内容信息；基于所述第一属性信息，确定所述目标页面元素的元素尺寸信息和骨架标识信息。5.根据权利要求1至4任意一项所述的方法，其特征在于，所述基于领域特定语言解析工具，确定目标页面中的至少一个页面元素的第一属性信息之前，所述方法还包括：响应于页面加载请求操作，加载所述目标页...

【专利技术属性】
技术研发人员：彭志国，张舜宇，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：