CN112905280B - 页面显示方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面显示方法、装置、设备及存储介质，涉及互联网领域。该方法包括：显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架；显示所述动态骨架逐渐消失的消失动画；显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的动态内容。该方法提高页面显示的视觉流畅性。

Description

页面显示方法、装置、设备及存储介质

技术领域

本申请实施例涉及互联网领域，特别涉及一种页面显示方法、装置、设备及存储介质。

背景技术

应用程序的客户端在进行页面显示时，需要加载数据渲染页面。客户端向服务器发送页面数据获取请求，在接收到服务器发送的页面数据后根据页面数据渲染出完整页面。由于服务器响应请求需要一定的耗时，在客户端接收到服务器发送的页面数据前，客户端会显示白屏，即，空白的加载状态。

相关技术中，为了优化用户在等待页面数据加载过程中的视觉体验，程序开发者会预先根据页面内容生成页面的骨架屏，骨架屏用于呈现页面的大致框架。客户端会缓存页面的骨架屏。在页面数据还未完全加载前，客户端显示骨架屏，当页面数据加载完全后，将骨架屏切换显示为完整页面。

相关技术中的方法，当页面内容发生改变时，骨架屏的框架与新页面不匹配，骨架屏与新页面的切换显示会带来视觉闪烁，用户的视觉体验不流畅。

发明内容

本申请实施例提供了一种页面显示方法、装置、设备及存储介质，可以提高页面显示的视觉流畅性。所述技术方案如下：

一方面，提供了一种页面显示方法，所述方法包括：

显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架；

显示所述动态骨架逐渐消失的消失动画；

显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的所述动态内容。

另一方面，提供了一种页面显示装置，所述装置包括：

显示模块，用于显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架；

所述显示模块，用于显示所述动态骨架逐渐消失的消失动画；

所述显示模块，用于显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的所述动态内容。

另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的页面显示方法。

另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上方面所述的页面显示方法。

另一方面，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述可选实现方式中提供的页面显示方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

通过在显示目标页面的骨架图后，对于目标页面中动态改变的内容对应的动态骨架，播放动态骨架逐渐消失的消失动画，使动态骨架逐渐淡出。由于目标页面中动态内容发生改变后，动态内容的骨架与骨架图中的动态骨架可能不同，直接进行骨架图与目标页面的切换会给用户带来突兀感，产生视觉闪烁。通过播放消失动画，可以减缓动态骨架与动态内容在视觉上的直接联系，减缓骨架图与目标页面在切换时所带来的视觉冲击，提高目标页面显示的流畅性。

附图说明

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

图1是本申请一个示例性实施例提供的计算机系统的结构框图；

图2是本申请另一个示例性实施例提供的页面显示方法的方法流程图；

图3是本申请另一个示例性实施例提供的页面显示方法的目标页面示意图；

图4是本申请另一个示例性实施例提供的页面显示方法的动态内容和动态骨架的示意图；

图5是本申请另一个示例性实施例提供的页面显示方法的目标页面示意图；

图6是本申请另一个示例性实施例提供的页面显示方法的目标页面示意图；

图7是本申请另一个示例性实施例提供的页面显示方法的方法流程图；

图8是本申请另一个示例性实施例提供的页面显示方法的目标页面示意图；

图9是本申请另一个示例性实施例提供的页面显示装置的方法流程图；

图10是本申请另一个示例性实施例提供的页面显示方法的首页示意图；

图11是本申请另一个示例性实施例提供的页面显示方法的骨架屏示意图；

图12是本申请另一个示例性实施例提供的页面显示方法的首页示意图；

图13是本申请另一个示例性实施例提供的页面显示装置的装置框图；

图14是本申请另一个示例性实施例提供的终端的框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

骨架屏是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。示例性的，骨架屏是页面的一种空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出页面的轮廓，待页面数据加载完成后，再替换成实际的内容。示例性的，骨架屏中的骨架通常显示为与实际内容大小相匹配的灰色底图。

图1给出了本申请一个示例性实施例提供的计算机系统的结构框图。该计算机系统包括：终端101和服务器102。

示例性的，终端101包括智能手机、平板电脑、电子书阅读器、MP3播放器、MP4播放器、膝上型便携计算机和台式计算机中的至少一种；服务器102包括一台服务器、多台服务器、云计算平台和虚拟化中心中的至少一种。

示例性的，终端101运行有客户端，终端101通过客户端与服务器进行数据交互。示例性的，客户端是支持页面显示功能的客户端，由于大多数客户端都支持页面显示/界面显示，该客户端可以是任意一种类型的客户端。例如，客户端可以是浏览器客户端、资讯浏览程序的客户端、游戏程序的客户端、购物程序的客户端、社交程序的客户端、音视频程序的客户端、金融理财程序的客户端、生活服务程序的客户端、旅游出行程序的客户端、办公程序的客户端等。示例性的，该客户端还可以是基于宿主程序运行的小程序或快应用。

终端101通过无线网络或有线网络与服务器102相连。

服务器102用于为终端上运行的客户端提供后台服务。可选地，服务器102承担主要计算工作，终端承担次要计算工作；或者，服务器102承担次要计算工作，终端承担主要计算工作；或者，服务器102和终端之间采用分布式计算架构进行协同计算。

示例性的，本申请提供的页面显示方法可以由终端101上的客户端来执行。客户端采用本申请提供的页面显示方法实现页面显示功能。

结合上述对实施环境的说明，对本申请实施例提供的页面显示方法进行说明，以该方法的执行主体为图1所示出的终端来举例说明。

图2示出了本申请一个示例性实施例提供的页面显示方法的流程图。该方法可以由图1中的终端来执行。该方法包括：

步骤201，显示目标页面的第一状态画面，第一状态画面包括位于动态内容区域的动态骨架，动态内容区域用于显示目标页面中的动态内容，动态骨架用于表征动态内容的框架。

目标页面可以是客户端中需要显示的任意一个页面。例如，目标页面可以是客户端的首页，或，目标页面可以是用户所要查看的页面。

例如，客户端响应于应用程序运行，采用本实施例所提供的方法进行首页的显示。再如，客户端响应于接收到用户查看目标页面的触发操作，采用本实施例所提供的方法进行目标页面的显示。

第一状态画面为显示目标页面的骨架屏的画面。示例性的，目标页面的显示包括两个状态：第一状态和第二状态，第一状态显示骨架屏，第二状态显示目标页面(即，目标页面的实际内容)。示例性的，在客户端未加载完成目标页面的页面数据前，先根据本地存储的目标页面的骨架屏数据，显示目标页面的骨架屏(第一状态)，在加载完成目标页面的页面数据后，根据页面数据显示目标页面的实际内容(第二状态)。示例性的，骨架屏无法响应用户的操作，而目标页面可以响应用户的操作。

示例性的，第一状态画面可以是客户端显示骨架屏时的任意一帧画面。示例性的，第一状态画面是客户端显示骨架屏的第一帧画面。

骨架屏用于显示目标页面的框架。示例性的，骨架屏中包括用于勾勒目标页面的大致结构的骨架。骨架屏中使用至少一个几何图形来标注目标页面中各元素的位置、大小、形状关系。示例性的，目标页面中的元素包括：文字、图片、窗口、导航栏、控件中的至少一种。示例性的，该几何图形可以是矩形。

骨架屏不显示目标页面的实际内容，或，骨架屏中只显示目标页面的部分实际内容。对于目标页面中经常性发生改变的内容，骨架屏仅用几何图形标注其大致轮廓，不显示实际内容。对于目标页面中不经常发生改变，或，不改变的内容，骨架屏也可以显示其实际内容。

示例性的，骨架屏是程序开发者预先生成并本地存储在客户端中的，在打开目标页面时，客户端可以快速加载本地存储的数据显示骨架屏，以便用户观看骨架屏等待页面加载完成。

目标页面中包括动态内容。动态内容是指目标页面中更替频率高于阈值的内容。即，动态内容是目标页面中经常性改变的内容。例如，目标页面中每天都会发生变化的内容。

在一种可选的实现方式中，动态内容是指内容布局的更替频率高于阈值的内容，即，元素的位置、大小、形状经常发生改变的内容。对于内容布局不变，仅改变实际内容，则不包含在本实施例所说的动态内容中。例如，目标页面中有一个位置固定显示图片，图片的位置、大小、形状都不变，但图片的内容会改变，则该图片不属于动态内容。

示例性的，动态内容显示在目标页面的固定区域，本实施例将该固定区域称为动态内容区域。示例性的，骨架屏与目标页面大小相同，且区域划分一致。骨架屏在动态内容区域用动态骨架来表征动态内容的框架。示例性的，动态骨架通常由至少一个矩形组成。

例如，如图3所示，在目标页面的第一状态画面301中，显示有动态内容对应的动态骨架302。

步骤202，显示动态骨架逐渐消失的消失动画。

对于目标页面中的动态内容，由于其经常发生改变，而骨架屏是由程序开发者根据旧的动态内容的框架生成的，因此，旧的动态内容的骨架可能与新的动态内容的骨架不匹配。

例如，如图4所示，程序开发者根据旧动态内容401生成了其对应的旧动态骨架403，旧动态骨架403标注了旧动态内容401中图片和文字的布局版式。当动态内容变更为新动态内容402时，新动态内容402应该对应新动态骨架404。但本地存储的骨架屏并不会根据动态内容的更新而实时更新，因此，依旧显示的是旧动态骨架403。由于新旧动态内容的版式发生了改变，从旧动态骨架403切换显示为新动态内容402就会产生视觉闪烁问题。

为了解决该问题，本实施例在显示第一状态画面，显示出动态内容对应的动态骨架后，还会显示动态骨架逐渐消失的消失动画。使动态内容区域，从显示动态骨架，到动态骨架逐渐消隐，到显示空白，再到显示实际的动态内容，形成一个过渡动画。进而减缓从动态骨架直接切换显示为动态内容所带来的视觉冲击，提高视觉流畅性。

示例性的，消失动画可以是通过调整动态骨架的颜色来实现，例如，将动态骨架的颜色由深色逐渐调整为浅色，直至调整到与背景颜色相同，动态骨架消失。或者，消失动画可以是通过调整动态骨架的透明度来实现，例如，将动态骨架的透明度由100％逐渐调整为0％。示例性的，消失动画也可以采用其他消隐特效来实现。

例如，如图5中的(1)所示，在显示目标页面的骨架图时，首先显示第一状态画面301，第一状态画面301中显示有动态骨架302，然后，如图5中的(2)所示，显示动态骨架302逐渐消隐，最后，如图5中的(3)所示，动态骨架消失。

步骤203，显示目标页面的第二状态画面，第二状态画面包括显示在动态内容区域的动态内容。

在目标页面加载完成后，客户端根据加载的页面数据显示目标页面。第二状态画面是客户端显示目标页面的实际内容时的画面。目标页面的实际内容包括动态内容。示例性的，实际内容是指在目标页面上显示的文字、图片、视频、音频、链接等中的至少一种信息。

例如，如图6所示，客户端显示第二状态画面303，第二状态画面303显示有目标页面的动态内容304。

综上所述，本实施例提供的方法，通过在显示目标页面的骨架图后，对于目标页面中动态改变的内容对应的动态骨架，播放动态骨架逐渐消失的消失动画，使动态骨架逐渐淡出。由于目标页面中动态内容发生改变后，动态内容的骨架与骨架图中的动态骨架可能不同，直接进行骨架图与目标页面的切换会给用户带来突兀感，产生视觉闪烁。通过播放消失动画，可以减缓动态骨架与动态内容在视觉上的直接联系，减缓骨架图与目标页面在切换时所带来的视觉冲击，提高目标页面显示的流畅性。

示例性的，本申请还提供了一种根据页面数据的加载速度来确定消失动画的显示时长的示例性实施例。

示例性的，为了进一步优化动态内容的显示效果，在根据页面数据渲染目标页面时，客户端还会对彩色内容进行由灰度至彩色的渐变显示。

示例性的，目标页面上还包括静态内容，为了避免静态内容发生改变，客户端在骨架屏上会将静态内容显示为模糊图像，在渲染目标页面时，再将静态内容从模糊逐渐显示为清晰内容。

图7示出了本申请一个示例性实施例提供的页面显示方法的流程图。该方法可以由图1所示的终端来执行。基于图2所示的实施例，步骤202还包括步骤2021和步骤2022。步骤203还包括步骤2031。

步骤201，显示目标页面的第一状态画面，第一状态画面包括位于动态内容区域的动态骨架，动态内容区域用于显示目标页面中的动态内容，动态骨架用于表征动态内容的框架。

步骤2021，确定消失动画的持续时长。

客户端可以根据页面数据的加载速度来确定消失动画的持续时长。页面数据的加载速度可以从网速和终端性能两方面来评估。

例如，客户端可以获取终端的网络速度，根据网络速度确定消失动画的持续时长。响应于网络速度大于第一阈值，将消失动画的持续时长确定为第一时长；响应于网络速度小于第一阈值，将消失动画的持续时长确定为第二时长，第一时长小于第二时长。例如，第一时长可以是0.3秒，第二时长可以是1.5秒。

示例性的，客户端也可以根据终端的网络类型来确定消失动画的持续时长。响应于网路类型属于第一类网络，将消失动画的持续时长确定为第一时长；响应于网络类型属于第二类网络，将消失动画的持续时长确定为第二时长，第一时长小于第二时长。第一类网络可以包括：WiFi网络、5G网络、4G网络。第二类网络可以包括3G网络、2G网络。

再如，客户端可以获取终端性能，根据终端性能确定消失动画的持续时长。响应于终端性能大于第二阈值，将消失动画的持续时长确定为第一时长；响应于终端性能小于第二阈值，将消失动画的持续时长确定为第二时长，第一时长小于第二时长。

示例性的，客户端可以计时终端运行指定代码的所需时间，得到终端性能。即，客户端运行指定代码，得到运行指定代码的运行时长，将运行时长确定为终端性能，若运行时长过长，则终端性能较差，若运行时长较短，则终端性能较优。

再如，客户端可以获取网络速度和终端性能，根据网络速度和终端性能确定消失动画的持续时长。响应于网络速度大于第一阈值且终端性能大于第二阈值，将消失动画的持续时长确定为第一时长；响应于网络速度小于第一阈值或终端性能小于第二阈值，将消失动画的持续时长确定为第二时长，第一时长小于第二时长。

步骤2022，根据持续时长，显示动态骨架逐渐消失的消失动画。

示例性的，客户端可以根据持续时长来确定消失动画的播放速度，进而使消失动画的播放时长等于持续时长。

或，客户端可以存储两种消失动画，根据持续时长播放对应的消失动画，进而使消失动画的播放时长等于持续时长。例如，客户端存储第一时长的消失动画，和，第二时长的消失动画，当持续时长是第一时长时，播放第一时长的消失动画，当持续时长是第二时长时，播放第二时长的消失动画。

步骤2031，显示目标页面的动态内容和第一静态内容，动态内容显示在目标页面的动态内容区域，第一静态内容显示在目标页面的静态内容区域，静态内容区域用于显示目标页面中的静态内容。

示例性的，目标页面中还显示有静态内容。静态内容是指目标页面中更替频率低于阈值的内容。即，静态内容是目标页面中通常不变的内容。例如，静态内容包括目标页面中通常不会发生变化的导航栏、用户界面控件等。

示例性的，静态内容显示在目标页面的固定区域，本实施例将该固定区域称为静态内容区域。即，第一状态画面还包括位于静态内容区域的静态骨架，静态内容区域用于显示目标页面中的静态内容，静态骨架用于表征静态内容的框架。静态骨架显示为第二静态内容的第一模糊图。

在一种可选的实现方式中，由于静态内容通常不会发生变化，骨架屏中将静态骨架显示为静态内容。即，目标页面在静态内容区域显示什么，骨架屏就在静态内容区域显示什么。如此，在将骨架屏切换显示为目标页面时，静态内容区域所显示的内容始终相同，不会发生改变，也就不会出现视觉闪烁。

然而，部分情况下，静态内容也会发生变化，当静态内容发生变化时，在骨架屏中显示旧静态内容，在目标页面中显示新静态内容，旧静态内容至新静态内容的切换就会带来视觉闪烁问题。

为此，本实施例提供了一种方法，在骨架图中显示旧静态内容(第二静态内容)的模糊图，在渲染目标页面时，显示新静态内容(第一静态内容)从模糊到清晰的过渡动画。这样，即使静态内容发生改变，由于骨架图中显示的是旧静态内容的模糊图，在渲染目标页面时一开始显示的也是新静态内容的模糊图，两个模糊图之间的切换所带来的视觉冲击远小于清晰图所带来的视觉冲击，进而减缓静态内容改变所产生的视觉闪烁问题，提高视觉流畅性。

即，客户端显示第一静态内容从模糊到清晰的过渡动画；显示清晰的第一静态内容；其中，第一静态内容和第二静态内容相同，或，第一静态内容和第二静态内容不同。示例性的，第二静态内容是生成骨架屏时，所依据的目标页面在静态内容区域所显示的静态内容。第一静态内容是本次显示的目标页面中的静态内容。

第一静态内容和第二静态内容相同，即，静态内容没有发生改变，目标页面中的静态内容依旧是生成骨架屏时的静态内容。第一静态内容和第二静态内容不同，即，静态内容发生改变。

例如，如图3所示，在显示骨架屏时，第一状态画面301上显示有模糊的第二静态内容305。在显示目标页面时，首先显示模糊的第一静态内容，然后使第一静态内容逐渐边清晰，最终显示如图6所示的清晰的第一静态内容306。从而使骨架屏切换显示为目标页面时，静态内容区域中所显示内容的变换更流畅。

示例性的，骨架屏中的骨架通常显示为单色图，例如，显示为灰度图，二目标页面中通常包含有彩色内容，为了更流畅地使画面从灰色过渡到彩色，在渲染目标页面时还会将彩色的内容由灰色逐渐过渡显示为彩色，进一步提高视觉流畅性。

即，动态骨架图为灰度图，动态内容包括彩色内容。客户端显示目标页面的动态内容的第一画面，第一画面包括显示为灰度图的彩色内容；显示彩色内容从灰度图渐变为彩色图的渐变效果；显示目标页面的动态内容的第二画面，第二画面包括显示为彩色图的彩色内容。

示例性的，彩色内容的灰度图可以是完全灰度，即，只包含黑白灰色系的颜色；彩色内容的灰度图也可以将彩色内容的鲜艳度降低。示例性的，彩色图和灰度图仅用于描述彩色内容的色彩程度，并不局限于图片格式。示例性的，彩色内容可以是彩色文字、彩色图片、彩色动效中的至少一种，彩色内容的灰度图即为对彩色内容进行灰度处理后得到的显示样式，灰度处理包括上述的完全灰度和降低鲜艳度。

例如，如图8中的(1)所示，在显示目标页面时，首先将彩色内容308显示为灰度图，然后将彩色内容逐渐过渡显示为彩色图，如图8中的(2)所示，最终显示彩色内容308的彩色图。

示例性的，在客户端需要显示目标页面时，客户端向服务器发送页面数据获取请求，请求获取目标页面的页面数据。服务器接收到数据获取请求后，向客户端返回页面数据。客户端响应于接收到服务器发送的第一页面数据，根据第一页面数据显示目标页面的第二状态画面，第一页面数据包括动态内容。

示例性的，客户端在获取到页面数据后，会每次获取的页面数据缓存至本地，若下次页面数据获取失败，则客户端会读取上一次缓存的页面数据，来显示上一次获取到的目标页面。

若客户端从服务器获取页面数据失败，则客户端响应于数据获取失败，读取本地存储的第二页面数据，第二页面数据包括动态内容；根据第二页面数据显示目标页面的第二状态画面。示例性的，若客户端读取本地缓存的页面数据失败，则显示页面显示错误的提示信息。

示例性的，第一页面数据和第二页面数据可以相同也可以不同。当第一页面数据和第二页面数据相同，则根据第一页面数据显示的目标页面和根据第二页面数据显示的目标页面相同；当第一页面数据和第二页面数据不同，则根据第一页面数据显示的目标页面和根据第二页面数据显示的目标页面不同。

综上所述，本实施例提供的方法，通过根据页面数据的加载速度来确定消失动画的显示时长，当页面数据加载较快时，将消失动画加快播放，以保证动态骨架在显示目标页面前消失，当页面数据加载较慢时，将消失动画放慢播放，从而避免动态骨架消失使用户长时间观看空白屏幕。将消失动画的持续时长与页面数据的加载速度相关联，根据网络速度或/和终端性能来对应播放骨架屏至目标页面的切换效果，提高骨架屏至目标页面切换显示的视觉流畅性。

本实施例提供的方法，通过对目标页面中的彩色内容，采用从灰度到彩色的过渡效果进行显示，使骨架屏至目标页面的切换能够从灰度逐渐过渡至彩色，减轻从灰度的骨架图切换显示为彩色的目标页面时，色彩强烈变换所才来的视觉冲击，使骨架屏至目标页面的切换显示更加平缓，减少视觉刺激。

本实施例提供的方法，通过在骨架屏中将静态内容模糊显示，在渲染目标页面时将实际静态内容从模糊逐渐显示为清晰，减轻在静态内容发生变化时，由于骨架屏中的静态内容与实际静态内容不同所带来的视觉闪烁，提高目标页面显示的视觉流畅性。

本实施例提供的方法，通过在从服务器获取目标页面的页面数据失败时，读取本地缓存的页面数据，显示上一次获取到的目标页面，避免在页面数据获取失败时，无法显示目标页面，提高目标页面的显示成功率，优化用户体验。

示例性的，当目标页面的加载时间过长时，客户端还可以采用分屏的方式在用户界面上显示两个页面：目标页面的骨架屏，以及备用页面。

基于图2所示的示例性实施例，步骤202还可以替换为：客户端获取终端的网络速度和终端性能，响应于网络速度小于第三阈值或终端性能小于第四阈值，在用户界面的第一区域显示目标页面的第一状态画面，在用户界面的第二区域显示备用页面，在第一区域的第一状态画面上显示动态骨架逐渐消失的消失动画。第一区域与第二区域是相互独立的两个区域；或，第一区域包含第二区域，备用页面显示在第一状态画面的上层，其中，第三阈值小于第一阈值，第四阈值小于第二阈值。

即，当终端的网络速度过低或终端性能过差时，客户端将在用户界面上显示两个页面：目标页面和备用页面。其中，第一区域显示有目标页面的加载状态画面，即，显示有目标页面的骨架屏。第二区域显示有备用页面。

第一区域和第二区域可以是用户界面中互相独立的两个区域，即，采用分屏的形式在终端的显示屏上分别显示该应用程序的目标页面和备用页面。

第一区域还可以包含第二区域，即，备用页面显示在目标页面上方。示例性的，可以在目标页面上层用小窗口显示备用页面。

备用页面可以是目标页面的上一级页面。备用页面还可以是本地存储的指定页面。备用页面还可以是小游戏页面。

目标页面的上一级页面可以是指客户端在显示目标页面之前所显示的页面。例如，用户通过触发第一页面上的链接来打开目标页面，则第一页面即为目标页面的上一级页面。

当备用页面显示小游戏时，小游戏可以是客户端本地存储的单机游戏。

示例性的，当页面数据加载成功，客户端可以在第一区域显示目标页面的第二状态画面，在第二区域依旧显示备用页面。用户可以手动关闭备用页面使用户界面全部显示目标页面，用户也可以手动关闭目标页面使用户界面全部显示备用页面。

示例性的，当页面数据加载成功，客户端也可以自动关闭第二区域显示的备用页面，在用户界面上显示目标页面的第二状态画面。

综上所述，本实施例提供的方法，通过在判断页面加载速度过慢时，在用户界面上同时显示目标页面和备用页面，使用户可以先观看备用页面等待目标页面的加载，优化用户在等待页面加载过程中的用户体验。

示例性的，给出一种应用本申请提供的页面显示方法显示小程序首页的示例性实施例。

图9示出了本申请一个示例性实施例提供的页面显示方法的流程图。该方法可以由图1所示的终端来执行。该方法包括以下步骤。

步骤901，小程序加载首页。

步骤902，小程序渲染骨架屏。

示例性的，小程序读取本地存储的骨架屏的数据，进行骨架屏的渲染和显示。

示例性的，骨架屏采用html(Hyper Text Markup Language，超文本标记语言)和css(Cascading Style Sheets，层叠样式表)进行渲染，骨架屏上的动画效果采用css3.0进行渲染，以得到终端设备的硬件加速。

步骤903，小程序向服务器请求获取页面数据，若获取页面数据成功，则进行步骤909，若获取页面数据失败，则进行步骤908。

示例性的，步骤902和步骤903同步进行。

步骤904，对于骨架屏中静态内容对应的静态骨架，小程序显示静态骨架从第一模糊到第二模糊的过渡动画持续0.3秒，第一模糊的模糊程度高于第二模糊的模糊程度。

示例性的，对于静态内容对应的静态骨架，也可以始终显示一种模糊程度，即，不显示过渡动画。

步骤905，对于动态内容对应的动态骨架，小程序获取终端的网速和性能，当网速和性能较优时进行步骤906，当网速和性能较差时进行步骤907。

示例性的，小程序计时运行指定代码的所需时间，当所需时间大于40毫秒时，确定终端性能较差，当所需时间小于40毫秒时，确定终端性能较好。当终端网速高于目标值时，确定终端网速较好，当终端网速低于目标值时，确定终端网速较差。当终端性能和网速均较优时，执行步骤906；当终端性能和网速中有一个较差时，执行步骤907。

步骤906，小程序将动态骨架的消失动画的持续时长确定为0.3秒，并播放动态骨架的消失动画。

步骤907，小程序将动态骨架的消失动画的持续时长确定为1.5秒，并播放动态骨架的消失动画。

步骤908，小程序响应于请求页面数据失败，读取本地缓存的页面数据，若读取成功则进行步骤909，若读取失败则进行步骤910。

步骤909，小程序成功获取页面数据，根据页面数据渲染首页。

首页的渲染包括：将首页中的彩色内容从灰度图逐渐过渡显示为彩色图；将静态内容从模糊逐渐过渡显示到清晰。最终显示出完整的首页。

示例性的，对于彩色内容的灰度处理，采用css中的过渡效果得到彩色内容的30％灰度图，采用动画的方式将彩色内容从30％的灰度图逐渐过渡显示为100％的彩色图。

示例性的，小程序缓存从服务器接收到的页面数据。

步骤910，小程序显示页面显示错误的提示信息。

综上所述，本实施例提供的方法，不局限于具体某个客户端或某个项目，可以在任意一个页面显示项目中采用本申请提供的方法实施页面显示的优化方案。通过采用多种过渡动画，优化骨架图至目标页面切换显示的流程性，适应人体视觉工程，得到循序渐进的展示效果。通过在网络故障或网络环境异常时，根据上一次缓存的页面数据，显示目标页面，降低网络波动对页面显示的影响，使用户仍能查看页面中的部分信息。通过针对终端的网络和性能，确定动画效果的持续时长，提高动画效果的可变性，使其更贴合页面加载的实际情况。

本实施例提供的方法，可以给用户带来视觉上的加速效果，且有动画过渡，更符合用户习惯，从视觉体验上达到让用户认为程序反应迅速的效果，保证了用户粘性。

示例性的，给出一种应用本申请提供的页面显示方法应用于游戏电竞(电子竞技)程序的示例性实施例。

该游戏电竞程序用于提供游戏直播功能、观看游戏直播功能、电竞直播功能、电竞资讯浏览功能、游戏资讯浏览功能、游戏组队功能、游戏论坛功能中的至少一种功能。

示例性的，如图10所示，为该游戏电竞程序的一种首页，在首页上显示有第一导航栏801、资讯信息802和第二导航栏803。第一导航栏801用于切换显示的页面，例如，如图10所示，第一导航栏801可以切换显示资讯页面、赛程页面、数据页面和排名页面。示例性的，默认情况下首页显示资讯页面。资讯信息802包括标题、图片、发布者以及发布时间等信息。第二导航栏803用于切换显示的页面，例如，如图10所示，第二导航栏803可以切换显示赛事页面和购票页面。其中，上述的资讯页面、赛程页面、数据页面和排名页面是赛事页面的子页面。示例性的，默认情况下首页显示赛事页面的资讯页面。

对于图10中首页所包含的显示内容，其中，第一导航栏801的内容更替频率较低，即，可能会发生变化但发生变化的频率较低，则可以按照本申请提供的对目标页面中静态内容的显示方法显示第一导航栏801。资讯信息802中的内容每天都可能发生变化，例如，在游戏版本更新、游戏赛事筹办、游戏赛事结束时，都会显示不同的资讯信息，即，资讯信息802的内容更替频率较高，可以按照本申请提供的对目标页面中动态内容的显示方法显示资讯信息802。第二导航栏802的内容不发生变化，则可以直接在首页的骨架屏上显示第二导航栏802，由于第二导航栏802不会发生变化，在进行骨架屏和实际页面的切换显示时也不会产生视觉闪烁问题。由此，根据图10所示的首页的布局版式，可以得到如图11所示的骨架屏804。在骨架屏804中将第一导航栏801模糊显示，使用灰色矩形805表征资讯信息中图片以及文字内容的大小、形状和位置关系，将第二导航栏803清晰显示。

示例性的，游戏电竞程序的客户端会在本地存储首页的骨架屏。在用户打开游戏电竞程序时，客户端向服务器发送首页数据获取请求，同时读取本地缓存的骨架屏数据，渲染并显示如图11所示的骨架屏804，即，上述实施例中所说的目标页面的第一状态画面。然后，客户端播放骨架屏中资讯信息对应的灰色矩形805的消失动画，即，上述实施例中所说的显示动态骨架的消失动画。当客户端接收到服务器发送的首页数据时，根据首页数据渲染并显示首页。

假设，客户端根据接收到的首页数据可以渲染得到如图12所示的首页806，即，与生成骨架屏时所依据的如图10所示的首页相比，第一导航栏801的内容变更从“资讯赛程数据排名”变更为了“资讯论坛活动排名”，并且，资讯信息802的显示版式发生变化，将矩形图片切换为正方形图片，并在图片右侧增加了资讯内容的文字显示区域807。

则，客户端在接收到页面数据后，对于变更后的第一导航栏801，显示从模糊到清晰的过渡效果，减缓第一导航栏801内容变化所产生的视觉冲击，对于资讯信息802，由于在之前显示骨架屏时，已经显示了灰色矩形805的消失动画，即，在显示骨架屏的最后一帧画面上，资讯信息802所在的区域显示为空白，在切换显示为首页时，是从空白切换显示为如图12所示的资讯信息802，减缓了版式变化所产生的视觉冲击。并且，在渲染显示首页时，对于资讯信息802中彩色的图片内容，显示从灰度到彩色的过渡效果，进一步提升从灰度的骨架屏切换显示为彩色的首页时的视觉过渡效果，提高用户在观看时的视觉流畅性。

以下为本申请的装置实施例，对于装置实施例中未详细描述的细节，可参考上述方法实施例。

图13是本申请一个示例性实施例提供的页面显示装置的框图。所述装置包括：

显示模块1001，用于显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架；

所述显示模块1001，用于显示所述动态骨架逐渐消失的消失动画；

所述显示模块1001，用于显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的动态内容。

在一个可选的实施例中，所述装置还包括：

确定模块1002，用于确定所述消失动画的持续时长；

所述显示模块1001，用于根据所述持续时长，显示所述动态骨架逐渐消失的所述消失动画。

在一个可选的实施例中，所述确定模块1002，用于根据网络速度确定所述消失动画的所述持续时长。

在一个可选的实施例中，所述确定模块1002，用于响应于所述网络速度大于第一阈值，将所述消失动画的所述持续时长确定为第一时长；

所述确定模块1002，用于响应于所述网络速度小于所述第一阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

在一个可选的实施例中，所述确定模块1002，用于根据终端性能确定所述消失动画的所述持续时长。

在一个可选的实施例中，所述确定模块1002，用于响应于所述终端性能大于第二阈值，将所述消失动画的所述持续时长确定为第一时长；

所述确定模块1002，用于响应于所述终端性能小于所述第二阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

在一个可选的实施例中，所述确定模块1002，用于根据网络速度和终端性能确定所述消失动画的所述持续时长。

在一个可选的实施例中，所述确定模块1002，用于响应于所述网络速度大于第一阈值且所述终端性能大于第二阈值，将所述消失动画的所述持续时长确定为第一时长；

所述确定模块1002，用于响应于所述网络速度小于所述第一阈值或所述终端性能小于所述第二阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

在一个可选的实施例中，所述装置还包括：

所述计时模块1003，用于计时终端运行指定代码的所需时间，得到所述终端性能。

在一个可选的实施例中，所述显示模块1001，用于显示所述目标页面的动态内容和第一静态内容，所述动态内容显示在所述目标页面的所述动态内容区域，所述第一静态内容显示在所述目标页面的静态内容区域，所述静态内容区域用于显示所述目标页面中的静态内容。

在一个可选的实施例中，所述第一状态画面还包括位于所述静态内容区域的静态骨架，所述静态内容区域用于显示所述目标页面中的静态内容，所述静态骨架用于表征所述静态内容的框架，所述静态骨架显示为第二静态内容的第一模糊图；

所述显示模块1001，用于显示所述第一静态内容从模糊到清晰的过渡动画；

所述显示模块1001，用于显示清晰的所述第一静态内容；

其中，所述第一静态内容和所述第二静态内容相同，或，所述第一静态内容和所述第二静态内容不同。

在一个可选的实施例中，所述动态骨架图为灰度图；所述动态内容包括彩色内容；

所述显示模块1001，用于显示所述目标页面的所述动态内容的第一画面，所述第一画面包括显示为灰度图的所述彩色内容；

所述显示模块1001，用于显示所述彩色内容从灰度图渐变为彩色图的渐变效果；

所述显示模块1001，用于显示所述目标页面的所述动态内容的第二画面，所述第二画面包括显示为彩色图的所述彩色内容。

在一个可选的实施例中，所述装置还包括：

发送模块1005，用于向服务器发送页面数据获取请求；

接收模块1004，用于接收所述服务器发送的第一页面数据；

所述显示模块1001，用于响应于接收到所述服务器发送的第一页面数据，根据所述第一页面数据显示所述目标页面的所述第二状态画面，所述第一页面数据包括所述动态内容。

在一个可选的实施例中，所述装置还包括：

发送模块1005，用于向服务器发送页面数据获取请求；

接收模块1004，用于接收服务器发送的数据获取失败的指令；

读取模块1006，用于响应于数据获取失败，读取本地存储的第二页面数据，所述第二页面数据包括所述动态内容；

所述显示模块1001，用于根据所述第二页面数据显示所述目标页面的所述第二状态画面。

需要说明的是：上述实施例提供的页面显示装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面显示装置与页面显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本申请还提供了一种终端，该终端包括处理器和存储器，存储器中存储有至少一条指令，至少一条指令由处理器加载并执行以实现上述各个方法实施例提供的页面显示方法。需要说明的是，该终端可以是如下图14所提供的终端。

图14出了本申请一个示例性实施例提供的终端1100的结构框图。该终端1100可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio LayerIV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1100还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端1100包括有：处理器1101和存储器1102。

处理器1101可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1101可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1101也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1101可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1101还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1102可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1102还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1102中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1101所执行以实现本申请中方法实施例提供的页面显示方法。

在一些实施例中，终端1100还可选包括有：外围设备接口1103和至少一个外围设备。处理器1101、存储器1102和外围设备接口1103之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1103相连。具体地，外围设备包括：射频电路1104、显示屏1105、摄像头1106、音频电路1107、定位组件1108和电源1109中的至少一种。

外围设备接口1103可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器1101和存储器1102。在一些实施例中，处理器1101、存储器1102和外围设备接口1103被集成在同一芯片或电路板上；在一些其他实施例中，处理器1101、存储器1102和外围设备接口1103中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路1104用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1104通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1104将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1104包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1104可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1104还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏1105用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1105是触摸显示屏时，显示屏1105还具有采集在显示屏1105的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1101进行处理。此时，显示屏1105还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏1105可以为一个，设置终端1100的前面板；在另一些实施例中，显示屏1105可以为至少两个，分别设置在终端1100的不同表面或呈折叠设计；在再一些实施例中，显示屏1105可以是柔性显示屏，设置在终端1100的弯曲表面上或折叠面上。甚至，显示屏1105还可以设置成非矩形的不规则图形，也即异形屏。显示屏1105可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode，有机发光二极管)等材质制备。

摄像头组件1106用于采集图像或视频。可选地，摄像头组件1106包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1106还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路1107可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1101进行处理，或者输入至射频电路1104以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1100的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1101或射频电路1104的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1107还可以包括耳机插孔。

定位组件1108用于定位终端1100的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件1108可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源1109用于为终端1100中的各个组件进行供电。电源1109可以是交流电、直流电、一次性电池或可充电电池。当电源1109包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端1100还包括有一个或多个传感器1110。该一个或多个传感器1110包括但不限于：加速度传感器1111、陀螺仪传感器1112、压力传感器1113、指纹传感器1114、光学传感器1115以及接近传感器1116。

加速度传感器1111可以检测以终端1100建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1111可以用于检测重力加速度在三个坐标轴上的分量。处理器1101可以根据加速度传感器1111采集的重力加速度信号，控制显示屏1105以横向视图或纵向视图进行用户界面的显示。加速度传感器1111还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器1112可以检测终端1100的机体方向及转动角度，陀螺仪传感器1112可以与加速度传感器1111协同采集用户对终端1100的3D动作。处理器1101根据陀螺仪传感器1112采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器1113可以设置在终端1100的侧边框和/或显示屏1105的下层。当压力传感器1113设置在终端1100的侧边框时，可以检测用户对终端1100的握持信号，由处理器1101根据压力传感器1113采集的握持信号进行左右手识别或快捷操作。当压力传感器1113设置在显示屏1105的下层时，由处理器1101根据用户对显示屏1105的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器1114用于采集用户的指纹，由处理器1101根据指纹传感器1114采集到的指纹识别用户的身份，或者，由指纹传感器1114根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器1101授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1114可以被设置终端1100的正面、背面或侧面。当终端1100上设置有物理按键或厂商Logo时，指纹传感器1114可以与物理按键或厂商Logo集成在一起。

光学传感器1115用于采集环境光强度。在一个实施例中，处理器1101可以根据光学传感器1115采集的环境光强度，控制、显示屏1105的显示亮度。具体地，当环境光强度较高时，调高、显示屏1105的显示亮度；当环境光强度较低时，调低、显示屏1105的显示亮度。在另一个实施例中，处理器1101还可以根据光学传感器1115采集的环境光强度，动态调整摄像头组件1106的拍摄参数。

接近传感器1116，也称距离传感器，通常设置在终端1100的前面板。接近传感器1116用于采集用户与终端1100的正面之间的距离。在一个实施例中，当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变小时，由处理器1101控制、显示屏1105从亮屏状态切换为息屏状态；当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变大时，由处理器1101控制、显示屏1105从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图14中示出的结构并不构成对终端1100的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

所述存储器还包括一个或者一个以上的程序，所述一个或者一个以上程序存储于存储器中，所述一个或者一个以上程序包含用于进行本申请实施例提供的页面显示方法。

本申请提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由处理器加载并执行以实现上述各个方法实施例提供的页面显示方法。

本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述可选实现方式中提供的页面显示方法。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (15)

1.一种页面显示方法，其特征在于，所述方法包括：

显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架和位于静态内容区域的静态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架，所述动态骨架由至少一个矩形组成；所述静态内容区域用于显示所述目标页面中的静态内容，所述静态骨架用于表征所述静态内容的框架，所述静态骨架显示为第二静态内容的第一模糊图；

显示所述动态骨架逐渐消失的消失动画，在所述静态内容区域显示第一静态内容从模糊到清晰的过渡动画；所述消失动画包括从所述动态骨架、到所述动态骨架逐渐消隐、到所述动态骨架消失、再到显示所述动态内容的过渡动画；

显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的所述动态内容和显示在所述静态内容区域的所述第一静态内容；

其中，所述第一静态内容是本次显示的所述目标页面中的静态内容，所述第二静态内容是生成骨架屏时所依据的所述目标页面在所述静态内容区域所显示的静态内容；所述第一静态内容与所述第二静态内容相同，或，所述第一静态内容与所述第二静态内容不同；

所述静态内容是指所述目标页面中更替频率低于阈值的内容；所述动态内容是指所述目标页面中更替频率高于阈值的内容。

2.根据权利要求1所述的方法，其特征在于，所述显示所述动态骨架逐渐消失的消失动画，包括：

确定所述消失动画的持续时长；

根据所述持续时长，显示所述动态骨架逐渐消失的所述消失动画。

3.根据权利要求2所述的方法，其特征在于，所述确定所述消失动画的持续时长，包括：

根据网络速度确定所述消失动画的所述持续时长。

4.根据权利要求3所述的方法，其特征在于，所述根据网络速度确定所述消失动画的所述持续时长，包括：

响应于所述网络速度大于第一阈值，将所述消失动画的所述持续时长确定为第一时长；

响应于所述网络速度小于所述第一阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

5.根据权利要求2所述的方法，其特征在于，所述确定所述消失动画的持续时长，包括：

根据终端性能确定所述消失动画的所述持续时长。

6.根据权利要求5所述的方法，其特征在于，所述根据终端性能确定所述消失动画的所述持续时长，包括：

响应于所述终端性能大于第二阈值，将所述消失动画的所述持续时长确定为第一时长；

响应于所述终端性能小于所述第二阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

7.根据权利要求2所述的方法，其特征在于，所述确定所述消失动画的持续时长，包括：

根据网络速度和终端性能确定所述消失动画的所述持续时长。

8.根据权利要求7所述的方法，其特征在于，所述根据网络速度和终端性能确定所述消失动画的所述持续时长，包括：

响应于所述网络速度大于第一阈值且所述终端性能大于第二阈值，将所述消失动画的所述持续时长确定为第一时长；

响应于所述网络速度小于所述第一阈值或所述终端性能小于所述第二阈值，将所述消失动画的所述持续时长确定为第二时长，所述第一时长小于所述第二时长。

9.根据权利要求5至8任一所述的方法，其特征在于，所述方法还包括：

计时终端运行指定代码的所需时间，得到所述终端性能。

10.根据权利要求1至8任一所述的方法，其特征在于，所述动态骨架图为灰度图；所述动态内容包括彩色内容；

所述显示所述目标页面的动态内容，包括：

显示所述目标页面的所述动态内容的第一画面，所述第一画面包括显示为灰度图的所述彩色内容；

显示所述彩色内容从灰度图渐变为彩色图的渐变效果；

显示所述目标页面的所述动态内容的第二画面，所述第二画面包括显示为彩色图的所述彩色内容。

11.根据权利要求1至8任一所述的方法，其特征在于，所述显示所述目标页面的第二状态画面，包括：

向服务器发送页面数据获取请求；

响应于接收到所述服务器发送的第一页面数据，根据所述第一页面数据显示所述目标页面的所述第二状态画面，所述第一页面数据包括所述动态内容。

12.根据权利要求1至8任一所述的方法，其特征在于，所述显示所述目标页面的第二状态画面，包括：

向服务器发送页面数据获取请求；

响应于数据获取失败，读取本地存储的第二页面数据，所述第二页面数据包括所述动态内容；

根据所述第二页面数据显示所述目标页面的所述第二状态画面。

13.一种页面显示装置，其特征在于，所述装置包括：

显示模块，用于显示目标页面的第一状态画面，所述第一状态画面包括位于动态内容区域的动态骨架和位于静态内容区域的静态骨架，所述动态内容区域用于显示所述目标页面中的动态内容，所述动态骨架用于表征所述动态内容的框架，所述动态骨架由至少一个矩形组成；所述静态内容区域用于显示所述目标页面中的静态内容，所述静态骨架用于表征所述静态内容的框架，所述静态骨架显示为第二静态内容的第一模糊图；

所述显示模块，用于显示所述动态骨架逐渐消失的消失动画，在所述静态内容区域显示第一静态内容从模糊到清晰的过渡动画；所述消失动画包括从所述动态骨架、到所述动态骨架逐渐消隐、到所述动态骨架消失、再到显示所述动态内容的过渡动画；

所述显示模块，用于显示所述目标页面的第二状态画面，所述第二状态画面包括显示在所述动态内容区域的所述动态内容和显示在所述静态内容区域的所述第一静态内容；

其中，所述第一静态内容是本次显示的所述目标页面中的静态内容，所述第二静态内容是生成骨架屏时所依据的所述目标页面在所述静态内容区域所显示的静态内容；所述第一静态内容与所述第二静态内容相同，或，所述第一静态内容与所述第二静态内容不同；

所述静态内容是指所述目标页面中更替频率低于阈值的内容；所述动态内容是指所述目标页面中更替频率高于阈值的内容。

14.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至12任一所述的页面显示方法。

15.一种计算机可读存储介质，其特征在于，所述可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至12任一所述的页面显示方法。