CN112286525A - 骨架屏生成方法、装置及设备 - Google Patents

Abstract

本发明实施例提供一种骨架屏生成方法、装置及设备。该骨架屏生成方法包括：获取待处理的目标页面；从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息；以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏；其中，目标页面的节点布局与骨架屏的节点布局一致。该方法通过替换目标页面节点的展示信息以获得骨架屏节点，并采用目标页面节点布局生成与该目标页面对应的骨架屏，实现了对页面骨架屏的自动化生成过程，提高了骨架屏生成效率，缩短了页面开发周期。

Description

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

技术领域

本发明涉及互联网技术领域，尤其涉及一种骨架屏生成方法、装置及设备。

背景技术

浏览网页或使用客户端加载一个新页面时，受到终端设备所处网络环境或数据传输速度的限制，常常会出现页面加载不及时的情况。为避免因为直接展示空白页面而使用户误认为页面存在异常，在等待页面加载时，通常会向用户展示与最终页面展示效果对应的骨架屏，以向用户提示该页面正在加载。

目前，与最终页面展示效果对应的骨架屏主要是由用户界面(User Interface，UI)设计人员基于页面布局设计出的一张图片。也就是说，针对每个页面都需要由UI设计人员专门去设计、制作相应的骨架屏图片，这种页面骨架屏的制作方案人工消耗大、开发周期长。

因此，如何提升页面骨架屏的制作效率，成为亟待解决的技术问题。

发明内容

本发明实施例提供一种骨架屏生成方法、装置及设备，用以评估页面对设计稿的还原度。

第一方面，本发明实施例提供一种骨架屏生成方法，该骨架屏生成方法应用于服务器，该骨架屏生成方法包括：

获取待处理的目标页面；

从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息；

以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏；

其中，目标页面的节点布局与骨架屏的节点布局一致。

第二方面，本发明实施例提供一种骨架屏生成装置，该骨架屏生成装置包括：

获取模块，用于获取待处理的目标页面；

筛选模块，用于从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息；

生成模块，用于以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏。

其中，目标页面的节点布局与骨架屏的节点布局一致。

第三方面，本发明实施例提供一种电子设备，其中包括处理器和存储器，其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器至少可以实现第一方面中的骨架屏生成方法。

本发明实施例提供了一种非暂时性机器可读存储介质，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器至少可以实现第一方面中的骨架屏生成方法。

本发明实施例提供的骨架屏生成方案，首先通过在服务器中筛选出目标页面中与预设类型匹配的目标页面节点，将目标页面节点的展示信息替换为预设展示信息，得到经过替换处理的目标页面节点。进而，以经过替换处理的目标页面节点作为骨架屏节点，采用与目标页面一致的节点布局对这些骨架屏节点进行布局，生成与该目标页面对应的骨架屏，实现了对页面骨架屏的自动化生成过程，提高了骨架屏生成效率，缩短了页面开发周期。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种骨架屏生成方法的流程示意图；

图2为本发明实施例提供的一种骨架屏的示意图；

图3为本发明实施例提供的一种骨架屏生成装置的结构示意图；

图4为与图3所示实施例提供的骨架屏生成装置对应的电子设备的结构示意图。

具体实施方式

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

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

随着智能设备的普及，浏览网页或使用客户端加载一个新页面时，受到终端设备所处网络环境或数据传输速度的限制，常常会出现页面加载不及时的情况。为避免因为直接展示空白页面而使用户误认为页面存在异常，在等待页面加载时，通常会向用户展示与最终页面展示效果对应的骨架屏，以向用户提示该页面正在加载。

实际上，整个页面开发流程中，与最终页面展示效果对应的骨架屏主要是由UI设计人员基于页面布局设计出的一张图片。针对每个页面都需要由UI设计人员专门去设计、制作相应的骨架屏图片，这种页面骨架屏的制作方案人工消耗大、开发周期长。

当然，为解决上述技术问题，也可以在客户端的页面代码中嵌入骨架屏生成逻辑，但这种骨架屏生成逻辑会造成页面代码冗余，降低页面代码的开发、加载效率。

综上，本发明实施例提供的骨架屏生成方案所要解决的实际问题在于：如何提升页面骨架屏的制作效率，缩短页面开发周期。

为解决上述技术问题，本发明实施例提供的骨架屏生成方案的核心思想是：

首先，首先通过在服务器中筛选出目标页面中与预设类型匹配的目标页面节点，将目标页面节点的展示信息替换为预设展示信息，得到经过替换处理的目标页面节点。进而，以经过替换处理的目标页面节点作为骨架屏节点，采用与目标页面一致的节点布局对这些骨架屏节点进行布局，生成与该目标页面对应的骨架屏，实现了对页面骨架屏的自动化生成过程。该方案可以自动生成与目标页面对应的骨架屏，避免了依赖相关人员逐一制作骨架屏而带来的骨架屏生成效率低的问题，既可以提高骨架屏生成效率，也可以提升页面开发体验，缩短页面开发周期。

本发明实施例适用于各种页面，包括但不限于网页、及各种应用程序中的页面。这些应用程序可以搭载在各种电子设备中。各种电子设备可以是诸如PC机、笔记本电脑等终端设备，也可以是服务器。该服务器可以是包含一独立主机的物理服务器，或者也可以为主机集群承载的虚拟服务器，或者也可以为云服务器。电子设备也可以是智能投影机、电子白板、幕布、音响、电视机、视频会议终端等各种物联网设备。

下面结合以下实施例对骨架屏生成方法的执行过程进行说明。

图1为本发明实施例提供的一种骨架屏生成方法的流程图。如图1所示，该骨架屏生成方法包括如下步骤：

101、获取待处理的目标页面。

102、从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息。

103、以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏。

本发明实施例中，将需要制作骨架屏的页面称为待处理的目标页面(下文简称目标页面)，将目标页面中各个页面元素称为目标页面节点。基于此，可以理解的是，为保证对目标页面的布局还原度，需要将骨架屏的节点布局设置为与目标页面的节点布局一致。

为提高骨架屏制作效率，图1示出的骨架屏生成方法可以由服务端实现。实际上，该骨架屏生成方法可以由部署在服务端中的应用程序实现，从而避免因加入骨架屏生成逻辑而造成的代码冗余。

为了制作骨架屏，首先需要获取待处理的目标页面，以便在后续骨架屏制作流程中从该目标页面中提取出各个目标页面节点。实际上，目标页面节点可以是DOM节点。

具体而言，在一可选实施例中，101中获取待处理的目标页面，可以实现为：将目标页面地址导入述服务器中，并获取与该目标页面地址对应的目标页面。

实际应用中，将目标页面地址导入述服务器中，在服务器中采用无头浏览器(Puppeteer)打开目标页面地址对应的目标页面，以便获取与目标页面地址对应的目标页面。具体地，与Puppeteer建立通信连接，并通过该通信连接获取与目标页面地址对应的目标页面。

实际上，目标页面地址可以是目标页面开发完成后预先记录的。比如，目标页面开发完成后，将该目标页面的参数预先存储于服务端对应的数据库中。该目标页面的参数包括但不限于页面地址(即各种页面对应的可访问地址，如pageUr信息)。

其中，Puppeteer是Node.js工具引擎。Puppeteer提供了一系列应用程序接口(Application Programming Interface，API)，通过Chrome DevTools Protocol协议(下文简称CDP协议)控制Chromium/Chrome浏览器的行为。默认情况下，Puppeteer是以headless启动Chrome的，也可以通过参数控制启动有界面的Chrome。通过Puppeteer技术无需了解底层CDP协议，即可实现与无头浏览器的通信连接。

进而，获取待处理的目标页面后，102中，从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息。

具体而言，服务器中采用无头浏览器(Puppeteer)打开目标页面地址对应的目标页面之后，遍历目标页面以筛选出与预设类型匹配的目标页面节点，比如图片节点、文本节点。进而，将筛选出的目标页面节点的展示信息替换为预设展示信息。例如，对筛选出的目标页面节点进行灰色背景处理，从而将目标页面节点的展示信息替换为对应尺寸的灰色背景图片。

实际应用中，页面节点比如是目标页面中各个类型的信息块。页面节点的属性比如是这些页面节点各自对应的语义特征、视觉特征、以及不同页面节点之间的相对位置特征。例如，页面节点各自对应的语义特征比如是多个页面节点各自包含的文本内容、图像信息。视觉特征比如是多个页面节点各自包含的外观特征，如页面节点的尺寸信息。不同页面节点之间的相对位置特征比如是不同页面节点之间的距离。

本发明实施例中将目标页面中各个类型的信息块称为目标页面节点。目标页面节点的展示信息比如是目标页面节点对应的语义特征。

对于目标页面节点而言，可以采用目标页面节点的展示信息来划分目标页面节点所属的节点类型。比如，对于目标页面节点对应的语义特征为图像信息，可以划分为图片类型节点；对于目标页面节点对应的语义特征为文本内容，可以划分为文本类型节点；对于目标页面节点对应的语义特征为媒体流信息，可以划分为媒体流类型节点。

对于不同的硬件环境(比如网络运行环境)，与目标页面对应的骨架屏的生成方式可以是实时实现的，也可以是预先离线实现的。实际应用中，为提升骨架屏的加载速度，可以基于硬件环境设置骨架屏中需要展示的预设类型。

假设需要展示的预设类型为文本类型。基于此，在一可选实施例中，从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息，可以实现为：对目标页面进行遍历，以筛选出与文本类型匹配的文本节点；将文本节点的展示信息替换为预设元素，并将文本节点的样式替换为对应的文字骨架样式。

这里，文字骨架样式可以是由节点外观特征决定的。文字骨架样式比如是文本框、文本块、文字泡。实际上，文本类型比如是表格、文字段落、文字标语、标题、以及其他包含文本信息的信息块类型。预设元素可以是各种图形，比如方块、符号等。

举例来说，假设需要展示的预设类型是文字段落。假设预设元素为灰色方块。假设文字骨架样式为两端对齐。基于这些假设，对目标页面进行遍历，判断遍历到的节点所属类型是否为文字段落。若遍历到的节点所属类型为文字段落，则确定该节点为文字段落类的文本节点。并且将这些文本节点的展示信息替换为灰色方块，并将这些灰色方块的排布样式替换为对应的两端对齐。

再例如，假设需要展示的预设类型是表格。假设预设元素为矩形框。假设文字骨架样式为居中对齐。基于这些假设，对目标页面进行遍历，判断遍历到的节点所属类型是否为表格。若遍历到的节点所属类型为表格，则确定该节点为表格类的文本节点。并且将该表格类型节点的展示信息替换为矩形框，并将矩形框的排布样式替换为对应的居中对齐。

假设需要展示的预设类型为图片类型。基于此，另一可选实施例中，从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息，也可以实现为：对目标页面进行遍历，以筛选出与图片类型匹配的图片节点；将图片节点的展示信息替换为预设图片信息，并将图片节点配置为图片骨架样式。

实际上，预设图片信息包括图片颜色。比如，图片颜色可以设置为灰色。当然，根据目标页面节点的类型，也可以将图片信息设置为不同类型。比如，图片节点对应的纹理设置为横条纹，文本节点对应的纹理设置为竖条纹。

举例来说，假设需要展示的预设类型是图片类。假设预设图片信息为灰色方框。基于这些假设，对目标页面进行遍历，判断遍历到的节点所属类型是否为图片类节点。若遍历到的节点所属类型为图片类节点，则确定该节点为图片类型节点。将该图片类型节点的展示信息替换为灰色方框，并将该图片类型节点配置为图片骨架样式。可选地，该灰色方框的尺寸可以根据遍历到的图片类型节点的尺寸信息确定。

再例如，另一实施例中，从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息，还可以实现为：对目标页面进行遍历，以筛选出与媒体流类型匹配的媒体流节点；将媒体流节点的展示信息替换为预设媒体流信息，并将媒体流节点配置为媒体流骨架样式。

通过上述几种示例性方法，可以从目标页面中筛选出目标页面节点，并对目标页面节点进行替换处理。

可选地，在从目标页面中筛选出与预设类型匹配的目标页面节点之前，还可以设置在骨架屏中需要展示的DOM节点的节点属性。DOM节点是指在可扩展标记语言(Extensible Markup Language，XML)文档中的每个成分都是一个节点。整个XML文档就是一个文档节点，每个XML标签是一个元素节点。实际上，节点属性包括节点类型，节点类型包括预设类型。

实际上，可以将目标页面中的所有页面节点均设为需要替换处理的目标页面节点。也可以通过设置DOM节点的节点属性来筛选出需要替换处理的页面节点。对于不需要经过替换处理的页面节点，可以对这些页面节点进行移除、忽略和指定背景色处理。这样，便于在骨架屏中去除冗余页面节点的干扰，提升骨架屏的视觉效果。

最终，经过替换处理的页面节点之后，103中，以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏。

具体而言，假设目标页面包括多屏内容，并且假设目标页面节点包括与多屏内容匹配的多个目标页面节点。基于此，以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏，可以实现为：基于经过替换处理的多个目标页面节点构建出初始骨架屏；从初始骨架屏中选取与首屏内容对应的区域作为待展示的目标骨架屏。

其中，目标骨架屏中的骨架屏节点比如包括：便携式网络图形(Portable NetworkGraphics，PNG)图片、base64编码文本、超文本标记语言(Hyper Text Markup Language，HTML)文件。

举例来说，将经过替换处理的多个目标页面节点构建为初始骨架屏，对初始骨架屏进行截图，从而截取出与首屏内容对应的区域，得到如图2示出的目标骨架屏。图2中示出的矩形框为与各个目标页面节点对应的骨架屏节点。可选地，矩形框的背景颜色可以为灰色。

可选地，目标骨架屏生成后，可以将目标骨架屏预先存储到数据库中。或者，预先记录该目标骨架屏的存储信息，以便后续提取与目标页面对应的骨架屏。实际上，目标骨架屏的存储信息比如是页面名称(Page Name)、骨架屏文件输出目录(Out Put Path)、负责列表参数(比如isRepeatList，即用于指示是否负责列表的第一项的参数)。骨架屏文件输出目录可以用于指示目标骨架屏在数据库中所属的存储位置。

图1示出的骨架屏生成方法的执行过程中，首先通过在服务器中筛选出目标页面中与预设类型匹配的目标页面节点，将目标页面节点的展示信息替换为预设展示信息，得到经过替换处理的目标页面节点。进而，以经过替换处理的目标页面节点作为骨架屏节点，采用与目标页面一致的节点布局对这些骨架屏节点进行布局，生成与该目标页面对应的骨架屏，实现了对页面骨架屏的自动化生成过程，提高了骨架屏生成效率，缩短了页面开发周期。

以下将详细描述本发明的一个或多个实施例的骨架屏生成装置。本领域技术人员可以理解，这些骨架屏生成装置均可使用市售的硬件组件通过本方案所教导的步骤进行配置来构成。

图3为本发明一实施例提供的骨架屏生成装置的结构示意图。如图3所示，该骨架屏生成装置包括：

获取模块301，用于获取待处理的目标页面；

筛选模块302，用于从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息；

生成模块303，用于以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏。

其中，目标页面的节点布局与骨架屏的节点布局一致。

可选地，生成模块303在以经过替换处理的目标页面节点作为骨架屏节点，生成与目标页面对应的骨架屏的过程中，具体用于：

若目标页面包括多屏内容，并且目标页面节点包括与多屏内容匹配的多个目标页面节点，则基于经过替换处理的多个目标页面节点构建出初始骨架屏；从初始骨架屏中选取与首屏内容对应的区域作为待展示的目标骨架屏。

可选地，目标页面节点为DOM节点。

基于此，该骨架屏生成装置还包括设置模块。在筛选模块302从目标页面中筛选出与预设类型匹配的目标页面节点之前，该设置模块具体用于：设置在骨架屏中需要展示的DOM节点的节点属性，节点属性包括节点类型，节点类型包括预设类型。

可选地，在筛选模块302从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息的过程中，具体用于：

若预设类型为文本类型节点，则对目标页面进行遍历，以筛选出与文本类型节点匹配的文本节点；将文本节点的展示信息替换为预设元素，并将文本节点的样式替换为对应的文字骨架样式。

可选地，在筛选模块302从目标页面中筛选出与预设类型匹配的目标页面节点，并将目标页面节点的展示信息替换为预设展示信息的过程中，具体用于：

若预设类型为图片节点类型，则对目标页面进行遍历，以筛选出与图片节点类型匹配的图片节点；将图片节点的展示信息替换为预设图片信息，并将图片节点配置为图片骨架样式。

其中，可选地，预设图片信息包括图片颜色。

可选地，获取模块301在获取待处理的目标页面的过程中，具体用于：将目标页面地址导入服务器中，并获取与目标页面地址对应的目标页面。

可选地，获取模块301在获取与目标页面地址对应的目标页面的过程中，具体用于：通过Puppeteer无头浏览器开启目标页面地址对应的目标页面。

图3所示的骨架屏生成装置可以实现前述图1所示实施例中提供的方法，本实施例未详细描述的部分，可参考前述实施例的相关说明，在此不再赘述。

在一个可能的设计中，上述图3所示的骨架屏生成装置的结构可实现为一电子设备。如图4所示，该电子设备可以包括：处理器401、存储器402。其中，存储器402上存储有可执行代码，当所述可执行代码被处理器401执行时，至少使处理器401可以实现如前述图1所示实施例中提供的骨架屏生成方法。

其中，该电子设备的结构中还可以包括通信接口403，用于与其他设备通信。

另外，本发明实施例提供了一种非暂时性机器可读存储介质，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行前述图1所示实施例中提供的骨架屏生成方法。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的各个模块可以是或者也可以不是物理上分开的。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对本发明做出贡献的部分可以以计算机产品的形式体现出来，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种骨架屏生成方法，其特征在于，应用于服务器，包括：

获取待处理的目标页面；

从所述目标页面中筛选出与预设类型匹配的目标页面节点，并将所述目标页面节点的展示信息替换为预设展示信息；

以经过替换处理的所述目标页面节点作为骨架屏节点，生成与所述目标页面对应的骨架屏；

其中，所述目标页面的节点布局与所述骨架屏的节点布局一致。

2.根据权利要求1所述的方法，其特征在于，所述以经过替换处理的所述目标页面节点作为骨架屏节点，生成与所述目标页面对应的骨架屏，包括：

若所述目标页面包括多屏内容，并且所述目标页面节点包括与所述多屏内容匹配的多个目标页面节点，则

基于经过替换处理的多个目标页面节点构建出初始骨架屏；

从所述初始骨架屏中选取与首屏内容对应的区域作为待展示的目标骨架屏。

3.根据权利要求1所述的方法，其特征在于，所述目标页面节点为DOM节点；

所述从所述目标页面中筛选出与预设类型匹配的目标页面节点之前，还包括：

设置在所述骨架屏中需要展示的DOM节点的节点属性，所述节点属性包括节点类型，所述节点类型包括所述预设类型。

4.根据权利要求1所述的方法，其特征在于，所述从所述目标页面中筛选出与预设类型匹配的目标页面节点，并将所述目标页面节点的展示信息替换为预设展示信息，包括：

若所述预设类型为文本类型节点，则对所述目标页面进行遍历，以筛选出与文本类型节点匹配的文本节点；

将所述文本节点的展示信息替换为预设元素，并将所述文本节点的样式替换为对应的文字骨架样式。

5.根据权利要求1所述的方法，其特征在于，所述从所述目标页面中筛选出与预设类型匹配的目标页面节点，并将所述目标页面节点的展示信息替换为预设展示信息，包括：

若所述预设类型为图片节点类型，则对所述目标页面进行遍历，以筛选出与图片节点类型匹配的图片节点；

将所述图片节点的展示信息替换为预设图片信息，并将所述图片节点配置为图片骨架样式。

6.根据权利要求5所述的方法，其特征在于，预设图片信息包括图片颜色。

7.根据权利要求1所述的方法，其特征在于，所述获取待处理的目标页面，包括：

将目标页面地址导入所述服务器中，并获取与所述目标页面地址对应的所述目标页面。

8.根据权利要求7所述的方法，其特征在于，所述获取与所述目标页面地址对应的所述目标页面，包括：

通过Puppeteer无头浏览器开启所述目标页面地址对应的所述目标页面。

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

获取模块，用于获取待处理的目标页面；

筛选模块，用于从所述目标页面中筛选出与预设类型匹配的目标页面节点，并将所述目标页面节点的展示信息替换为预设展示信息；

生成模块，用于以经过替换处理的所述目标页面节点作为骨架屏节点，生成与所述目标页面对应的骨架屏；

其中，所述目标页面的节点布局与所述骨架屏的节点布局一致。

10.一种电子设备，其特征在于，包括：处理器和存储器，其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1至8中任一项所述的骨架屏生成方法。

Images