CN117725330A - 骨架屏的生成方法及装置、电子设备 - Google Patents

Abstract

本申请公开了一种骨架屏的生成方法及装置、电子设备，涉及计算机技术领域。该方法包括：当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面；通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于M个渲染后的空元素生成目标页面对应的骨架屏。通过本申请，解决了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题。

Description

骨架屏的生成方法及装置、电子设备

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种骨架屏的生成方法及装置、电子设备。

背景技术

目前，骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。

而在相关技术中，一般会在编译阶段粗略的生成页面级的骨架屏，且在编译阶段粗略的生成页面级的骨架屏时，会导致生成骨架屏的成本较高，且生成骨架屏的效果不佳。而且，在编译阶段粗略的生成页面级的骨架屏与实际内容的匹配度较低。

针对相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种骨架屏的生成方法及装置、电子设备，以解决相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种骨架屏的生成方法。该方法包括：当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，N为大于等于1的正整数；通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

进一步地，在通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合之前，所述方法还包括：获取目标程序代码，其中，所述目标程序代码中至少包括使用JS语言编写的程序代码；获取所述目标页面中每行纹理的参数信息集合，其中，所述参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，所述目标页面中至少包括S行纹理，S为大于1的正整数；执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合。

进一步地，执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合包括：获取每个伪元素对应的纹理的行数信息；依据每个伪元素对应的纹理的行数信息，确定所述目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；依据所述目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；执行所述目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到所述目标页面中每个伪元素的属性信息集合。

进一步地，获取所述目标页面中每行纹理的参数信息集合包括：接收目标指令，其中，所述目标指令用于指示获取所述目标页面中的纹理的W个参数信息，所述W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；响应所述目标指令，得到所述目标页面中的纹理的W个参数信息；依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合。

进一步地，依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合包括：依据所述W个参数信息中的纹理的行数信息和纹理的宽度信息，确定所述目标页面中每行纹理的宽度信息；依据所述W个参数信息中的纹理的行数信息和纹理的高度信息，确定所述目标页面中每行纹理的高度信息；依据所述目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定所述目标页面中每行纹理的尺寸信息；依据所述W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定所述目标页面中每行纹理的位置信息；依据所述W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定所述目标页面中每行纹理的背景颜色信息；基于所述目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取所述目标页面中每行纹理的参数信息集合。

进一步地，通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素包括：通过所述层叠样式表中的所述目标选择器检测所述目标页面中是否存在空元素；若检测到所述目标页面中不存在空元素，则禁止筛选出所述M个空元素；若检测到所述目标页面中存在空元素，则从所述目标页面中筛选出空元素，得到所述M个空元素。

进一步地，依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素包括：获取每个空元素对应的原始属性信息集合，其中，所述原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到所述M个渲染后的空元素。

进一步地，基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏包括：基于所述M个渲染后的空元素确定所述目标页面中每个空元素的样式信息；依据所述目标页面中每个空元素的样式信息生成所述目标页面对应的所述骨架屏。

为了实现上述目的，根据本申请的另一方面，提供了一种骨架屏的生成装置。该装置包括：第一获取单元，用于当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，N为大于等于1的正整数；第一筛选单元，用于通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；第一处理单元，用于依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；第一生成单元，用于基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

进一步地，所述装置还包括：第二获取单元，用于在通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合之前，获取目标程序代码，其中，所述目标程序代码中至少包括使用JS语言编写的程序代码；第三获取单元，用于获取所述目标页面中每行纹理的参数信息集合，其中，所述参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，所述目标页面中至少包括S行纹理，S为大于1的正整数；第一确定单元，用于执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合。

进一步地，所述第一确定单元包括：第一获取模块，用于获取每个伪元素对应的纹理的行数信息；第一确定模块，用于依据每个伪元素对应的纹理的行数信息，确定所述目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；第二获取模块，用于依据所述目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；第一处理模块，用于执行所述目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到所述目标页面中每个伪元素的属性信息集合。

进一步地，所述第三获取单元包括：第一接收模块，用于接收目标指令，其中，所述目标指令用于指示获取所述目标页面中的纹理的W个参数信息，所述W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；第一响应模块，用于响应所述目标指令，得到所述目标页面中的纹理的W个参数信息；第三获取模块，用于依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合。

进一步地，所述第三获取模块包括：第一确定子模块，用于依据所述W个参数信息中的纹理的行数信息和纹理的宽度信息，确定所述目标页面中每行纹理的宽度信息；第二确定子模块，用于依据所述W个参数信息中的纹理的行数信息和纹理的高度信息，确定所述目标页面中每行纹理的高度信息；第三确定子模块，用于依据所述目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定所述目标页面中每行纹理的尺寸信息；第四确定子模块，用于依据所述W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定所述目标页面中每行纹理的位置信息；第五确定子模块，用于依据所述W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定所述目标页面中每行纹理的背景颜色信息；第一获取子模块，用于基于所述目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取所述目标页面中每行纹理的参数信息集合。

进一步地，所述第一筛选单元包括：第一检测模块，用于通过所述层叠样式表中的所述目标选择器检测所述目标页面中是否存在空元素；第二处理模块，用于若检测到所述目标页面中不存在空元素，则禁止筛选出所述M个空元素；第一筛选模块，用于若检测到所述目标页面中存在空元素，则从所述目标页面中筛选出空元素，得到所述M个空元素。

进一步地，所述第一处理单元包括：第四获取模块，用于获取每个空元素对应的原始属性信息集合，其中，所述原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；第二确定模块，用于依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；第三处理模块，用于依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到所述M个渲染后的空元素。

进一步地，所述第一生成单元包括：第三确定模块，用于基于所述M个渲染后的空元素确定所述目标页面中每个空元素的样式信息；第一生成模块，用于依据所述目标页面中每个空元素的样式信息生成所述目标页面对应的所述骨架屏。

为了实现上述目的，根据本申请的另一方面，提供了一种计算机可读存储介质，所述存储介质存储程序，其中，所述程序执行上述的任意一项所述的骨架屏的生成方法。

为了实现上述目的，根据本申请的另一方面，提供了一种电子设备，所述电子设备包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述的任意一项所述的骨架屏的生成方法。

通过本申请，采用以下步骤：当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面，目标页面中至少包括N个伪元素，N为大于等于1的正整数；通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素，其中，空元素为没有子元素的元素，M为大于1的正整数；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于M个渲染后的空元素生成目标页面对应的骨架屏，解决了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题。通过层叠样式表获取待使用骨架屏显示的目标页面中每个伪元素的属性信息集合，再通过层叠样式表中的目标选择器筛选出目标页面中的多个空元素，然后依据每个伪元素的属性信息集合对每个空元素进行渲染处理，并基于多个渲染后的空元素生成目标页面对应的骨架屏，从而避免了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题，进而达到了提升生成的骨架屏与页面实际要展示的内容的匹配度的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

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

图2是根据本申请实施例提供的骨架屏的生成方法的流程图二；

图3是根据本申请实施例提供的骨架屏的生成方法的示意图；

图4是根据本申请实施例提供的骨架屏的生成装置的示意图；

图5是根据本申请实施例提供的电子设备的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，本公开所涉及的相关信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于展示的数据、分析的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。例如，本系统和相关用户或机构间设置有接口，在获取相关信息之前，需要通过接口向前述的用户或机构发送获取请求，并在接收到前述的用户或机构反馈的同意信息后，获取相关信息。

下面结合优选的实施步骤对本发明进行说明，图1是根据本申请实施例提供的骨架屏的生成方法的流程图一，如图1所示，该方法包括如下步骤：

步骤S101，当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面，目标页面中至少包括N个伪元素，N为大于等于1的正整数。

例如，可以监听元素渲染周期。且在监听到在对待使用骨架屏显示的页面中的元素进行渲染时，可以使用层叠样式表获取待使用骨架屏显示的页面中的每个伪元素的尺寸信息、位置信息和背景颜色信息等。

步骤S102，通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素，其中，空元素为没有子元素的元素，M为大于1的正整数。

例如，可以使用CSS(Cascading Style Sheets，层叠样式表)选择器empty(用于选择没有子元素的元素)筛选出待使用骨架屏显示的页面中的多个空元素，且空元素是没有子元素的元素。

步骤S103，依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素。

例如，可以通过对筛选出的每个空元素的尺寸信息、位置信息和背景颜色信息等属性信息进行修改处理，从而对筛选出的每个空元素进行渲染处理。比如，可以将筛选出的每个空元素的尺寸信息、位置信息和背景颜色信息等设置成获取到的每个伪元素的尺寸信息、位置信息和背景颜色信息等。

步骤S104，基于M个渲染后的空元素生成目标页面对应的骨架屏。

例如，可以根据修改尺寸信息、位置信息和背景颜色信息等属性信息后的多个空元素生成待使用骨架屏显示的页面对应的骨架屏。

通过上述的步骤S101至S104，通过层叠样式表获取待使用骨架屏显示的目标页面中每个伪元素的属性信息集合，再通过层叠样式表中的目标选择器筛选出目标页面中的多个空元素，然后依据每个伪元素的属性信息集合对每个空元素进行渲染处理，并基于多个渲染后的空元素生成目标页面对应的骨架屏，从而避免了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题，进而达到了提升生成的骨架屏与页面实际要展示的内容的匹配度的效果。

可选地，在本申请实施例提供的骨架屏的生成方法中，在通过层叠样式表获取目标页面中每个伪元素的属性信息集合之前，该方法还包括：获取目标程序代码，其中，目标程序代码中至少包括使用JS语言编写的程序代码；获取目标页面中每行纹理的参数信息集合，其中，参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，目标页面中至少包括S行纹理，S为大于1的正整数；执行目标程序代码，结合目标页面中每行纹理的参数信息集合，得到目标页面中每个伪元素的属性信息集合。

例如，可以先获取待使用骨架屏显示的页面中的每行纹理的尺寸信息、位置信息和背景颜色信息等属性信息，然后可以执行使用JS语言(JavaScript，一种高级的动态编程语言)编写的程序代码，并根据待使用骨架屏显示的页面中的每行纹理的尺寸信息、位置信息和背景颜色信息等属性信息确定待使用骨架屏显示的页面中的伪元素的尺寸信息、位置信息和背景颜色信息等属性信息。

通过上述的方案，根据页面中每行纹理的属性信息可以快速准确的得到该页面中的伪元素的属性信息。

可选地，在本申请实施例提供的骨架屏的生成方法中，执行目标程序代码，结合目标页面中每行纹理的参数信息集合，得到目标页面中每个伪元素的属性信息集合包括：获取每个伪元素对应的纹理的行数信息；依据每个伪元素对应的纹理的行数信息，确定目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；依据目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；执行目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到目标页面中每个伪元素的属性信息集合。

例如，可以先设定待使用骨架屏显示的页面中的每个伪元素对应多少行纹理，然后再根据待使用骨架屏显示的页面中的每个伪元素对应的纹理的尺寸信息、位置信息和背景颜色信息等属性信息，再执行使用JS语言(JavaScript，一种高级的动态编程语言)编写的程序代码，将每个伪元素对应的多行纹理的尺寸信息累加在一起，然后可以得到每个伪元素的尺寸信息；并可以将每个伪元素对应的多行纹理的位置信息累加在一起，然后可以得到每个伪元素的位置信息；并可以将每个伪元素对应的多行纹理的背景颜色信息累加在一起，然后可以得到每个伪元素的背景颜色信息。

综上所述，通过将页面中每个伪元素对应的纹理的属性信息累加在一起，可以快速准确的得到该页面中的每个伪元素的属性信息。

可选地，在本申请实施例提供的骨架屏的生成方法中，获取目标页面中每行纹理的参数信息集合包括：接收目标指令，其中，目标指令用于指示获取目标页面中的纹理的W个参数信息，W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；响应目标指令，得到目标页面中的纹理的W个参数信息；依据W个参数信息，获取目标页面中每行纹理的参数信息集合。

例如，在获取待使用骨架屏显示的页面中的每行纹理的参数信息集合时，可以先通过接收并响应目标指令，获取待使用骨架屏显示的页面中的每行纹理的行数信息、宽度信息、高度信息、位置偏移信息、颜色信息、色块占比信息和色块偏移信息等，然后可以将获取到的每行纹理的行数信息、宽度信息、高度信息、位置偏移信息、颜色信息、色块占比信息和色块偏移信息等汇总在一起，得到待使用骨架屏显示的页面中的每行纹理的参数信息集合。

通过上述的方案，可以快速准确的获取到待使用骨架屏显示的页面中的每行纹理的参数信息集合。

可选地，在本申请实施例提供的骨架屏的生成方法中，依据W个参数信息，获取目标页面中每行纹理的参数信息集合包括：依据W个参数信息中的纹理的行数信息和纹理的宽度信息，确定目标页面中每行纹理的宽度信息；依据W个参数信息中的纹理的行数信息和纹理的高度信息，确定目标页面中每行纹理的高度信息；依据目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定目标页面中每行纹理的尺寸信息；依据W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定目标页面中每行纹理的位置信息；依据W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定目标页面中每行纹理的背景颜色信息；基于目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取目标页面中每行纹理的参数信息集合。

例如，可以根据待使用骨架屏显示的页面中的纹理的行数信息和宽度信息，得到该页面中每行纹理的宽度信息；并根据待使用骨架屏显示的页面中的纹理的行数信息和高度信息，得到该页面中每行纹理的高度信息；再根据每行纹理的宽度信息和高度信息，确定每行纹理的尺寸信息；然后可以根据纹理的行数信息和位置偏移信息，确定该页面中每行纹理的位置信息；并根据纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定该页面中每行纹理的背景颜色信息；然后可以将每行纹理的尺寸信息、位置信息和背景颜色信息等汇总在一起，得到待使用骨架屏显示的页面中的每行纹理的参数信息集合。

通过上述的方案，可以快速准确的获取到待使用骨架屏显示的页面中的每行纹理的尺寸信息、位置信息和背景颜色信息等属性信息。

可选地，在本申请实施例提供的骨架屏的生成方法中，通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素包括：通过层叠样式表中的目标选择器检测目标页面中是否存在空元素；若检测到目标页面中不存在空元素，则禁止筛选出M个空元素；若检测到目标页面中存在空元素，则从目标页面中筛选出空元素，得到M个空元素。

例如，上述的目标选择器可以为CSS(Cascading Style Sheets，层叠样式表)中的empty选择器，且该empty选择器可以用于选择没有子元素的元素。然后可以使用empty选择器(上述的目标选择器)检测待使用骨架屏显示的页面中是否存在空元素；且如果检测到待使用骨架屏显示的页面中不存在空元素，则不能从待使用骨架屏显示的页面中筛选出空元素；如果检测到待使用骨架屏显示的页面中存在空元素，则可以从待使用骨架屏显示的页面中筛选出空元素。

综上所述，通过使用empty选择器可以快速准确的从待使用骨架屏显示的页面中筛选出空元素。

可选地，在本申请实施例提供的骨架屏的生成方法中，依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素包括：获取每个空元素对应的原始属性信息集合，其中，原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到M个渲染后的空元素。

例如，可以先获取待使用骨架屏显示的页面中的每个空元素的原始的尺寸信息、位置信息和背景颜色信息等属性信息，然后可以根据每个伪元素的尺寸信息、位置信息和背景颜色信息等属性信息确定每个空元素对应的尺寸信息、位置信息和背景颜色信息等属性信息；并可以根据每个空元素对应的尺寸信息、位置信息和背景颜色信息等属性信息对每个空元素的原始的尺寸信息、位置信息和背景颜色信息等属性信息进行修改，并得到修改完属性信息后的空元素。

通过上述的方案，可以方便的根据待使用骨架屏显示的页面中每个伪元素的属性信息对该页面中的空元素进行渲染处理。

可选地，在本申请实施例提供的骨架屏的生成方法中，基于M个渲染后的空元素生成目标页面对应的骨架屏包括：基于M个渲染后的空元素确定目标页面中每个空元素的样式信息；依据目标页面中每个空元素的样式信息生成目标页面对应的骨架屏。

例如，可以根据渲染处理后的空元素确定待使用骨架屏显示的页面中的每个空元素的样式信息，再根据待使用骨架屏显示的页面中的每个空元素的样式信息生成该页面对应的骨架屏。

通过上述的方案，可以快速准确的生成待使用骨架屏显示的页面对应的骨架屏。

例如，本实施例提供了一种基于运行时的原子级骨架屏生成方法，通过在运行时利用CSS选择器检测元素子节点的空置状态以及骨架纹理的绘制，而JS进程只需负责骨架尺寸、位置的计算，便可生成与内容完全匹配的骨架屏。另外，本实施例具有的优点如下：巧妙地将CSS选择器empty与伪元素结合，将原本属于JS进程计算的复杂频繁的空置状态检测以及骨架纹理绘制，转移到渲染进程，JS进程只需要计算一次纹理尺寸和位置，大大减少来计算量，再依附于固有元素样式，可在运行时实现实时绘制高度匹配的原子级的骨架屏。

例如，图2是根据本申请实施例提供的骨架屏的生成方法的流程图二，如图2所示，一种基于运行时的原子级骨架屏生成方法，包括以下步骤：

S1、标记纹理指令，取值SK_VALUE(一种通信协议指令，用于在设备之间传输键值对数据)；

S2、解析SK_VALUE，获取绘制纹理的初始参数；

行数lines、宽width、高height、x方向偏移pisitionX、颜色color、色块占比radio、色块偏移offset；

S3、逐行计算纹理的尺寸和位置，并累加计算总宽高，获得伪元素的尺寸和背景参数：最小宽after_min-width，高度after_height，利用liner-gradient绘制背景after_background；

positionY＝positionY_n-l+lineHeight_n-1

positionX二positionX

S4、监听元素渲染周期，元素渲染后，用CSS选择器empty::after(伪元素选择器，用于表示在一个空元素之后插入内容)，将S3的计算结果绘制到到元素，实现骨架屏的绘制。

例如，图3是根据本申请实施例提供的骨架屏的生成方法的示意图，如图3所示，生成骨架屏的过程具体可以为：先使用CSS(Cascading Style Sheets，层叠样式表)中的empty选择器(用于选择没有子元素的元素)筛选出待使用骨架屏显示的页面中的空元素，然后可以执行使用JS语言(JavaScript，一种高级的动态编程语言)编写的程序代码，并获取待使用骨架屏显示的页面中的每个伪元素的位置信息(对应图3中的position)、尺寸信息(对应图3中的size)和背景颜色信息等；然后可以根据该页面中的每个伪元素的位置信息、尺寸信息和背景颜色信息等确定页面中每个空元素的样式信息(对应图3中的style)，再根据每个空元素的样式信息生成该页面对应的骨架屏。

另外，在本实施例中提出了一种基于运行时的原子级骨架屏生成方法，通过将CSS选择器empty与伪元素结合，将原本属于JS进程计算的复杂频繁的空置状态检测以及骨架纹理绘制，转移到渲染进程，JS进程只需要计算一次纹理尺寸和位置，大大减少来计算量，使运行时快速生成原子级的骨架屏成为现实。

而且，与现有技术相比，本实施例的有益效果如下：

(1)可生成原子级的骨架屏，与实际内容高度匹配；

(2)依附于原有元素，降低白屏时间，减少闪烁问题；

(3)借助CSS选择器，大大降低JS计算量，可在运行时实时绘制骨架屏，方便快捷。

综上，本申请实施例提供的骨架屏的生成方法，通过当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面，目标页面中至少包括N个伪元素，N为大于等于1的正整数；通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素，其中，空元素为没有子元素的元素，M为大于1的正整数；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于M个渲染后的空元素生成目标页面对应的骨架屏，解决了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题。通过层叠样式表获取待使用骨架屏显示的目标页面中每个伪元素的属性信息集合，再通过层叠样式表中的目标选择器筛选出目标页面中的多个空元素，然后依据每个伪元素的属性信息集合对每个空元素进行渲染处理，并基于多个渲染后的空元素生成目标页面对应的骨架屏，从而避免了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题，进而达到了提升生成的骨架屏与页面实际要展示的内容的匹配度的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种骨架屏的生成装置，需要说明的是，本申请实施例的骨架屏的生成装置可以用于执行本申请实施例所提供的用于骨架屏的生成方法。以下对本申请实施例提供的骨架屏的生成装置进行介绍。

图4是根据本申请实施例提供的骨架屏的生成装置的示意图。如图4所示，该装置包括：第一获取单元401、第一筛选单元402、第一处理单元403和第一生成单元404。

具体地，第一获取单元401，用于当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面，目标页面中至少包括N个伪元素，N为大于等于1的正整数；

第一筛选单元402，用于通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素，其中，空元素为没有子元素的元素，M为大于1的正整数；

第一处理单元403，用于依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；

第一生成单元404，用于基于M个渲染后的空元素生成目标页面对应的骨架屏。

综上，本申请实施例提供的骨架屏的生成装置，通过第一获取单元401当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取目标页面中每个伪元素的属性信息集合，其中，属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，目标页面为待使用骨架屏显示的页面，目标页面中至少包括N个伪元素，N为大于等于1的正整数；第一筛选单元402通过层叠样式表中的目标选择器筛选出目标页面中的M个空元素，其中，空元素为没有子元素的元素，M为大于1的正整数；第一处理单元403依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；第一生成单元404基于M个渲染后的空元素生成目标页面对应的骨架屏，解决了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题。通过层叠样式表获取待使用骨架屏显示的目标页面中每个伪元素的属性信息集合，再通过层叠样式表中的目标选择器筛选出目标页面中的多个空元素，然后依据每个伪元素的属性信息集合对每个空元素进行渲染处理，并基于多个渲染后的空元素生成目标页面对应的骨架屏，从而避免了相关技术中生成的骨架屏与页面实际要展示的内容的匹配度较低的问题，进而达到了提升生成的骨架屏与页面实际要展示的内容的匹配度的效果。

可选地，在本申请实施例提供的骨架屏的生成装置中，该装置还包括：第二获取单元，用于在通过层叠样式表获取目标页面中每个伪元素的属性信息集合之前，获取目标程序代码，其中，目标程序代码中至少包括使用JS语言编写的程序代码；第三获取单元，用于获取目标页面中每行纹理的参数信息集合，其中，参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，目标页面中至少包括S行纹理，S为大于1的正整数；第一确定单元，用于执行目标程序代码，结合目标页面中每行纹理的参数信息集合，得到目标页面中每个伪元素的属性信息集合。

可选地，在本申请实施例提供的骨架屏的生成装置中，第一确定单元包括：第一获取模块，用于获取每个伪元素对应的纹理的行数信息；第一确定模块，用于依据每个伪元素对应的纹理的行数信息，确定目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；第二获取模块，用于依据目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；第一处理模块，用于执行目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到目标页面中每个伪元素的属性信息集合。

可选地，在本申请实施例提供的骨架屏的生成装置中，第三获取单元包括：第一接收模块，用于接收目标指令，其中，目标指令用于指示获取目标页面中的纹理的W个参数信息，W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；第一响应模块，用于响应目标指令，得到目标页面中的纹理的W个参数信息；第三获取模块，用于依据W个参数信息，获取目标页面中每行纹理的参数信息集合。

可选地，在本申请实施例提供的骨架屏的生成装置中，第三获取模块包括：第一确定子模块，用于依据W个参数信息中的纹理的行数信息和纹理的宽度信息，确定目标页面中每行纹理的宽度信息；第二确定子模块，用于依据W个参数信息中的纹理的行数信息和纹理的高度信息，确定目标页面中每行纹理的高度信息；第三确定子模块，用于依据目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定目标页面中每行纹理的尺寸信息；第四确定子模块，用于依据W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定目标页面中每行纹理的位置信息；第五确定子模块，用于依据W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定目标页面中每行纹理的背景颜色信息；第一获取子模块，用于基于目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取目标页面中每行纹理的参数信息集合。

可选地，在本申请实施例提供的骨架屏的生成装置中，第一筛选单元包括：第一检测模块，用于通过层叠样式表中的目标选择器检测目标页面中是否存在空元素；第二处理模块，用于若检测到目标页面中不存在空元素，则禁止筛选出M个空元素；第一筛选模块，用于若检测到目标页面中存在空元素，则从目标页面中筛选出空元素，得到M个空元素。

可选地，在本申请实施例提供的骨架屏的生成装置中，第一处理单元包括：第四获取模块，用于获取每个空元素对应的原始属性信息集合，其中，原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；第二确定模块，用于依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；第三处理模块，用于依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到M个渲染后的空元素。

可选地，在本申请实施例提供的骨架屏的生成装置中，第一生成单元包括：第三确定模块，用于基于M个渲染后的空元素确定目标页面中每个空元素的样式信息；第一生成模块，用于依据目标页面中每个空元素的样式信息生成目标页面对应的骨架屏。

骨架屏的生成装置包括处理器和存储器，上述的第一获取单元401、第一筛选单元402、第一处理单元403和第一生成单元404等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提升生成的骨架屏与页面实际要展示的内容的匹配度。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本发明实施例提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现所述骨架屏的生成方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述骨架屏的生成方法。

如图5所示，本发明实施例提供了一种电子设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，N为大于等于1的正整数；通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

处理器执行程序时还实现以下步骤：在通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合之前，所述方法还包括：获取目标程序代码，其中，所述目标程序代码中至少包括使用JS语言编写的程序代码；获取所述目标页面中每行纹理的参数信息集合，其中，所述参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，所述目标页面中至少包括S行纹理，S为大于1的正整数；执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合。

处理器执行程序时还实现以下步骤：执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合包括：获取每个伪元素对应的纹理的行数信息；依据每个伪元素对应的纹理的行数信息，确定所述目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；依据所述目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；执行所述目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到所述目标页面中每个伪元素的属性信息集合。

处理器执行程序时还实现以下步骤：获取所述目标页面中每行纹理的参数信息集合包括：接收目标指令，其中，所述目标指令用于指示获取所述目标页面中的纹理的W个参数信息，所述W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；响应所述目标指令，得到所述目标页面中的纹理的W个参数信息；依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合。

处理器执行程序时还实现以下步骤：依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合包括：依据所述W个参数信息中的纹理的行数信息和纹理的宽度信息，确定所述目标页面中每行纹理的宽度信息；依据所述W个参数信息中的纹理的行数信息和纹理的高度信息，确定所述目标页面中每行纹理的高度信息；依据所述目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定所述目标页面中每行纹理的尺寸信息；依据所述W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定所述目标页面中每行纹理的位置信息；依据所述W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定所述目标页面中每行纹理的背景颜色信息；基于所述目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取所述目标页面中每行纹理的参数信息集合。

处理器执行程序时还实现以下步骤：通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素包括：通过所述层叠样式表中的所述目标选择器检测所述目标页面中是否存在空元素；若检测到所述目标页面中不存在空元素，则禁止筛选出所述M个空元素；若检测到所述目标页面中存在空元素，则从所述目标页面中筛选出空元素，得到所述M个空元素。

处理器执行程序时还实现以下步骤：依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素包括：获取每个空元素对应的原始属性信息集合，其中，所述原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到所述M个渲染后的空元素。

处理器执行程序时还实现以下步骤：基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏包括：基于所述M个渲染后的空元素确定所述目标页面中每个空元素的样式信息；依据所述目标页面中每个空元素的样式信息生成所述目标页面对应的所述骨架屏。

本文中的设备可以是服务器、PC、PAD、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，N为大于等于1的正整数；通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合之前，所述方法还包括：获取目标程序代码，其中，所述目标程序代码中至少包括使用JS语言编写的程序代码；获取所述目标页面中每行纹理的参数信息集合，其中，所述参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，所述目标页面中至少包括S行纹理，S为大于1的正整数；执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合包括：获取每个伪元素对应的纹理的行数信息；依据每个伪元素对应的纹理的行数信息，确定所述目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；依据所述目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；执行所述目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到所述目标页面中每个伪元素的属性信息集合。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：获取所述目标页面中每行纹理的参数信息集合包括：接收目标指令，其中，所述目标指令用于指示获取所述目标页面中的纹理的W个参数信息，所述W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；响应所述目标指令，得到所述目标页面中的纹理的W个参数信息；依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合包括：依据所述W个参数信息中的纹理的行数信息和纹理的宽度信息，确定所述目标页面中每行纹理的宽度信息；依据所述W个参数信息中的纹理的行数信息和纹理的高度信息，确定所述目标页面中每行纹理的高度信息；依据所述目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定所述目标页面中每行纹理的尺寸信息；依据所述W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定所述目标页面中每行纹理的位置信息；依据所述W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定所述目标页面中每行纹理的背景颜色信息；基于所述目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取所述目标页面中每行纹理的参数信息集合。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素包括：通过所述层叠样式表中的所述目标选择器检测所述目标页面中是否存在空元素；若检测到所述目标页面中不存在空元素，则禁止筛选出所述M个空元素；若检测到所述目标页面中存在空元素，则从所述目标页面中筛选出空元素，得到所述M个空元素。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素包括：获取每个空元素对应的原始属性信息集合，其中，所述原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到所述M个渲染后的空元素。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏包括：基于所述M个渲染后的空元素确定所述目标页面中每个空元素的样式信息；依据所述目标页面中每个空元素的样式信息生成所述目标页面对应的所述骨架屏。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种骨架屏的生成方法，其特征在于，包括：

当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，

N为大于等于1的正整数；

通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；

依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；

基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

2.根据权利要求1所述的方法，其特征在于，在通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合之前，所述方法还包括：

获取目标程序代码，其中，所述目标程序代码中至少包括使用JS语言编写的程序代码；

获取所述目标页面中每行纹理的参数信息集合，其中，所述参数信息集合中至少包括：每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，所述目标页面中至少包括S行纹理，S为大于1的正整数；

执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合。

3.根据权利要求2所述的方法，其特征在于，执行所述目标程序代码，结合所述目标页面中每行纹理的参数信息集合，得到所述目标页面中每个伪元素的属性信息集合包括：

获取每个伪元素对应的纹理的行数信息；

依据每个伪元素对应的纹理的行数信息，确定所述目标页面中每个伪元素对应的T行纹理，其中，T为大于等于1且小于S的正整数；

依据所述目标页面中每行纹理的参数信息集合，获取每个伪元素对应的T行纹理中每行纹理的参数信息集合；

执行所述目标程序代码，对每个伪元素对应的T行纹理中每行纹理的参数信息集合中的参数信息进行累加计算，得到所述目标页面中每个伪元素的属性信息集合。

4.根据权利要求2所述的方法，其特征在于，获取所述目标页面中每行纹理的参数信息集合包括：

接收目标指令，其中，所述目标指令用于指示获取所述目标页面中的纹理的W个参数信息，所述W个参数信息中至少包括：纹理的行数信息、纹理的宽度信息、纹理的高度信息、纹理的位置偏移信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，W为大于1的正整数；

响应所述目标指令，得到所述目标页面中的纹理的W个参数信息；

依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合。

5.根据权利要求4所述的方法，其特征在于，依据所述W个参数信息，获取所述目标页面中每行纹理的参数信息集合包括：

依据所述W个参数信息中的纹理的行数信息和纹理的宽度信息，确定所述目标页面中每行纹理的宽度信息；

依据所述W个参数信息中的纹理的行数信息和纹理的高度信息，确定所述目标页面中每行纹理的高度信息；

依据所述目标页面中每行纹理的宽度信息和每行纹理的高度信息，确定所述目标页面中每行纹理的尺寸信息；

依据所述W个参数信息中的纹理的行数信息和纹理的位置偏移信息，确定所述目标页面中每行纹理的位置信息；

依据所述W个参数信息中的纹理的行数信息、纹理的颜色信息、纹理的色块占比信息和纹理的色块偏移信息，确定所述目标页面中每行纹理的背景颜色信息；

基于所述目标页面中每行纹理的尺寸信息、每行纹理的位置信息和每行纹理的背景颜色信息，获取所述目标页面中每行纹理的参数信息集合。

6.根据权利要求1所述的方法，其特征在于，通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素包括：

通过所述层叠样式表中的所述目标选择器检测所述目标页面中是否存在空元素；

若检测到所述目标页面中不存在空元素，则禁止筛选出所述M个空元素；

若检测到所述目标页面中存在空元素，则从所述目标页面中筛选出空元素，得到所述M个空元素。

7.根据权利要求1所述的方法，其特征在于，依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素包括：

获取每个空元素对应的原始属性信息集合，其中，所述原始属性信息集合中至少包括：每个空元素的尺寸信息、每个空元素的位置信息和每个空元素的背景颜色信息；

依据每个伪元素的属性信息集合确定每个空元素对应的属性信息集合；

依据每个空元素对应的属性信息集合对每个空元素对应的原始属性信息集合中的每个原始属性信息进行修改处理，得到所述M个渲染后的空元素。

8.根据权利要求1所述的方法，其特征在于，基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏包括：

基于所述M个渲染后的空元素确定所述目标页面中每个空元素的样式信息；

依据所述目标页面中每个空元素的样式信息生成所述目标页面对应的所述骨架屏。

9.一种骨架屏的生成装置，其特征在于，包括：

第一获取单元，用于当监听到对目标页面中的元素进行渲染处理时，通过层叠样式表获取所述目标页面中每个伪元素的属性信息集合，其中，所述属性信息集合中至少包括：每个伪元素的尺寸信息、每个伪元素的位置信息和每个伪元素的背景颜色信息，所述目标页面为待使用骨架屏显示的页面，所述目标页面中至少包括N个伪元素，N为大于等于1的正整数；

第一筛选单元，用于通过所述层叠样式表中的目标选择器筛选出所述目标页面中的M个空元素，其中，所述空元素为没有子元素的元素，M为大于1的正整数；

第一处理单元，用于依据每个伪元素的属性信息集合对每个空元素进行渲染处理，得到M个渲染后的空元素；

第一生成单元，用于基于所述M个渲染后的空元素生成所述目标页面对应的骨架屏。

10.一种电子设备，其特征在于，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至8中任意一项所述的骨架屏的生成方法。