CN112559034A - 骨架屏文件的生成方法及系统 - Google Patents

Abstract

本发明实施方式中提供一种骨架屏文件的生成方法，其包括：获取当前网页页面的DOM结构中的各元素节点。遍历各元素节点，判断当前元素节点是否为设定显示属性，根据当前节点的初始尺寸及在文档中的位置生成相同尺寸和位置的绝对定位块元素。根据当前节点的绝对定位块元素生成骨架屏文件。本发明能够更加精准的生成骨架屏页面，减少开发人员工作量，降低开发成本。同时，本发明不采用目标页面的文档结构，只计算各元素的位置和占用空间，生成的节点文件比较扁平，体积较小。同时，本发明还提供了一种骨架屏文件的生成系统。

Description

骨架屏文件的生成方法及系统

技术领域

本发明涉及互联技术领域，应用于互联网终端及智能移动中端的呈现。本发明具体涉及一种骨架屏文件的生成方法及系统。

背景技术

现有技术包括如：骨架屏图、手写骨架屏、饿了么开源插件page-skeleton-webpack-plugin等骨架屏解决方案。

通过上述方案都能生成骨架屏。骨架屏就是在页面数据尚未返回或页面未完成完全渲染前，先给用户呈现一个由灰白块组成的当前页面大致结构，让用户产生页面正在逐渐渲染的感受，从而使加载过程从视觉上变得流畅。

上述现有技术中的缺陷在于：采用骨架屏图与手写骨架屏的骨架屏生成方法生成的骨架屏页面，当页面布局改变时，其骨架屏图也要修改，维护成本高。而采用饿了么开源插件“page-skeleton-webpack-plugin”生成骨架屏的页面与业务人员写的质量有直接关系，经常出现需要手工二次调整的情况。

造成上述现有技术中缺陷的原因在于：骨架屏图和手写骨架屏应为跟页面布局耦合，所以页面样式发生改变也需要跟着修改。饿了么开源插件“page-skeleton-webpack-plugin”所生成的骨架屏节点是基于页面本身的结构和CSS层叠样式表(Cascading StyleSheets)。

发明内容

本发明实施方式提供一种骨架屏文件的生成方法及系统，用于至少解决上述技术问题之一。

第一方面，本发明实施方式中提供一种骨架屏文件的生成方法，其包括：

步骤S101，获取当前网页页面的DOM结构中的各元素节点。

步骤S102，遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤。

步骤S103，根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

步骤S104，根据当前节点的绝对定位块元素生成骨架屏文件。

第二方面，本发明实施方式中提供一种骨架屏文件的生成系统，其包括：一个元素节点获取单元、一个遍历单元、一个绝对定位块生成单元及一个文件生成单元。其中，

元素节点获取单元，其配置为获取当前网页页面的DOM结构中的各元素节点。

遍历单元，其配置为遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤。

绝对定位块生成单元，其配置为根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

文件生成单元，其配置为根据当前节点的绝对定位块元素生成骨架屏文件。

第三方面，提供一种高效的离线语义解析的电子设备，其包括：至少一个处理器，以及与至少一个处理器通信连接的存储器，其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本发明任一实施方式的方法的步骤。

第四方面，本发明实施方式还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被计算机执行时，使计算机执行本发明任一实施方式的方法的步骤。

本发明通过对DOM结构中的各元素节点的遍历，从中筛选符合设定显示属性的元素节点，根据筛选出的节点生成绝对定位块元素，通过绝对定位块元素生成骨架屏文件。因此，本发明能够更加精准的生成骨架屏页面，减少开发人员工作量，降低开发成本。同时，本发明不采用目标页面的文档结构，只计算各元素的位置和占用空间，生成的节点文件比较扁平，体积较小。

附图说明

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

图1为本发明一实施方式提供的骨架屏文件的生成方法的流程图；

图2为本发明另一实施方式提供的骨架屏文件的生成方法的流程图；

图3为本发明又一实施方式提供的骨架屏文件的生成方法的流程图；

图4为本发明一实施方式提供的骨架屏文件的生成系统的流程图。

图5是本发明另一实施方式提供的骨架屏文件的生成系统的流程图。

图6是本发明一实施方式提供的页面的DOM结构示意图。

图7是本发明再一实施方式提供的骨架屏文件的生成方法的流程图。

图8是本发明一实施方式提供的电子设备的结构示意图。

具体实施方式

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

发明人在实现本申请的过程中发现，本行业的从业人员在解决上述缺陷是，通常采用“通过自动生成+手动修改”的方式实现骨架屏及其页面的修改。

本发明中技术方案不易想到的原因在于：

某开源插件“page-skeleton-webpack-plugin”生成的基本可用，即使有问题稍加改动即可。某些场景下(不怎么改动)手写和图片也是一种方案。现有技术中的多种方法，可以对通常情况解决，满足基本需求。

第一方面，本发明实施方式中提供一种骨架屏文件的生成方法。如图1所示，一种骨架屏文件的生成方法包括：

步骤S101，获取各元素节点。

本步骤中，获取当前网页页面的DOM结构中的各元素节点。上述各元素节点即为DOM节点。

步骤S102，遍历各元素节点。

本步骤中，遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤。

步骤S103，生成绝对定位块元素。

本步骤中，根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

步骤S104，生成骨架屏文件。

本步骤中，根据当前节点的绝对定位块元素生成骨架屏文件。

从而，本发明通过对DOM结构中的各元素节点的遍历，从中筛选符合设定显示属性的元素节点，根据筛选出的节点生成绝对定位块元素，通过绝对定位块元素生成骨架屏文件。因此，本发明能够更加精准的生成骨架屏页面，减少开发人员工作量，降低开发成本。同时，本发明不采用目标页面的文档结构，只计算各元素的位置和占用空间，生成的节点文件比较扁平，体积较小。

在本发明中骨架屏文件的生成方法的一种优选的实施方式中，如图2所示，步骤S101前还包括：

步骤S100，获取DOM结构。

本步骤中，根据设定的URL地址，通过Puppeteer工具获取当前网页页面的DOM结构。

在本发明中骨架屏文件的生成方法的另一种优选的实施方式中，步骤S102中的设定显示属性包括：

当前元素节点在CSS语言中控制布局的属性值display不为空none值。或当前元素节点在CSS语言中元素是否可见的属性值visiblity不是隐藏hidden属性值。

在本发明中骨架屏文件的生成方法的再一种优选的实施方式中，步骤S102中的设定显示属性包括：当前元素节点的节点宽×高的数值不为0。或当前元素节点位置位于文档位置范围内。上述元素节点的节点宽×高是指，元素节点在网页上显示的尺寸，同时其宽×高也可以通过像素等方式表示。

在本发明中骨架屏文件的生成方法的又一种优选的实施方式中，如图3所示，步骤S104后还包括：

步骤S105，显示骨架屏页面

本步骤中，根据所述骨架屏文件生成骨架屏页面，在网页页面上显示骨架屏页面。

第二方面，本发明实施方式中提供一种骨架屏文件的生成系统。如图4所示，骨架屏文件的生成系统包括：一个元素节点获取单元101、一个遍历单元201、一个绝对定位块生成单元301及一个文件生成单元401。

其中，

元素节点获取单元101，其配置为获取当前网页页面的DOM结构中的各元素节点。

遍历单元201，其配置为遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤。

绝对定位块生成单元301，其配置为根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

文件生成单元401，其配置为根据当前节点的绝对定位块元素生成骨架屏文件。

在本发明中骨架屏文件的生成系统的一种优选的实施方式中，如图5所示，骨架屏文件的生成系统还包括：

一个网页获取单元100，其配置为根据设定的URL地址，通过Puppeteer工具获取当前网页页面的DOM结构。

在本发明中骨架屏文件的生成系统的又一种优选的实施方式中，遍历单元201中的设定显示属性包括：

当前元素节点在CSS语言中控制布局的属性值display不为空none值。或当前元素节点在CSS语言中元素是否可见的属性值visiblity不是隐藏hidden属性值。

在本发明中骨架屏文件的生成系统的再一种优选的实施方式中，遍历单元201中的设定显示属性包括：

当前元素节点的节点宽×高的数值不为0。或当前元素节点位置位于文档位置范围内。

在本发明中骨架屏文件的生成系统的再一种优选的实施方式中，如图5所示，骨架屏文件的生成系统还包括：一个显示单元501，其配置为根据所述骨架屏文件生成骨架屏页面，在网页页面上显示骨架屏页面。

在本发明中骨架屏文件的生成方法的另一种优选的实施方式中，根据URL指定的线上地址，配合Puppeteer工具获取当前页面的DOM结构，其DOM结构如图6所示。文档中，包括html格式的根元素，根元素下链接head头元素及body体元素。在head头元素下链接title标题元素，在title标题元素下链接“文档标题”文本。在body体元素下链接a元素，a元素具有href链接属性，同时链接“我的链接”文本。在body体元素下链接h1元素，h1元素链接“我的标题”文本。

在获取当前页面的DOM结构同时对其中元素节点生成骨架屏文件到指定的文件夹。元素节点是指DOM节点(整个页面文件称为HTML文档，包含很多个DOM(文档对象模型)节点。

一、设定以下几类元素不显示于页面上，所以生成骨架时可忽略。

1.1、包含CSS样式display:none

1.2、包含CSS样式visiblity:hidden

1.3、节点宽高＝0

1.4、对于脱离文档流的节点，判断其位置是否处于文档位置范围之外，可获取节点的位置做比较。

二、制定规则

根据原节点宽高以及在文档中的位置生成同宽高和位置的绝对定位块元素(这里相对整个文档定位)，块元素的颜色为变量传入，默认为灰色gray

相应区域即元素在源文档中的位置

三、设定变量：

骨架屏文档背景色document-background-color,默认白色white骨架屏文档中块元素的背景色block-background-color，默认灰色gray。这两个变量可不传，采用默认值。

如图7所示，本实施方式中骨架屏文件的生成方法为：通过Puppeteer访问网页地址，获取DOM文件(文件名：window.loaded)提取DOM节点。遍历网页上的节点，判断该节点是否影响显示。若影响显示，则根据指定规则生成相应区域的彩色块，之后生成骨架屏文件，最终，导出骨架文件到指定目录；若该节点不影响显示，则跳过该节点，继续遍历网页上的其他节点。

本发明的有益效果在于：比如对于一种服务器高效数据处理方法的方案，所能够直接达到的效果就是提高了数据的处理效率，但是更深层次的，由于其提升了数据处理效率，所以使得服务器在单位时间内所能够处理数据的吞吐量更大，从而避免造成数据拥塞宕机，提升了服务器的稳定性。

本发明中涉及的技术术语解释如下：

CSS Cascading Style Sheets层叠样式表。层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

URL Uniform Resource Locator统一资源定位符。是因特网的万维网服务程序上用于指定信息位置的表示方法。

DOM Document Object Model文档对象模型。文档对象模型(Document ObjectModel，简称DOM)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

在另一些实施方式中，本发明实施方式还提供了一种非易失性计算机存储介质，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施方式中的骨架屏文件的生成方法；

作为一种实施方式，本发明的非易失性计算机存储介质存储有计算机可执行指令，计算机可执行骨架屏文件的生成方法设置为：

步骤S101，获取当前网页页面的DOM结构中的各元素节点。

步骤S102，遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤。

步骤S103，根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

步骤S104，根据当前节点的绝对定位块元素生成骨架屏文件。

作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施方式中的骨架屏文件的生成方法对应的程序指令/模块。一个或者多个程序指令存储在非易失性计算机可读存储介质中，当被处理器执行时，执行上述任意方法实施方式中的骨架屏文件的生成方法。

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

本发明实施方式还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被计算机执行时，使计算机执行上述任一项骨架屏文件的生成方法。

图8是本发明实施方式提供的电子设备的结构示意图，如图8所示，该设备包括：一个或多个处理器810以及存储器820，图8中以一个处理器810为例。骨架屏文件的生成方法的设备还可以包括：输入装置830和输出装置840。处理器810、存储器820、输入装置830和输出装置840可以通过总线或者其他方式连接，图8中以通过总线连接为例。存储器820为上述的非易失性计算机可读存储介质。处理器810通过运行存储在存储器820中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施方式骨架屏文件的生成方法。输入装置830可接收输入的数字或字符信息，以及产生与信息投放装置的用户设置以及功能控制有关的键信号输入。输出装置840可包括显示屏等显示设备。

上述产品可执行本发明实施方式所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施方式中详尽描述的技术细节，可参见本发明实施方式所提供的方法。

作为一种实施方式，上述电子设备可以应用于加密、解密平台中，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个骨架屏文件的生成处理器能够：

获取当前网页页面的DOM结构中的各元素节点。

遍历各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到下一步骤，若否则跳过当前节点且返回本步骤。

根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素。

根据当前节点的绝对定位块元素生成骨架屏文件。

本申请实施方式的电子设备以多种形式存在，包括但不限于：

(1)移动通信设备：这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括:智能手机、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备：这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括：PDA、MID和UMPC设备等。

(3)便携式娱乐设备：这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)服务器:提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、系统总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子装置。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施方式或者实施方式的某些部分的方法。

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

Claims (10)

1.一种骨架屏文件的生成方法，包括：

步骤S101，获取当前网页页面的DOM结构中的各元素节点；

步骤S102，遍历所述各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤；

步骤S103，根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素；

步骤S104，根据当前节点的绝对定位块元素生成骨架屏文件。

2.根据权利要求1所述的生成方法，其中，所述步骤S101前还包括：

步骤S100，根据设定的URL地址，通过Puppeteer工具获取当前网页页面的DOM结构。

3.根据权利要求1或2所述的生成方法，其中，所述步骤S102中所述的设定显示属性包括：

所述当前元素节点在CSS语言中控制布局的属性值display不为空none值；或

所述当前元素节点在CSS语言中元素是否可见的属性值visiblity不是隐藏hidden属性值。

4.根据权利要求1或2所述的生成方法，其中，所述步骤S102中所述的设定显示属性包括：

所述当前元素节点的节点宽×高的数值不为0；或

所述当前元素节点位置位于文档位置范围内。

5.根据权利要求1所述的生成方法，其中，所述步骤S104后还包括：

步骤S105，根据所述骨架屏文件生成骨架屏页面，在网页页面上显示骨架屏页面。

6.一种骨架屏文件的生成系统，包括：一个元素节点获取单元、一个遍历单元、一个绝对定位块生成单元及一个文件生成单元；其中，

所述元素节点获取单元，其配置为获取当前网页页面的DOM结构中的各元素节点；

所述遍历单元，其配置为遍历所述各元素节点，判断当前元素节点是否为设定显示属性，若是，则转到步骤S103，若否则跳过当前节点且返回本步骤；

所述绝对定位块生成单元，其配置为根据当前节点的初始宽×高及在文档中的位置生成相同宽×高和位置的绝对定位块元素；

所述文件生成单元，其配置为根据当前节点的绝对定位块元素生成骨架屏文件。

7.根据权利要求6所述的生成系统，其中，还包括：

一个网页获取单元，其配置为根据设定的URL地址，通过Puppeteer工具获取当前网页页面的DOM结构。

8.根据权利要求6或7所述的生成系统，其中，所述所述遍历单元中所述的设定显示属性包括：

所述当前元素节点在CSS语言中控制布局的属性值display不为空none值；或

所述当前元素节点在CSS语言中元素是否可见的属性值visiblity不是隐藏hidden属性值。

9.根据权利要求1或2所述的生成系统，其中，所述所述遍历单元中所述的设定显示属性包括：

所述当前元素节点的节点宽×高的数值不为0；或

所述当前元素节点位置位于文档位置范围内。

10.根据权利要求6所述的生成系统，其中，还包括：

一个显示单元，其配置为根据所述骨架屏文件生成骨架屏页面，在网页页面上显示骨架屏页面。

Images