CN112287257A - 一种页面展示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例提供一种页面展示方法、装置、电子设备和存储介质，获取待展示页面中的多个页面元素，在所述多个页面元素中确定加载时长满足预设范围的目标元素，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，利用加载时长快的元素代替加载时长慢的元素，避免了用户在浏览页面时错过加载时长慢的元素，以及页面中各元素的浏览量分布不均的问题，提高了用户对于页面展示的体验感。

Description

一种页面展示方法、装置、电子设备及存储介质

技术领域

本发明属于页面展示技术领域，尤其涉及一种页面展示方法、装置、电子设备及存储介质。

背景技术

页面资源一般存储在服务器中，当用户需要浏览某个网页时，则会向服务器发送用于获取页面资源的请求，以将服务器中的页面资源加载至用户终端中浏览。

在用户端加载页面资源时，可能因为用户终端性能差异以及网速的限制，出现页面资源中一些页面元素加载时间过长的情况。例如：页面中文字元素占用的空间小，所以加载较快，而图片元素占用的空间大，当用户终端的性能差或者网速较慢时，等待图片加载完成则需要更多的等待时长。

对于页面中加载时长不同的各元素，用户往往容易看到加载时长较短的元素，不容易看到加载时长较长的元素，从而导致页面中各元素的浏览量分布不均。

发明内容

本发明提供了一种页面展示方法、装置、电子设备及存储介质，以解决现有技术页面中各元素的浏览量分布不均的问题。

第一方面，本发明实施例提供一种页面展示方法，所述方法包括：

获取待展示页面中的多个页面元素；

在所述多个页面元素中确定加载时长满足预设范围的目标元素；

以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，其中，所述占位元素的加载时长小于所述目标元素的加载时长。

可选地，所述占位元素沿袭所述目标元素。

可选地，所述占位元素与所述目标元素的元素类型相同。

可选地，所述目标元素包括第一图片，所述占位元素包括第二图片，所述第二图片为根据所述第一图片生成的，其中，所述第二图片的位数小于所述第一图片的位数。

可选地，还包括：提取所述第一图片中的多个像素点的第一像素值；

依据预设转化关系，将所述第一像素值转化为第二像素值；

根据所述第二像素值生成所述第二图片。

可选地，所述依据预设转化关系包括将颜色值域范围大的像素值转化为颜色值域范围小的像素值。

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

在展示所述占位元素时，加载所述目标元素；

若所述目标元素加载完成，则以所述目标元素替换展示所述占位元素。

第二方面，本发明实施例提供一种页面展示装置，包括：

获取模块，用于获取待展示的页面中多个页面元素；

确定模块，用于在所述多个页面元素中确定加载时长大于阈值的目标元素；

显示模块，用于若查找到与所述目标元素对应的占位元素，在所述页面中显示所述占位元素，所述占位元素的加载时长小于所述目标元素的加载时长。

第三方面，本发明实施例提供一种电子设备，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法。

第四方面，本发明实施例提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行上述第一方面所述的方法。

本发明实施例提供的技术方案中通过获取待展示页面中的多个页面元素，在所述多个页面元素中确定加载时长满足预设范围的目标元素，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，利用加载时长快的元素代替加载时长慢的元素，避免了用户在浏览页面时错过加载时长慢的元素，以及页面中各元素的浏览量分布不均的问题，提高了用户对于页面展示的体验感。

附图说明

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

图1是本发明实施例的一种页面展示方法流程图；

图2是本发明实施例的一种页面展示装置的结构示意图；

图3为本发明实施例的一种电子设备的示意图。

具体实施方式

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

为了更好的理解本发明的技术方案，下面结合附图对本发明实施例进行详细描述。

目前，在用户端加载页面资源时，可能因为用户终端性能差异以及网速的限制，出现页面资源中一些页面元素加载时间过长的情况。例如：页面中文字元素占用的空间小，所以加载较快，而图片元素占用的空间大，当用户终端的性能差或者网速较慢时，等待图片加载完成则需要更多的等待时长。对于页面中加载时长不同的各元素，用户往往容易看到加载时长较短的元素，不容易看到加载时长较长的元素，从而导致页面中各元素的浏览量分布不均,当前主要采用占位元素的方式提示用户在未显示元素的位置有元素正在加载，比如占位图中写有“正在加载资源”的标语，或者直接用空白图占位，但是上述方式并没有考虑到与实际展示的图片的联系，千篇一律的使用一样的占位图，同样无法引起用户的注意，无法平衡页面元素的浏览量，基于此，图1为本发明一实施例提供的一种页面展示方法的流程图，如图1所示，该方法包括：

步骤101，获取待展示页面中的多个页面元素。

在该步骤中，待展示页面可包括网站页面或者应用程序(Application，简称APP)页面。页面元素可包括文字元素或者图片元素。除此之外，页面元素还可以包括其他类型元素。需要说明的是，APP页面和网站页面上页面展示模块的顺序以及位置都是固定的，因此可按照页面展示模块的排列顺序依次获取待展示页面中的多个页面元素。

本发明实施例中，例如，从某一待展示页面中获取到的多个页面元素包括：文字元素A、文字元素B、文字元素C以及图片元素D。在通常情况下，由于页面中文字元素占用的空间小，加载速度较快，因此能够在页面中较快的显示文字元素，而由于图片元素占用的空间大，加载速度较慢，因此在进行页面展示时，若用户终端的性能差或者网速较慢，则需要更多的等待时长以使图片加载完成。

然而上述情况仅为通常情况下，为保证页面展示的效率，本发明实施例不能直接断定文字元素能够较快显示，而图片元素则需要较长时间才能显示。也就是说，本发明实施例中需要在获取多个页面元素之后，确定出每个页面元素的加载时长。例如，文字元素A的加载时长为0.01ms，文字元素B的加载时长为0.2ms、文字元素C的加载时长为0.1ms，图片元素D的加载时长为3s。在确定出每个页面元素的加载时长之后，需要执行后续步骤102，确定出加载时长满足预设范围的目标元素。

步骤102，在所述多个页面元素中确定加载时长满足预设范围的目标元素。

在该步骤中，预设范围用于指示大于或者等于加载时长阈值的时间段，其中，预设范围可根据需求设定。目标元素用于指示加载时长满足预设范围的页面元素，其中，目标元素可包括文字元素或者图片元素。此外，确定出的目标元素的数量可包括一个或者多个。

本发明实施例中，由于文字元素的加载时长较小，而图片元素的加载时长较大，因此从多个页面元素中确定出的加载时长满足预设范围的目标元素，通常为图片元素。具体地，以预设范围包括大于或者等于5s为例，在所述多个页面元素中确定加载时长大于或者等于5s的目标元素。

需要说明的是，在确定出目标元素之后，由于目标元素的加载时长满足预设范围，若不对目标元素进行处理，则容易导致在进行页面显示时，由于目标元素的加载时长过长，则用户往往容易看到加载时长较短的元素，不容易看到加载时长较长的元素，从而导致页面中各元素的浏览量分布不均的问题。因此，当确定出目标元素之后，需要执行后续步骤103，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素。

在实际应用中，若确定出的文字元素A的加载时长为0.01ms，文字元素B的加载时长为0.2ms、文字元素C的加载时长为0.1ms，图片元素D的加载时长为3s，由于预设范围包括大于或者等于5s，因此在所述多个页面元素中，未确定加载时长满足预设范围的目标元素，则流程结束。若确定出的文字元素A的加载时长为0.01ms，文字元素B的加载时长为0.2ms、文字元素C的加载时长为0.1ms，图片元素D的加载时长为5s，由于预设范围包括大于或者等于5s，因此在所述多个页面元素中，确定加载时长满足预设范围的目标元素为图片元素D。因此，在确定出目标元素为图片元素D之后，需要以图片元素D对应的占位元素替换展示图片元素D，使得用户在浏览页面时，能够看到图片元素D对应的占位元素，避免了用户在浏览页面时错过加载时长慢的元素的问题，从而提高了用户对于页面展示的体验感。

步骤103，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素。

在该步骤中，占位元素用于指示代替目标元素的元素，其中，所述占位元素与所述目标元素的元素类型相同，所述占位元素沿袭所述目标元素，且所述占位元素的加载时长小于所述目标元素的加载时长。其中，所述占位元素沿袭所述目标元素用于指示该占位元素的色调与所述目标元素相同。

本发明实施例中，以目标元素包括图片元素为例，所述目标元素包括第一图片，则所述占位元素包括第二图片，且所述第二图片为根据所述第一图片生成的，其中，所述第二图片的位数小于所述第一图片的位数。

本发明实施例中，在对“根据所述第一图片生成第二图片”的过程进行详细解释之前，先对本发明所涉及的相关概念进行简单介绍：

像素点由图像的小方格组成，且小方块都有一个明确的位置和被分配的色彩数值，多个小方格的色彩数值和位置决定了图片所呈现的样子。其中，色彩数值用于指示R值，G值以及B值。需要说明的是，RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，其中，RGB分别代表红、绿、蓝三个通道的颜色。

正常的RGB24是由24位即3个字节来描述一个像素，R、G、B各8位。而实际应用中为了减少图片的尺寸，以减少图片的占用空间，需要对R、G、B所使用的位数进行的缩减，例如，将RGB(8，8，8)缩减为RGB(5，5，5)，其中，RGB(8，8，8)表示为R-8bit，G-8bit，B-8bit，RGB(5，5，5)表示为R-5bit，G-5bit，B-5bit。

在介绍完相关概念之后，具体地，“根据所述第一图片生成第二图片”的过程可包括：

第一步、提取所述第一图片中的多个像素点的第一像素值。

对在该步骤中，第一像素值用于指示某一像素点所对应的R值，G值以及B值中某一指定像素值。例如，以R值为第一像素值为例，当第一图片中的像素点a包括RGB(8，8，8)、像素点b包括RGB(8，6，8)、像素点c包括RGB(6，6，8)时，提取第一图片中的多个像素点的第一像素值包括8，8，6。

第二步、依据预设转化关系，将所述第一像素值转化为第二像素值。

在该步骤中，所述依据预设转化关系包括将颜色值域范围大的像素值转化为颜色值域范围小的像素值。也就是说，根据该预设转化关系，将第一像素值缩减至第二像素值。例如，以第一图片中的像素点a包括RGB(8，8，8)、像素点b包括RGB(8，6，8)、像素点c包括RGB(6，6，8)为例时，若将第一图片中的3个像素点中的R值进行缩减3个值时，则像素点a的R值由8个值转化为5个值，像素点b的R值由8个值转化为5个值，像素点c的R值由6个值转化为3个值。

第三步、根据所述第二像素值生成所述第二图片。

在该步骤中，以像素点a的第二像素值为5，像素点b的第二像素值为5，像素点c的第二像素值为3为例，则生成第二图片的像素点a包括RGB(5，8，8)、像素点b包括RGB(5，6，8)、像素点c包括RGB(3，6，8)，再根据第二图片的多个像素点生成第二图片。

需要说明的是，上述步骤说明均为举例说明，在实际应用中，可根据需求根据预设转化关系，对R值、G值、以及B值进行适应性转化。

步骤104，在展示所述占位元素时，加载所述目标元素。

在该步骤中，可在页面中可展示占位元素的同时，加载所述目标元素。

本发明实施例中，例如，以上述占位元素包括第二图片，目标元素包括第一图片为例，可在页面中展示第二图片的同时，加载第一图片，即利用加载时长快的元素(第二图片)代替加载时长慢的元素(第一图片)，避免了用户在浏览页面时错过加载时长慢的元素，以及页面中各元素的浏览量分布不均的问题，提高了用户对于页面展示的体验感。

其中，第二图片可理解为空白图框或者模糊图片，第一图片可理解为高清图片，也就是说，通过上述页面展示方法，能够使得用户在浏览页面时先显示空白图框或者模糊图，以使用户知晓此处存在图片，从而避免了页面中各元素的浏览量分布不均的问题。

步骤105，若所述目标元素加载完成，则以所述目标元素替换展示所述占位元素。

在该步骤中，若目标元素未加载完成，则继续显示目标元素对应的占位元素，若目标元素加载完成，则以所述目标元素替换展示所述占位元素。

本发明实施例中，例如，以上述占位元素包括第二图片，目标元素包括第一图片为例，若第一图片未加载完成，则继续显示第二图片；若第一图片加载完成，则显示第一图片。其中，第二图片可理解为空白图框或者模糊图片，第一图片可理解为高清图片，也就是说，通过上述页面展示方法，在展示空白图框或者模糊图的同时，加载高清图片，使得待高清图片加载完成后，显示高清图片，从而提高了用户对于页面展示的体验感。

本发明实施例提供的技术方案中，获取待展示页面中的多个页面元素，在所述多个页面元素中确定加载时长满足预设范围的目标元素，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，利用加载时长快的元素代替加载时长慢的元素，避免了用户在浏览页面时错过加载时长慢的元素，以及页面中各元素的浏览量分布不均的问题，提高了用户对于页面展示的体验感。

图2为本发明一实施例提供的一种页面展示装置的结构示意图，如图3所示，该装置包括：

获取模块01，用于获取待展示的页面中多个页面元素；

确定模块02，用于在所述多个页面元素中确定加载时长大于阈值的目标元素；

显示模块03，用于若查找到与所述目标元素对应的占位元素，在所述页面中显示所述占位元素，所述占位元素的加载时长小于所述目标元素的加载时长。

图3为本发明一实施例提供的一种电子设备的示意图，如图3所示，该电子设备包括：处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现方法实施例所述的页面展示方法。

本发明实施例提供的电子设备，处理器通过获取待展示页面中的多个页面元素，在所述多个页面元素中确定加载时长满足预设范围的目标元素，以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，利用加载时长快的元素代替加载时长慢的元素，避免了用户在浏览页面时错过加载时长慢的元素，以及页面中各元素的浏览量分布不均的问题，提高了用户对于页面展示的体验感。上述电子设备提到的通信总线1140可以是外设部件互连标准(PeripheralComponentInterconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustryStandardArchitecture，简称EISA)总线等。该通信总线1140可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口1120用于上述电子设备与其他设备之间的通信。

存储器1130可以包括随机存取存储器(RandomAccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器1110可以是通用处理器，包括中央处理器(CentralProcessingUnit，简称CPU)、网络处理器(NetworkProcessor，简称NP)等；还可以是数字信号处理器(DigitalSignalProcessing，简称DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-ProgrammableGateArray，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。

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

Claims (10)

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

获取待展示页面中的多个页面元素；

在所述多个页面元素中确定加载时长满足预设范围的目标元素；

以与所述目标元素对应的预先生成的占位元素替换展示所述目标元素，其中，所述占位元素的加载时长小于所述目标元素的加载时长。

2.根据权利要求1所述的页面展示方法，其特征在于，所述占位元素沿袭所述目标元素。

3.根据权利要求1所述的页面展示方法，其特征在于，所述占位元素与所述目标元素的元素类型相同。

4.根据权利要求3所述的页面展示方法，其特征在于，所述目标元素包括第一图片，所述占位元素包括第二图片，所述第二图片为根据所述第一图片生成的，其中，所述第二图片的位数小于所述第一图片的位数。

5.根据权利要求4所述的页面展示方法，其特征在于，还包括：提取所述第一图片中的多个像素点的第一像素值；

依据预设转化关系，将所述第一像素值转化为第二像素值；

根据所述第二像素值生成所述第二图片。

6.根据权利要求5所述的页面展示方法，其特征在于，所述依据预设转化关系包括将颜色值域范围大的像素值转化为颜色值域范围小的像素值。

7.根据权利要求1所述的页面展示方法，其特征在于，所述方法还包括：

在展示所述占位元素时，加载所述目标元素；

若所述目标元素加载完成，则以所述目标元素替换展示所述占位元素。

8.一种页面展示装置，其特征在于，包括：

获取模块，用于获取待展示的页面中多个页面元素；

确定模块，用于在所述多个页面元素中确定加载时长大于阈值的目标元素；

显示模块，用于若查找到与所述目标元素对应的占位元素，在所述页面中显示所述占位元素，所述占位元素的加载时长小于所述目标元素的加载时长。

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

10.一种具有处理器可执行的非易失的程序代码的计算机可读介质，其特征在于，所述程序代码使所述处理器执行所述权利要求1至7任一所述方法。

Images