CN112328940A - 网页嵌入过渡页的方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例属于研发管理领域，涉及一种网页嵌入过渡页的方法，包括获取多个网页页面，并分析各个网页页面的页面元素，根据页面元素确定页面元素在网页页面中对应的位置信息，得到所有网页页面的布局特征，根据布局特征确定并生成目标网页的骨架屏，接收到目标网页的页面加载请求，根据页面加载请求获取与目标网页对应的骨架屏，并进行展示。本申请还提供一种网页嵌入过渡页的装置、计算机设备及存储介质。此外，本申请还涉及区块链技术，页面加载请求可存储于区块链中。本申请可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验。

Description

网页嵌入过渡页的方法、装置、计算机设备及存储介质

技术领域

本申请涉及研发管理技术领域，尤其涉及一种网页嵌入过渡页的方法、装置、计算机设备及存储介质。

背景技术

移动终端在打开网页的时候，由于网页引擎初始化、网页数据拉取以及页面渲染等时间较长，一般会显示加载中的过渡页。骨架屏是现今非常流行的一种网页过渡页。与传统的过渡页在特定区域显示加载中的提示不同的是，骨架图和网页最后显示的页面布局高度相似，但内容用特定的颜色完全填充。

现有技术中，一般是由网页开发人员自己生成骨架屏，在移动终端打开这个网页时显示出来，而网页下发到终端需要发起网络请求，将骨架屏下载到终端，并由终端的web引擎渲染进行显示，这段时间终端都将显示白屏；同时网络请求受限于网络情况，时间未可预料；即使网络足够快或者骨架屏已经在App端有缓存了，web引擎的初始化和骨架屏的渲染也需要耗费时间，对于Android大部分机器，特别是低端机器上，无意义的白屏特别长，视觉效果差，造成用户体验差。

发明内容

本申请实施例的目的在于提出一种网页嵌入过渡页的方法、装置、计算机设备及存储介质方法、装置、计算机设备及存储介质，以解决相关技术中移动终端打开网页时，无意义白屏长，视觉效果差的问题。

为了解决上述技术问题，本申请实施例提供一种网页嵌入过渡页的方法，采用了如下所述的技术方案：

获取多个网页页面，并分析所述网页页面的页面元素；

根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征；

根据接收到的目标网页的页面加载请求，确定所述目标网页的布局特征，并生成骨架屏。

进一步的，所述根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征的步骤包括：

根据所述页面元素和所述位置信息，生成对应的元布局；

将所述元布局进行组合，得到布局特征。

进一步的，所述将所述元布局进行组合，得到布局特征的步骤包括：

将所述元布局以列表形式进行组合，并进行编号；

根据所述元布局的个数以及所述编号，生成骨架屏序列作为布局特征。

进一步的，所述根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征的步骤包括：

根据所述页面元素以及所述位置信息确定所述网页页面的内容区域和非内容区域；

将所述内容区域和非内容区域进行像素填充，得到所述网页页面对应的填充图片，所述填充图片为所述网页页面的布局特征；

将所有所述网页页面对应的原图片和所述填充图片分别作为预设网络模型的输入和输出，训练所述预设网络模型，训练直至所述预设网络模型收敛，保存所述预设网络模型及其对应的模型参数；

将待打开网页页面对应的原图片输入训练好的预设网络模型中，得到所述待打开网页页面的布局特征。

进一步的，所述根据所述布局特征确定并生成目标网页的骨架屏的步骤包括：

配置所述目标网页的统一资源定位符与所述骨架屏序列之间的对应关系；

按照预设规则将所述目标网页的统一资源定位符与对应的骨架屏序列进行拼接，生成预定的骨架屏代码；

根据所述骨架屏代码生成所述骨架屏。

进一步的，所述按照预设规则将所述目标网页的统一资源定位符与对应的骨架屏序列进行拼接的步骤包括：

将所述骨架屏序列附在所述统一资源定位符后面，进行拼接。

进一步的，所述根据所述布局特征确定并生成目标网页的骨架屏的步骤包括：

根据目标网页的填充图片生成所述目标网页的骨架屏，其中，所述目标网页的填充图片为将所述目标网页对应的原图片输入所述训练好的预设网络模型中获得。

为了解决上述技术问题，本申请实施例还提供一种网页嵌入过渡页的装置，采用了如下所述的技术方案：

获取模块，用于获取多个网页页面，并分析所述网页页面的页面元素；

识别模块，用于根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征；

生成模块，用于根据所述布局特征确定并生成目标网页的骨架屏；及

展示模块，用于接收到所述目标网页的页面加载请求，根据所述页面加载请求获取与所述目标网页对应的骨架屏，并进行展示。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

该计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的网页嵌入过渡页的方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的网页嵌入过渡页的方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请通过获取多个网页页面，并分析各个网页页面的页面元素，根据页面元素确定页面元素在网页页面中对应的位置信息，得到所有网页页面的布局特征，根据布局特征确定并生成目标网页的骨架屏，接收到目标网页的页面加载请求，根据页面加载请求获取与目标网页对应的骨架屏，并进行展示；本申请通过对获取的多个网页页面进行分析，得到各个网页页面的布局特征，由布局特征直接生成目标网页对应的骨架屏，在接收到目标网页的加载请求时，打开目标网页的同时马上展示骨架屏，可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验，同时，骨架屏使得用户能收到页面正在加载中的反馈，并能对页面布局有一定感知和把握，增强交互效果。

附图说明

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

图1是本申请可以应用于其中的示例性系统架构图；

图2根据本申请的网页嵌入过渡页的方法的一个实施例的流程图；

图3是图2中步骤S202的一种具体实施方式的流程图；

图4是图2中步骤S202的另一种具体实施方式的流程图；

图5是根据本申请的网页嵌入过渡页的装置的一个实施例的结构示意图；

图6是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

为了解决相关技术中移动终端打开网页时，无意义白屏长，视觉效果差的问题，本申请提供了一种网页嵌入过渡页的方法，可以应用于如图1所示的系统架构100中，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的网页嵌入过渡页的方法一般由终端设备执行，相应地，网页嵌入过渡页的装置一般设置于终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的网页嵌入过渡页的方法的一个实施例的流程图，包括以下步骤：

步骤S201，获取多个网页页面，并分析各个网页页面的页面元素。

骨架屏是在网页页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容，即骨架屏是一种网页过渡页。

其中，页面元素可以包括但不限于文字、图片、按钮、控件等网页页面中用于构成页面内容的元素。

具体地，作为一种可选的实施方式，可获取多个常用网页布局的网页页面进行分析，以实现定制化配置；作为另一种可选的实施方式，通过使用自动化测试脚本或者人工打开终端的网页页面，在首屏显示完成后，截取图片，保存下来，来获取多个网页页面。

在本实施例中，网页嵌入过渡页的方法运行于其上的电子设备(例如图1所示的终端设备)可以通过有线连接方式或者无线连接方式获取到多个网页页面。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。

步骤S202，根据页面元素确定页面元素在网页页面中对应的位置信息，得到网页页面的布局特征。

在本实施例中，根据页面元素及其对应的位置信息可以得到网页页面的布局特征，布局特征可以为网页页面骨架屏的生成提供基础。布局特征包括但不限于左文右图、左图右文、上文下图、上图下文、多列图、满屏图嵌文字等。

在本实施例中，获取网页页面的方式可以是开发人员获取常用的网页布局的网页页面，也可以是使用自动化测试脚本或者人工打开终端的网页来获取。

在一种可选的实施方式中，当获取网页页面的方式为开发人员获取常用的网页布局的网页页面时，根据页面元素确定页面元素在网页页面中对应的位置信息，得到网页页面的布局特征具体包括如下步骤：

步骤S301，根据所述页面元素和所述位置信息，生成对应的元布局。

元布局是通过分析常用的网页布局精简出来的，元布局包括但不限于标题、多行文字内容、左文右图、左图右文、多列图、满屏图嵌文字等。

步骤S302，将所述元布局进行组合，生成布局特征。

应当理解，大部分网页的骨架屏是由一个或者多个元布局组合而成的。

具体地，可以将元布局以列表形式进行组合，并对各元布局进行编号，确定元布局的个数，根据元布局的个数以及元布局对应编号，生成骨架屏序列作为布局特征。

举例而言，一个网页页面由标题、左图右文、文字内容和左文右文图这四个元布局列表组合而成，将这四个元布局进行编号，具体地，使用t表示标题，j表现左图右文、c表示内容，k表示左文右图；假设该网页页面由1个标题、1个左图右文、1个文字内容和2个左文右图组成，则相应的，生成的骨架屏序列为1t1j1c2k，元布局编号前面的数字表示该元布局在该序列要显示的个数。

通过将元布局进行编号，并根据元布局的个数以及元布局对应编号，生成骨架屏序列，可以直接得到网页页面对应的布局特征，配置简单。

在本实施例中，根据页面元素和位置信息，生成对应的元布局，并将元布局进行组合，得到布局特征，可以实现定制化配置骨架屏，方便开发人员进行配置。

在另一种可选的实施方式中，当获取网页页面的方式为使用自动化测试脚本或者人工打开终端的网页来获取时，根据页面元素确定页面元素在网页页面中对应的位置信息，得到网页页面的布局特征具体包括如下步骤：

步骤S401，根据页面元素以及位置信息确定网页页面的内容区域和非内容区域。

在本实施例中，网页页面包括内容区域和非内容区域，内容区域是指网页中的文字和图片等所在的区域；非内容区域，一般是指除内容外的空白区域。

步骤S402，将内容区域和非内容区域进行像素填充，得到网页页面对应的填充图片，填充图片为网页页面的布局特征。

在本实施例中，需要大量收集网页页面的截图图像，并对网页页面的截图进行填充标注，具体的，在这些网页页面的内容区域和非内容区域做不同像素的填充，例如，内容区域填充像素值为1，非内容区域像素值填充为0，并保存下来。

需要说明的是，本申请中将内容区域和非内容区域进行填充，得到的填充图片即为网页页面对应的布局特征。

步骤S403，将所有网页页面对应的原图片和填充图片分别作为预设网络模型的输入和输出，训练预设网络模型，训练直至预设网络模型收敛，保存预设网络模型及其对应的模型参数。

在本实施例中，预设网络模型为Unet网络模型，使用Unet网络模型进行训练。将获取到的大量网页页面的截图图片和对应的填充图片作为训练数据集。

预设网络模型训练的过程具体包括：

(1)构建损失函数；

损失函数即模型输出和实际输出(即填充图片)之间的差异。本次训练使用了两个构建损失函数的方法，一个方法为模型输出和填充图片之间逐像素的差的绝对值(ReduceMean)，另一个方法是模型输出和填充图片两个图片中为像素为1的区域的交集和并集之比(mIOU)。

(2)进行多次迭代训练，构造梯度下降器，每次训练利用反向传播算法来更新模型参数，使得损失函数愈来愈小，即模型输入愈来愈接近填充图片。

当预设网络模型收敛，即可停止训练，满足预设网络模型收敛的条件可以是损失函数满足小于一定值，还可以是损失函数不再减小。

需要说明的是，将训练好的预设网络模型直接部署在终端，本实施例中可以使用的是谷歌提供tensorflow提供的tesorflowlite终端部署工具对保存模型参数做转化，并把代码转化为终端代码。

步骤S404，将待打开网页页面对应的原图片输入训练好的预设网络模型中，得到待打开网页页面的布局特征。

预设网络模型训练完成后，将待打开网页页面对应的原图片输入训练好的预设网络模型中，得到对应的填充图片，填充图片即为该网页页面的布局特征。

本实施例中，通过进行预设网络模型的训练，可以实现网页页面布局特征的批量生成，提高效率。

步骤S203，根据布局特征确定并生成目标网页的骨架屏。

目标网页为即将打开的网页页面，在本实施例一种可选的实现方式中，根据布局特征确定并生成目标网页的骨架屏具体包括如下步骤：

配置目标网页的统一资源定位符与骨架屏序列之间的对应关系；

按照预设规则将目标网页的统一资源定位符与对应的骨架屏序列进行拼接，生成预定的骨架屏代码；

根据骨架屏代码生成所述骨架屏。

需要说明的是，预设规则可以是将骨架屏序列固定地附在目标网页的统一资源定位符(uniform resource locator，URL)的后面，将目标网页与对应的骨架屏进行关联，生成预定的骨架屏代码作为目标网页的新访问地址，在打开目标网页的同时可以展示对应的骨架屏；还可以向终端下发一个URL与骨架屏序列对应关系的配置，在打开目标网页的时候，去配置里面查询当前URL有无配置相关骨架屏序列，来手动做拼接，具体的，可以将骨架屏序列拼接在目标网页URL的后面。

这种方式配置简单，方便多方人员介入，设置灵活。

在本实施例的另一种可选的实现方式中，根据布局特征确定并生成目标网页的骨架屏具体包括如下步骤：

将目标网页对应的原图片输入训练好的预设网络模型中，获得目标网页的填充图片；

根据填充图片生成所述目标网页的骨架屏。

具体地，可以在首次打开目标网页的时候，对首屏内容截图，并利用预设网络模型来生成填充图片，根据作为布局特征的填充图片生成骨架屏，然后在第二次打开目标网页时显示该骨架屏；也可以线下由运营人员利用预设网络模型批量生成，并提前下发给终端，打开目标网页时由终端直接展示骨架屏。

这种方式针对不同的网页都可以生成对应的骨架屏，无需配置，同时还可以实现骨架屏批量生成。

步骤S204，接收到目标网页的页面加载请求，根据页面加载请求获取与目标网页对应的骨架屏，并进行展示。

在本实施例中，目标网页的骨架屏已经在终端生成，接收到目标网页的页面加载请求，根据页面加载请求获取与目标网页对应的骨架屏，直接进行展示，避免了白屏的生成，提升用户体验度。

需要说明的是，页面加载请求可以为目标网页的网络地址，即IP地址；也可以为关键字，比如目标网页对应的关键字；或者用户通过触发终端显示界面上的预设功能选项或触发区。

需要强调的是，为进一步保证上述页面加载请求的私密和安全性，上述页面加载请求还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请通过对获取的多个网页页面进行分析，得到各个网页页面的布局特征，由布局特征直接生成目标网页对应的骨架屏，在接收到目标网页的加载请求时，打开目标网页的同时马上展示骨架屏，可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验，同时，骨架屏使得用户能收到页面正在加载中的反馈，并能对页面布局有一定感知和把握，增强交互效果。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图5，作为对上述图2所示方法的实现，本申请提供了一种网页嵌入过渡页的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图5所示，本实施例所述的网页嵌入过渡页的装置500包括：获取模块501、识别模块502、生成模块503以及展示模块504。其中：

获取模块501用于获取多个网页页面，并分析所述网页页面的页面元素；

识别模块502用于根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征；

生成模块503用于根据所述布局特征确定并生成目标网页的骨架屏；

展示模块504用于接收到所述目标网页的页面加载请求，根据所述页面加载请求获取与所述目标网页对应的骨架屏，并进行展示。

需要强调的是，为进一步保证上述页面加载请求的私密和安全性，上述页面加载请求还可以存储于一区块链的节点中。

在本实施例中，通过对获取的多个网页页面进行分析，得到各个网页页面的布局特征，由布局特征直接生成目标网页对应的骨架屏，在接收到目标网页的加载请求时，打开目标网页的同时马上展示骨架屏，可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验，同时，骨架屏使得用户能收到页面正在加载中的反馈，并能对页面布局有一定感知和把握，增强交互效果。

在本实施例的一些可选的实现方式中，识别模块502包括生成元布局子模块，所述生成元布局子模块用于根据所述页面元素和所述位置信息，生成对应的元布局；将所述元布局进行组合，得到布局特征。

在本实施例中，根据页面元素和位置信息，生成对应的元布局，并将元布局进行组合，得到布局特征，可以实现定制化配置骨架屏，方便开发人员进行配置。

生成元布局子模块进一步用于将所述元布局以列表形式进行组合，并进行编号；根据所述元布局的个数以及所述编号，生成骨架屏序列作为布局特征。

通过将元布局进行编号，并根据元布局的个数以及元布局对应编号，生成骨架屏序列，可以直接得到网页页面对应的布局特征，配置简单。

在本实施例的一些可选的实现方式中，识别模块502还包括确定子模块、填充子模块、训练模型子模块、输出子模块；

确定子模块用于根据所述页面元素以及所述位置信息确定所述网页页面的内容区域和非内容区域；

填充子模块用于将所述内容区域和非内容区域进行像素填充，得到所述网页页面对应的填充图片，所述填充图片为所述网页页面的布局特征；

训练模型子模块用于将所有所述网页页面对应的原图片和所述填充图片分别作为预设网络模型的输入和输出，训练所述预设网络模型，训练直至所述预设网络模型收敛，保存所述预设网络模型及其对应的模型参数；

输出子模块用于将待打开网页页面对应的原图片输入训练好的预设网络模型中，得到所述待打开网页页面的布局特征。

本实施例中，通过进行预设网络模型的训练，可以实现网页页面布局特征的批量生成，提高效率。

在本实施例的一些可选的实现方式中，生成模块503包括配置子模块、拼接子模块和生成子模块；

配置子模块用于配置所述目标网页的统一资源定位符与所述骨架屏序列之间的对应关系；

拼接子模块用于按照预设规则将所述目标网页的统一资源定位符与对应的骨架屏序列进行拼接，生成预定的骨架屏代码；

根据所述骨架屏代码生成所述骨架屏。

这种方式配置简单，方便多方人员介入，设置灵活。

在一些可选的实现方式中，拼接子模块进一步用于将所述骨架屏序列附在所述统一资源定位符后面，进行拼接。

在本实施例的一些可选的实现方式中，生成模块503进一步还用于根据目标网页的填充图片生成所述目标网页的骨架屏，其中，所述目标网页的填充图片为将所述目标网页对应的原图片输入所述训练好的预设网络模型中获得。

这种方式针对不同的网页都可以生成对应的骨架屏，无需配置，同时还可以实现骨架屏批量生成。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图6，图6为本实施例计算机设备基本结构框图。

所述计算机设备6包括通过系统总线相互通信连接存储器61、处理器62、网络接口63。需要指出的是，图中仅示出了具有组件61-63的计算机设备6，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器61至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器61可以是所述计算机设备6的内部存储单元，例如该计算机设备6的硬盘或内存。在另一些实施例中，所述存储器61也可以是所述计算机设备6的外部存储设备，例如该计算机设备6上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器61还可以既包括所述计算机设备6的内部存储单元也包括其外部存储设备。本实施例中，所述存储器61通常用于存储安装于所述计算机设备6的操作系统和各类应用软件，例如网页嵌入过渡页的方法的计算机可读指令等。此外，所述存储器61还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器62在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器62通常用于控制所述计算机设备6的总体操作。本实施例中，所述处理器62用于运行所述存储器61中存储的计算机可读指令或者处理数据，例如运行所述网页嵌入过渡页的方法的计算机可读指令。

所述网络接口63可包括无线网络接口或有线网络接口，该网络接口63通常用于在所述计算机设备6与其他电子设备之间建立通信连接。

本实施例通过处理器执行存储在存储器的计算机可读指令时实现如上述实施例网页嵌入过渡页的方法的步骤，通过对获取的多个网页页面进行分析，得到各个网页页面的布局特征，由布局特征直接生成目标网页对应的骨架屏，在接收到目标网页的加载请求时，打开目标网页的同时马上展示骨架屏，可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验，同时，骨架屏使得用户能收到页面正在加载中的反馈，并能对页面布局有一定感知和把握，增强交互效果。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的网页嵌入过渡页的方法的步骤，通过对获取的多个网页页面进行分析，得到各个网页页面的布局特征，由布局特征直接生成目标网页对应的骨架屏，在接收到目标网页的加载请求时，打开目标网页的同时马上展示骨架屏，可以避免用户长时间看到无意义白屏，提高视觉效果，进一步可以提升用户体验，同时，骨架屏使得用户能收到页面正在加载中的反馈，并能对页面布局有一定感知和把握，增强交互效果。

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

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种网页嵌入过渡页的方法，其特征在于，包括下述步骤：

获取多个网页页面，并分析各个所述网页页面的页面元素；

根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征；

根据所述布局特征确定并生成目标网页的骨架屏；及

接收到所述目标网页的页面加载请求，根据所述页面加载请求获取与所述目标网页对应的骨架屏，并进行展示。

2.根据权利要求1所述的网页嵌入过渡页的方法，其特征在于，所述根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征的步骤包括：

根据所述页面元素和所述位置信息，生成对应的元布局；

将所述元布局进行组合，得到布局特征。

3.根据权利要求2所述的网页嵌入过渡页的方法，其特征在于，所述将所述元布局进行组合，得到布局特征的步骤包括：

将所述元布局以列表形式进行组合，并进行编号；

根据所述元布局的个数以及所述编号，生成骨架屏序列作为布局特征。

4.根据权利要求1所述的网页嵌入过渡页的方法，其特征在于，所述根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征的步骤包括：

根据所述页面元素以及所述位置信息确定所述网页页面的内容区域和非内容区域；

将所述内容区域和非内容区域进行像素填充，得到所述网页页面对应的填充图片，所述填充图片为所述网页页面的布局特征；

将所有所述网页页面对应的原图片和所述填充图片分别作为预设网络模型的输入和输出，训练所述预设网络模型，训练直至所述预设网络模型收敛，保存所述预设网络模型及其对应的模型参数；

将待打开网页页面对应的原图片输入训练好的预设网络模型中，得到所述待打开网页页面的布局特征。

5.根据权利要求3所述的网页嵌入过渡页的方法，其特征在于，所述根据所述布局特征确定并生成目标网页的骨架屏的步骤包括：

配置所述目标网页的统一资源定位符与所述骨架屏序列之间的对应关系；

按照预设规则将所述目标网页的统一资源定位符与对应的骨架屏序列进行拼接，生成预定的骨架屏代码；

根据所述骨架屏代码生成所述骨架屏。

6.根据权利要求5所述的网页嵌入过渡页的方法，其特征在于，所述按照预设规则将所述目标网页的统一资源定位符与对应的骨架屏序列进行拼接的步骤包括：

将所述骨架屏序列附在所述统一资源定位符后面，进行拼接。

7.根据权利要求4所述的网页嵌入过渡页的方法，其特征在于，所述根据所述布局特征确定并生成目标网页的骨架屏的步骤包括：

根据目标网页的填充图片生成所述目标网页的骨架屏，其中，所述目标网页的填充图片为将所述目标网页对应的原图片输入所述训练好的预设网络模型中获得。

8.一种网页嵌入过渡页的装置，其特征在于，包括：

获取模块，用于获取多个网页页面，并分析所述网页页面的页面元素；

识别模块，用于根据所述页面元素确定所述页面元素在所述网页页面中对应的位置信息，得到所述网页页面的布局特征；

生成模块，用于根据所述布局特征确定并生成目标网页的骨架屏；及

展示模块，用于接收到所述目标网页的页面加载请求，根据所述页面加载请求获取与所述目标网页对应的骨架屏，并进行展示。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的网页嵌入过渡页的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的网页嵌入过渡页的方法的步骤。

Images