CN116680026A - 基于骨架屏的显示方法及装置、存储介质、计算机设备 - Google Patents

Abstract

本申请公开了一种基于骨架屏的显示方法及装置、存储介质、计算机设备，该方法包括：响应于对目标页面的请求指令，确定所述目标页面的渲染类型；若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。不仅可以简单、快捷的进行骨架屏显示，而且减少了为每套页面布局开发骨架屏布局文件的繁琐操作，降低了人力成本，提升了开发效率。

Description

基于骨架屏的显示方法及装置、存储介质、计算机设备

技术领域

本申请涉及计算机技术领域，尤其是涉及到一种基于骨架屏的显示方法及装置、存储介质、计算机设备。

背景技术

骨架屏在客户端是非常常见的loading方式，但是一般情况下布局随着需求改变骨架屏需要再次调整，如果该界面属于动态渲染，这种情况下骨架屏就很难执行，因为骨架屏并不知道这个界面渲染之后的布局排版到底是什么样的。目前的硬布局方式，每一个布局对应一套骨架屏，布局修改骨架屏需要做调整，人力成本增加体验性差。

发明内容

有鉴于此，本申请提供了一种基于骨架屏的显示方法及装置、存储介质、计算机设备，不仅可以简单、快捷的进行骨架屏动态计算和显示，而且减少了为每套页面布局开发骨架屏布局文件的繁琐操作，降低了人力成本，提升了开发效率。

根据本申请的一个方面，提供了一种基于骨架屏的显示方法，应用于客户端，所述方法包括：

响应于对目标页面的请求指令，确定所述目标页面的渲染类型；

若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；

根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

可选地，所述确定所述目标页面的渲染类型，包括：

确定所述目标页面的UI数据预估拉取时长；

若所述UI数据预估拉取时长超过预设时长，则确定所述目标页面的渲染类型为骨架屏类型；

若所述UI数据预估拉取时长不超过所述预设时长，则确定所述目标页面的渲染类型为普通类型；

相应地，所述方法还包括：

若所述目标页面的渲染类型为普通类型，则拉取所述目标页面的UI数据，并基于所述UI数据渲染所述目标页面。

可选地，所述基于所述骨架屏配置数据计算骨架屏布局数据，包括：

获取所述客户端的显示界面尺寸；

基于所述骨架屏配置数据以及所述显示界面尺寸，计算骨架屏布局数据。

可选地，所述获取所述目标页面的骨架屏配置数据之前，所述方法还包括：

查询是否存在预存储的所述目标页面的骨架屏布局数据；

若存在所述骨架屏布局数据，则直接执行所述根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面；

若不存在所述骨架屏布局数据，则执行所述获取所述目标页面的骨架屏配置数据；

相应地，所述基于所述骨架屏配置数据计算骨架屏布局数据之后，所述方法还包括：

存储所述骨架屏布局数据。

可选地，所述获取所述目标页面的骨架屏配置数据之前，所述方法还包括：

查询是否存在所述目标页面的骨架屏文件；

若不存在所述骨架屏文件，或者存在所述骨架屏文件但所述骨架屏文件已失效，则执行所述获取所述目标页面的骨架屏配置数据的步骤；

若存在所述目标页面的骨架屏文件、且所述骨架屏文件未失效，则基于所述骨架屏文件，生成并显示所述目标页面的骨架屏界面。

可选地，所述方法还包括：

接收布局变更信息，其中，所述布局变更信息包括变更页面标识以及子布局修改数据；

确定所述变更页面标识对应的待变更页面，获取所述待变更页面的骨架屏配置数据作为待变更配置数据；

若未获取到所述待变更页面的骨架屏配置数据，则获取所述待变更页面的骨架屏文件作为待解析骨架屏文件，对所述待解析骨架屏文件进行解析得到待变更配置数据；

基于所述子布局修改数据对所述待变更配置数据进行更新。

可选地，所述基于所述子布局修改数据对所述待变更配置数据进行更新之后，所述方法还包括：

将所述目标页面的骨架屏文件设置为失效。

根据本申请的另一方面，提供了一种基于骨架屏的显示装置，应用于客户端，所述装置包括：

模式确定模块，用于响应于对目标页面的请求指令，确定所述目标页面的渲染类型；

计算模块，用于若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；

渲染模块，用于根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

可选地，所述模式确定模块，还用于：

确定所述目标页面的UI数据预估拉取时长；

若所述UI数据预估拉取时长超过预设时长，则确定所述目标页面的渲染类型为骨架屏类型；

若所述UI数据预估拉取时长不超过所述预设时长，则确定所述目标页面的渲染类型为普通类型；

相应地，所述渲染模块，还用于：

若所述目标页面的渲染类型为普通类型，则拉取所述目标页面的UI数据，并基于所述UI数据渲染所述目标页面。

可选地，所述计算模块，还用于：

获取所述客户端的显示界面尺寸；

基于所述骨架屏配置数据以及所述显示界面尺寸，计算骨架屏布局数据。

可选地，所述计算模块，还用于：

查询是否存在预存储的所述目标页面的骨架屏布局数据；

若存在所述骨架屏布局数据，则直接执行所述根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面；

若不存在所述骨架屏布局数据，则执行所述获取所述目标页面的骨架屏配置数据；

在所述基于所述骨架屏配置数据计算骨架屏布局数据之后，存储所述骨架屏布局数据。

可选地，所述计算模块，还用于：

查询是否存在所述目标页面的骨架屏文件；

若不存在所述骨架屏文件，或者存在所述骨架屏文件但所述骨架屏文件已失效，则执行所述获取所述目标页面的骨架屏配置数据的步骤；

若存在所述目标页面的骨架屏文件、且所述骨架屏文件未失效，则基于所述骨架屏文件，生成并显示所述目标页面的骨架屏界面。

可选地，所述计算模块，还用于：

接收布局变更信息，其中，所述布局变更信息包括变更页面标识以及子布局修改数据；

确定所述变更页面标识对应的待变更页面，获取所述待变更页面的骨架屏配置数据作为待变更配置数据；

若未获取到所述待变更页面的骨架屏配置数据，则获取所述待变更页面的骨架屏文件作为待解析骨架屏文件，对所述待解析骨架屏文件进行解析得到待变更配置数据；

基于所述子布局修改数据对所述待变更配置数据进行更新。

可选地，所述计算模块，还用于：

在所述基于所述子布局修改数据对所述待变更配置数据进行更新之后，将所述目标页面的骨架屏文件设置为失效。

依据本申请又一个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述基于骨架屏的显示方法。

依据本申请再一个方面，提供了一种计算机设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述基于骨架屏的显示方法。

借由上述技术方案，本申请提供的一种基于骨架屏的显示方法及装置、存储介质、计算机设备，当用户请求打开目标页面时，如果判断目标页面的渲染类型为骨架屏类型，那么同步的进行UI数据拉取和骨架屏显示，其中，骨架屏显示逻辑中，先利用目标页面的骨架屏配置数据进行布局数据计算，再基于动态计算出的骨架屏布局数据生成骨架屏界面，完成UI数据拉取和骨架屏界面显示后，将UI数据渲染在骨架屏界面中实现目标页面的显示。本申请通过动态计算骨架屏布局数据的方式，相比于目前硬布局骨架屏的方式，无需为每个页面创建骨架屏、也无需在页面的布局变化时调整骨架屏，只需简单预设骨架屏子布局的配置数据，即可实现骨架屏的动态布局，并且不会带来过多的性能开销，不仅可以简单、快捷的进行骨架屏显示，而且减少了为每套页面布局开发骨架屏布局文件的繁琐操作，降低了人力成本，提升了开发效率。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

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

图1示出了本申请实施例提供的一种基于骨架屏的显示方法的流程示意图；

图2示出了本申请实施例提供的另一种基于骨架屏的显示方法的流程示意图；

图3示出了本申请实施例提供的一种骨架屏布局数据计算的流程示意图；

图4示出了本申请实施例提供的又一种基于骨架屏的显示方法的流程示意图；

图5示出了本申请实施例提供的又一种基于骨架屏的显示方法的流程示意图；

图6示出了本申请实施例提供的又一种基于骨架屏的显示方法的流程示意图；

图7示出了本申请实施例提供的又一种基于骨架屏的显示方法的流程示意图；

图8示出了本申请实施例提供的一种基于骨架屏的显示装置的结构示意图；

图9示出了本申请实施例提供的一种计算机设备的装置结构示意图。

具体实施方式

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

在本实施例中提供了一种基于骨架屏的显示方法，如图1所示，该方法包括：

步骤101，响应于对目标页面的请求指令，确定所述目标页面的渲染类型。

步骤102，若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容。

步骤103，根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

本申请实施例中，用户使用客户端查看某个目标页面时，客户端响应于对目标页面的请求指令，确定该目标页面的渲染类型，页面的渲染类型可以包括骨架屏类型和普通类型两种，骨架屏类型是先生成目标页面的骨架屏进行显示，再对骨架屏上待渲染的各子布局进行渲染，得到最终的目标页面，而普通类型是直接显示目标页面。如果确定目标页面的渲染类型为骨架屏类型，那么可以同步的进行骨架屏显示和目标页面UI数据拉取两个流程，如图2所示，APP界面打开请求显示目标页面后，执行请求数据的耗时逻辑即拉取UI数据，同时在耗时逻辑的执行过程中进行骨架屏显示，骨架屏显示和UI数据拉取均完成后，对骨架屏进行UI渲染，从而显示完整的目标页面。

本申请实施例的骨架屏生成流程中，不同于现有技术的硬布局方式，先获取目标页面的骨架屏配置数据，其中，骨架屏配置数据具体包括骨架屏上各子布局的尺寸、位置信息，基于骨架屏配置数据可以计算出骨架屏上每个子布局的位置和尺寸，即计算骨架屏布局数据，获得骨架屏中各子布局的布局信息列表。从而在已知各子布局的尺寸、位置的情况下，即可生成骨架屏形式的显示界面。如图3所示，列表布局需要动态计算列表list的size，列表不能太长，太长超出屏幕有滚动条视觉效果也不好，太短了不足整个屏幕视觉效果也不好，所以刚刚铺满整个屏幕是最好的；List.size＝屏幕的高度/item的高度，因为item是一个子布局，所以它的高度是可以得知的；item子布局可以将背景色填充至骨架屏背景色；这样列表的骨架屏效果就出来了；渲染逻辑与图一一致，数据逻辑处理完之后直接将listview中的数据源替换数据逻辑之后的数据源，直接在列表骨架屏上直接渲染。

另外，该方式在内存消耗上也是具有很大优势的，因为骨架屏和真实数据(骨架屏配置数据)显示是一套布局，UI内存开销上大大减少。如图4所示，骨架屏和真实数据显示是同一套布局；当界面需要显示骨架屏时，如果骨架屏不需要自定义则加载骨架屏布局文件，然后将view子控件背景色变量值设置为骨架屏背景色值(RGB色值)；如果骨架屏需要自定义，具有默认数据的也可以支持，会紧密骨架屏默认数据填充，并且设置骨架屏动画背景；这样骨架屏的布局样式与真实数据布局样式一模一样；并且由于是本地布局和本地数据，速度显示基本是毫秒级；在内存开销上虽然界面显示好像多了一层骨架屏其实骨架屏和真实数据布局是同一套，所以在内存开销是没有任何增加的。

通过应用本实施例的技术方案，当用户请求打开目标页面时，如果判断目标页面的渲染类型为骨架屏类型，那么同步的进行UI数据拉取和骨架屏显示，其中，骨架屏显示逻辑中，先利用目标页面的骨架屏配置数据进行布局数据计算，再基于动态计算出的骨架屏布局数据生成骨架屏界面，完成UI数据拉取和骨架屏界面显示后，将UI数据渲染在骨架屏界面中实现目标页面的显示。本申请通过动态计算骨架屏布局数据的方式，相比于目前硬布局骨架屏的方式，无需为每个页面创建骨架屏、也无需在页面的布局变化时调整骨架屏，只需简单预设骨架屏子布局的配置数据，即可实现骨架屏的动态布局，并且不会带来过多的性能开销，不仅可以简单、快捷的进行骨架屏显示，而且减少了为每套页面布局开发骨架屏布局文件的繁琐操作，降低了人力成本，提升了开发效率。

进一步的，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例的具体实施过程，提供了另一种基于骨架屏的显示方法，如图5所示，该方法包括：

步骤201，响应于对目标页面的请求指令，确定所述目标页面的UI数据预估拉取时长。

步骤202，若所述UI数据预估拉取时长不超过预设时长，则确定所述目标页面的渲染类型为普通类型；拉取所述目标页面的UI数据，并基于所述UI数据渲染所述目标页面。

本申请实施例中，用户请求打开目标页面时，先识别目标页面的渲染类型，具体地，可以对目标页面UI数据的拉取时长进行预测，确定UI数据预估拉取时长，从而结合预设时长确定目标页面的渲染类型为普通类型还是骨架屏类型。如果UI数据预估拉取时长不超过预设时长，说明可以较快的获取到UI数据，那么可以确认渲染类型为普通类型，直接拉取UI数据并进行渲染即可。其中，如果目标页面的UI数据是本地缓存的，那么可以直接确认为普通类型，如果需要从服务器拉取，那么UI数据预估拉取时长可以根据目标页面的内容类型、当前的网络状态、当前的网络质量等信息综合预估，例如页面的内容类型为文字类型时所需的拉取时间较短，非文字类型(包含图片、视频等)时所需的拉取时间较长，另外网络状态、网络质量较好时所需的拉取时间较短。

另外，如图6、7所示，可以预先设置各与页面的渲染类型参数，直接在请求打开目标页面时，根据渲染类型参数确认该页面的渲染类型，例如type＝0为普通类型，type＝1为骨架屏类型。App界面打开时会存在两种渲染模式，一种为常规模式(普通数据渲染)，一种为骨架屏模式；这两种模式对应的UI布局为同一套；如果界面有耗时时，开发者设置为骨架屏模式时，会先加载骨架屏，并待数据处理完之后再给UI显示，这样骨架屏数据或骨架屏UI就自动消失，将真实数据填充进来；骨架屏模式分为普通骨架屏(基于骨架屏布局文件加载而显示的)和自定义骨架屏(基于动态计算的骨架屏布局数据而显示的)：普通骨架屏将不设置数据源，直接将布局背景设置为骨架屏样式背景，该背景可以时动画图片/静态图片/背景色；自定义骨架屏模式，是以默认数据先显示，这种效果的UI还原度更加真实；将布局中的图片和数据信息以默认数据显示；如果该界面比较简单没有耗时操作，这时开发这也可以不设置为骨架屏模式，这样就直接走普通模式方式。

步骤203，若所述UI数据预估拉取时长超过预设时长，则确定所述目标页面的渲染类型为骨架屏类型；拉取所述目标页面的UI数据的同时，查询是否存在预存储的所述目标页面的骨架屏布局数据。

步骤204，若存在所述骨架屏布局数据，则直接执行所述根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面。

步骤205，若不存在所述骨架屏布局数据，则查询是否存在所述目标页面的骨架屏文件。

步骤206，若存在所述目标页面的骨架屏文件、且所述骨架屏文件未失效，则基于所述骨架屏文件，生成并显示所述目标页面的骨架屏界面。

步骤207，若不存在所述骨架屏文件，或者存在所述骨架屏文件但所述骨架屏文件已失效，则获取所述目标页面的骨架屏配置数据，获取所述客户端的显示界面尺寸，基于所述骨架屏配置数据以及所述显示界面尺寸，计算骨架屏布局数据，存储所述骨架屏布局数据，根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容。

在该实施例中，如果确认目标页面的渲染类型为骨架屏类型，那么拉取UI数据和生成骨架屏的流程同时执行。每次计算出骨架屏布局数据后，可以对该骨架屏布局数据进行存储，下次再需要生成同一个页面的骨架屏时直接使用之前计算好的骨架屏布局数据即可。因此，生成骨架屏的流程中，首先，查询预存储了目标页面的骨架屏布局数据，如果有预存储的骨架屏布局数据，说明之前已经计算过骨架屏布局数据，那么直接使用该数据生成并显示骨架屏界面，而如果未预存储骨架屏布局数据，那么继续查询是否存在该目标页面的骨架屏文件；其次，如果存在骨架屏文件并且该文件未失效，那么可以直接通过加载骨架屏文件的方式显示骨架屏界面；最后，如果不存在骨架屏文件，或者虽然存在骨架屏文件但该文件已经失效，那么就需要获取目标页面的骨架屏配置数据进行布局数据的动态计算，具体地，为保证骨架屏的视觉效果，可以获取客户端的显示界面尺寸，从而基于显示界面尺寸和骨架屏配置数据，计算出每个子布局的位置、尺寸和填充内容，并将计算出的上述信息作为骨架屏布局数据进行存储，方便下次直接使用。

步骤208，在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

在该实施例中，完成UI数据拉取和骨架屏显示后，将UI数据渲染在骨架屏上完成目标页面的渲染。

本申请实施例中，页面的布局发生变化时，不需要重新生成骨架屏布局文件，只需要随时方便的修改骨架屏配置数据，以便后续对目标页面的骨架屏布局数据进行动态计算，可选地，所述方法还包括：接收布局变更信息，其中，所述布局变更信息包括变更页面标识以及子布局修改数据；确定所述变更页面标识对应的待变更页面，获取所述待变更页面的骨架屏配置数据作为待变更配置数据；若未获取到所述待变更页面的骨架屏配置数据，则获取所述待变更页面的骨架屏文件作为待解析骨架屏文件，对所述待解析骨架屏文件进行解析得到待变更配置数据；基于所述子布局修改数据对所述待变更配置数据进行更新，将所述目标页面的骨架屏文件设置为失效。

在上述实施例中，开发人员对页面的布局进行修改时，只需要给出在原有页面基础上对哪些子布局进行修改的修改数据、或者给出新的骨架屏配置数据即可，客户端接收到布局变更信息时，先根据布局变更信息携带的变更页面标识确定待变更页面，再获取该待变更页面对应的骨架屏配置数据，从而结合布局变更信息携带的子布局修改数据，对骨架屏配置数据进行修改和存储。如果没有获取到待变更页面的骨架屏配置数据，那么先获取待变更页面的骨架屏文件进行解析，从而将解析得到的骨架屏配置数据作为待变更配置数据，再结合子布局修改数据进行修改和存储。另外，如布局变更信息直接携带新的骨架屏配置数据，直接存储该数据即可。

进一步的，作为图1方法的具体实现，本申请实施例提供了一种基于骨架屏的显示装置，如图8所示，该装置包括：

模式确定模块，用于响应于对目标页面的请求指令，确定所述目标页面的渲染类型；

计算模块，用于若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；

渲染模块，用于根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

可选地，所述模式确定模块，还用于：

确定所述目标页面的UI数据预估拉取时长；

若所述UI数据预估拉取时长超过预设时长，则确定所述目标页面的渲染类型为骨架屏类型；

若所述UI数据预估拉取时长不超过所述预设时长，则确定所述目标页面的渲染类型为普通类型；

相应地，所述渲染模块，还用于：

若所述目标页面的渲染类型为普通类型，则拉取所述目标页面的UI数据，并基于所述UI数据渲染所述目标页面。

可选地，所述计算模块，还用于：

获取所述客户端的显示界面尺寸；

基于所述骨架屏配置数据以及所述显示界面尺寸，计算骨架屏布局数据。

可选地，所述计算模块，还用于：

查询是否存在预存储的所述目标页面的骨架屏布局数据；

若存在所述骨架屏布局数据，则直接执行所述根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面；

若不存在所述骨架屏布局数据，则执行所述获取所述目标页面的骨架屏配置数据；

在所述基于所述骨架屏配置数据计算骨架屏布局数据之后，存储所述骨架屏布局数据。

可选地，所述计算模块，还用于：

查询是否存在所述目标页面的骨架屏文件；

若不存在所述骨架屏文件，或者存在所述骨架屏文件但所述骨架屏文件已失效，则执行所述获取所述目标页面的骨架屏配置数据的步骤；

若存在所述目标页面的骨架屏文件、且所述骨架屏文件未失效，则基于所述骨架屏文件，生成并显示所述目标页面的骨架屏界面。

可选地，所述计算模块，还用于：

接收布局变更信息，其中，所述布局变更信息包括变更页面标识以及子布局修改数据；

确定所述变更页面标识对应的待变更页面，获取所述待变更页面的骨架屏配置数据作为待变更配置数据；

若未获取到所述待变更页面的骨架屏配置数据，则获取所述待变更页面的骨架屏文件作为待解析骨架屏文件，对所述待解析骨架屏文件进行解析得到待变更配置数据；

基于所述子布局修改数据对所述待变更配置数据进行更新。

可选地，所述计算模块，还用于：

在所述基于所述子布局修改数据对所述待变更配置数据进行更新之后，将所述目标页面的骨架屏文件设置为失效。

需要说明的是，本申请实施例提供的一种基于骨架屏的显示装置所涉及各功能单元的其他相应描述，可以参考图1至图2方法中的对应描述，在此不再赘述。

本申请实施例还提供了一种计算机设备，具体可以为个人计算机、服务器、网络设备等，如图9所示，该计算机设备包括总线、处理器、存储器和通信接口，还可以包括输入输出接口和显示设备。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储位置信息。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现各方法实施例中的步骤。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机可读存储介质，所述计算机可读存储介质可以是非易失性，也可以是易失性，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于骨架屏的显示方法，应用于客户端，其特征在于，所述方法包括：

响应于对目标页面的请求指令，确定所述目标页面的渲染类型；

若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；

根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

2.根据权利要求1所述的方法，其特征在于，所述确定所述目标页面的渲染类型，包括：

确定所述目标页面的UI数据预估拉取时长；

若所述UI数据预估拉取时长超过预设时长，则确定所述目标页面的渲染类型为骨架屏类型；

若所述UI数据预估拉取时长不超过所述预设时长，则确定所述目标页面的渲染类型为普通类型；

相应地，所述方法还包括：

若所述目标页面的渲染类型为普通类型，则拉取所述目标页面的UI数据，并基于所述UI数据渲染所述目标页面。

3.根据权利要求1所述的方法，其特征在于，所述基于所述骨架屏配置数据计算骨架屏布局数据，包括：

获取所述客户端的显示界面尺寸；

基于所述骨架屏配置数据以及所述显示界面尺寸，计算骨架屏布局数据。

4.根据权利要求3所述的方法，其特征在于，所述获取所述目标页面的骨架屏配置数据之前，所述方法还包括：

查询是否存在预存储的所述目标页面的骨架屏布局数据；

若存在所述骨架屏布局数据，则直接执行所述根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面；

若不存在所述骨架屏布局数据，则执行所述获取所述目标页面的骨架屏配置数据；

相应地，所述基于所述骨架屏配置数据计算骨架屏布局数据之后，所述方法还包括：

存储所述骨架屏布局数据。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述获取所述目标页面的骨架屏配置数据之前，所述方法还包括：

查询是否存在所述目标页面的骨架屏文件；

若不存在所述骨架屏文件，或者存在所述骨架屏文件但所述骨架屏文件已失效，则执行所述获取所述目标页面的骨架屏配置数据的步骤；

若存在所述目标页面的骨架屏文件、且所述骨架屏文件未失效，则基于所述骨架屏文件，生成并显示所述目标页面的骨架屏界面。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

接收布局变更信息，其中，所述布局变更信息包括变更页面标识以及子布局修改数据；

确定所述变更页面标识对应的待变更页面，获取所述待变更页面的骨架屏配置数据作为待变更配置数据；

若未获取到所述待变更页面的骨架屏配置数据，则获取所述待变更页面的骨架屏文件作为待解析骨架屏文件，对所述待解析骨架屏文件进行解析得到待变更配置数据；

基于所述子布局修改数据对所述待变更配置数据进行更新。

7.根据权利要求6所述的方法，其特征在于，所述基于所述子布局修改数据对所述待变更配置数据进行更新之后，所述方法还包括：

将所述目标页面的骨架屏文件设置为失效。

8.一种基于骨架屏的显示装置，应用于客户端，其特征在于，所述装置包括：

模式确定模块，用于响应于对目标页面的请求指令，确定所述目标页面的渲染类型；

计算模块，用于若所述目标页面的渲染类型为骨架屏类型，则拉取所述目标页面的UI数据的同时，获取所述目标页面的骨架屏配置数据，基于所述骨架屏配置数据计算骨架屏布局数据，其中，所述骨架屏布局数据包括至少一个子布局的尺寸、位置和填充内容；

渲染模块，用于根据所述骨架屏布局数据，显示包含所述子布局的骨架屏界面，并在完成所述UI数据的拉取后，基于所述UI数据对所述骨架屏界面进行UI渲染。

9.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法。

10.一种计算机设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法。