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

Abstract

本公开关于一种页面显示方法、装置、电子设备及存储介质，属于网络技术领域。方法包括：根据当前显示的第一页面，确定第二页面，第二页面为第一页面的子页面；获取第二页面的目标资源存储到本地缓存中；响应于第二页面的加载请求，在第二页面中显示占位资源；在本地缓存中进行查询，得到第二页面的目标资源；将第二页面中显示的占位资源替换为目标资源。本公开可以减少流量的消耗，提升页面的显示速度。

Description

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

技术领域

本公开涉及网络技术领域，尤其涉及一种页面显示方法、装置、电子设备及存储介质。

背景技术

随着网络技术的发展，互联网上的资源越来越多，用户可以在电子设备上进行浏览操作，电子设备可以根据用户的浏览操作加载相应的网页来显示资源。

相关技术中，电子设备在加载网页时，电子设备需要向服务器请求大量的图片资源，在获取到这些图片资源后，在网页上进行显示，但这些图片资源的体积较大，不仅会消耗用户大量的流量，而且会造成页面显示速度过慢，使得用户等待时间过长。因此，亟需一种页面显示方法，来减少流量的消耗，提升页面的显示速度。

发明内容

本公开提供一种页面显示方法、装置、电子设备及存储介质，可以减少流量的消耗，提升页面的显示速度。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面显示方法，包括：

根据当前显示的第一页面，确定第二页面，所述第二页面为所述第一页面的子页面；

获取所述第二页面的目标资源存储到本地缓存中；

响应于所述第二页面的加载请求，在所述第二页面中显示占位资源，所述占位资源与所述目标资源的资源类型相同；

在所述本地缓存中进行查询，得到所述第二页面的所述目标资源；

将所述第二页面中显示的所述占位资源替换为所述目标资源。

在一种可能实现方式中，所述获取所述第二页面的目标资源存储到本地缓存中，包括：

根据所述第二页面和所述本地缓存，确定所述目标资源，所述目标资源为所述本地缓存中未存储的所述第二页面的资源；

向服务器发送资源获取请求，所述资源获取请求用于请求获取所述目标资源；

接收所述服务器基于所述资源获取请求返回的所述目标资源；

将所述目标资源存储到所述本地缓存中。

在一种可能实现方式中，所述根据所述第二页面和所述本地缓存，确定所述目标资源，包括：

根据所述第二页面对应的资源文件，确定所述第二页面的至少一个资源的资源标识；

根据所述至少一个资源的资源标识，在所述本地缓存中进行查询，所述本地缓存用于根据资源标识存储资源；

响应于所述本地缓存中未存储有所述至少一个资源中的任一资源，将所述任一资源确定为所述目标资源。

在一种可能实现方式中，所述第二页面的数量为至少一个，所述根据当前显示的第一页面，确定第二页面之后，所述页面显示方法还包括：

依次获取至少一个所述第二页面的目标资源存储到所述本地缓存中；

响应于任一所述第二页面的加载请求，停止依次获取目标资源存储到所述本地缓存中的过程。

在一种可能实现方式中，所述获取所述第二页面的目标资源存储到本地缓存中，包括：

响应于所述第二页面的目标资源的尺寸大于尺寸阈值，对所述第二页面的目标资源进行压缩，得到压缩后的所述目标资源，所述压缩后的所述目标资源的尺寸小于或等于所述尺寸阈值；

将所述压缩后的所述目标资源存储到所述本地缓存中。

在一种可能实现方式中，所述获取所述第二页面的目标资源存储到本地缓存中之后，所述页面显示方法还包括：

响应于所述本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从所述本地缓存中删除访问次数小于目标次数的资源。

在一种可能实现方式中，所述响应于所述第二页面的加载请求，在所述第二页面中显示占位资源，包括：

响应于所述第二页面的加载请求，拦截所述第二页面的资源获取请求，所述资源获取请求用于向服务器请求获取所述第二页面的目标资源。

在所述第二页面中显示所述占位资源。

在一种可能实现方式中，所述根据当前显示的第一页面，确定第二页面，包括：

扫描所述第一页面中的链接；

根据扫描到的链接的目标属性，确定所述第二页面，所述目标属性用于指示链接对应的页面。

在一种可能实现方式中，所述根据当前显示的第一页面，确定第二页面之前，所述页面显示方法还包括：

响应于所述第一页面的加载请求，在所述第一页面中显示占位资源；

在所述本地缓存中进行查询，得到所述第一页面的目标资源；

将所述第一页面中显示的占位资源替换为所述第一页面的目标资源。

在一种可能实现方式中，所述将所述第一页面中显示的占位资源替换为所述第一页面的目标资源之前，所述页面显示方法还包括：

响应于所述本地缓存中未存储所述第一页面的目标资源，向服务器发送资源获取请求，所述资源获取请求用于请求获取所述第一页面的目标资源；

接收所述服务器基于所述资源获取请求返回的所述第一页面的目标资源；

将所述第一页面的目标资源存储到所述本地缓存中。

根据本公开实施例的第二方面，提供一种页面显示装置，包括：

确定单元，被配置为执行根据当前显示的第一页面，确定第二页面，所述第二页面为所述第一页面的子页面；

获取单元，被配置为执行获取所述第二页面的目标资源；

存储单元，被配置为执行将所述第二页面的目标资源存储到本地缓存中；

显示单元，被配置为执行响应于所述第二页面的加载请求，在所述第二页面中显示占位资源，所述占位资源与所述目标资源的资源类型相同；

查询单元，被配置为执行在所述本地缓存中进行查询，得到所述第二页面的所述目标资源；

所述显示单元还被配置为执行将所述第二页面中显示的所述占位资源替换为所述目标资源。

在一种可能实现方式中，所述获取单元被配置为执行：

根据所述第二页面和所述本地缓存，确定所述目标资源，所述目标资源为所述本地缓存中未存储的所述第二页面的资源；

向服务器发送资源获取请求，所述资源获取请求用于请求获取所述目标资源；

接收所述服务器基于所述资源获取请求返回的所述目标资源；

将所述目标资源存储到所述本地缓存中。

在一种可能实现方式中，所述获取单元被配置为执行：

根据所述第二页面对应的资源文件，确定所述第二页面的至少一个资源的资源标识；

根据所述至少一个资源的资源标识，在所述本地缓存中进行查询，所述本地缓存用于根据资源标识存储资源；

响应于所述本地缓存中未存储有所述至少一个资源中的任一资源，将所述任一资源确定为所述目标资源。

在一种可能实现方式中，所述第二页面的数量为至少一个，所述存储单元还被配置为执行依次获取至少一个所述第二页面的目标资源存储到所述本地缓存中；响应于任一所述第二页面的加载请求，停止依次获取目标资源存储到所述本地缓存中的过程。

在一种可能实现方式中，所述获取单元被配置为执行：

响应于所述第二页面的目标资源的尺寸大于尺寸阈值，对所述第二页面的目标资源进行压缩，得到压缩后的所述目标资源，所述压缩后的所述目标资源的尺寸小于或等于所述尺寸阈值；

将所述压缩后的所述目标资源存储到所述本地缓存中。

在一种可能实现方式中，所述页面显示装置还包括：

删除单元，被配置为执行响应于所述本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从所述本地缓存中删除访问次数小于目标次数的资源。

在一种可能实现方式中，所述查询单元被配置为执行：

响应于所述第二页面的加载请求，拦截所述第二页面的资源获取请求，所述资源获取请求用于向服务器请求获取所述第二页面的目标资源。

在所述第二页面中显示所述占位资源。

在一种可能实现方式中，所述确定单元被配置为执行：

扫描所述第一页面中的链接；

根据扫描到的链接的目标属性，确定所述第二页面，所述目标属性用于指示链接对应的页面。

在一种可能实现方式中，所述查询单元还被配置为执行：

响应于所述第一页面的加载请求，在所述第一页面中显示占位资源；

在所述本地缓存中进行查询，得到所述第一页面的目标资源；

将所述第一页面中显示的占位资源替换为所述第一页面的目标资源。

在一种可能实现方式中，所述页面显示装置还包括：

发送单元，被配置为执行响应于所述本地缓存中未存储所述第一页面的目标资源，向服务器发送资源获取请求，所述资源获取请求用于请求获取所述第一页面的目标资源；

接收单元，被配置为执行接收所述服务器基于所述资源获取请求返回的所述第一页面的目标资源；

所述存储单元还被配置为将所述第一页面的目标资源存储到所述本地缓存中。

根据本公开实施例的第三方面，提供一种电子设备，包括：

一个或多个处理器；

用于存储所述一个或多个处理器可执行指令的一个或多个存储器；

其中，所述一个或多个处理器被配置为执行所述指令，以实现如第一方面或第一方面的任一种可能实现方式所述的页面显示方法。

根据本公开实施例的第四方面，提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面或第一方面的任一种可能实现方式所述的页面显示方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，当所述计算机程序产品中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面或第一方面的任一种可能实现方式所述的页面显示方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

通过在显示当前页面时，确定当前页面的子页面，预先获取该子页面的目标资源存储到本地缓存中，由于当前页面的子页面是用户接下来可能访问的页面，提前缓存该页面的目标资源，使得在需要加载该页面时，优先显示默认的占位资源，可以避免页面上出现空白，无需从服务器请求目标资源，而是直接从本地缓存中查询到该目标资源后，及时将占位资源替换为目标资源在页面中进行显示，可以减少流量的消耗，提升页面的显示速度。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面显示方法的实施环境示意图；

图2是根据一示例性实施例示出的一种页面显示方法的流程图；

图3是根据一示例性实施例示出的一种页面显示方法的流程图；

图4是根据一示例性实施例示出的一种页面显示装置的框图；

图5是根据一示例性实施例示出的一种终端的框图。

具体实施方式

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

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开所涉及的用户信息可以为经用户授权或者经过各方充分授权的信息。

图1是根据一示例性实施例示出的一种页面显示方法的实施环境示意图，参见图1，该实施环境包括终端101和服务器102。

终端101为用户所在终端，终端101可以是智能手机、平板电脑、便携式计算机和台式计算机等设备。终端101上可以安装有目标应用，如浏览器，用于提供页面显示的功能。终端101在运行目标应用的过程中，可以显示页面，在页面中显示相应的资源。

服务器102可以是一个服务器，也可以是由若干个服务器组成的服务器集群，还可以是云计算平台或虚拟化中心等。服务器102用于为目标应用提供后台服务，例如，服务器102可以接收终端101基于目标应用发送的资源获取请求，将该资源获取请求对应的资源返回给终端101。

终端101可以通过无线网络或有线网络与服务器102相连，使得终端101与服务器102之间可以进行数据交互。

终端101可以泛指多个终端中的一个，本领域技术人员可以知晓，上述终端的数量可以更多或更少。比如上述终端可以仅为一个，或者上述终端为几十个或几百个，或者更多数量，此时上述实施环境中还包括其他终端。本公开实施例对终端的数量和类型不做限定。

图2是根据一示例性实施例示出的一种页面显示方法的流程图，如图2所示，页面显示方法用于电子设备中，包括以下步骤。

在步骤S201中，根据当前显示的第一页面，确定第二页面，该第二页面为该第一页面的子页面。

在步骤S202中，获取该第二页面的目标资源存储到本地缓存中。

在步骤S203中，响应于该第二页面的加载请求，在该第二页面中显示占位资源，该占位资源与该目标资源的资源类型相同。

在步骤S204中，在该本地缓存中进行查询，得到该第二页面的该目标资源。

在步骤S205中，将该第二页面中显示的该占位资源替换为该目标资源。

本公开实施例提供的方法，通过在显示当前页面时，确定当前页面的子页面，预先获取该子页面的目标资源存储到本地缓存中，由于当前页面的子页面是用户接下来可能访问的页面，提前缓存该页面的目标资源，使得在需要加载该页面时，优先显示默认的占位资源，可以避免页面上出现空白，无需从服务器请求目标资源，而是直接从本地缓存中查询到该目标资源后，及时将占位资源替换为目标资源在页面中进行显示，可以减少流量的消耗，提升页面的显示速度。

在一种可能实现方式中，该获取该第二页面的目标资源存储到本地缓存中，包括：

根据该第二页面和该本地缓存，确定该目标资源，该目标资源为该本地缓存中未存储的该第二页面的资源；

向服务器发送资源获取请求，该资源获取请求用于请求获取该目标资源；

接收该服务器基于该资源获取请求返回的该目标资源；

将该目标资源存储到该本地缓存中。

在一种可能实现方式中，该根据该第二页面和该本地缓存，确定该目标资源，包括：

根据该第二页面对应的资源文件，确定该第二页面的至少一个资源的资源标识；

根据该至少一个资源的资源标识，在该本地缓存中进行查询，该本地缓存用于根据资源标识存储资源；

响应于该本地缓存中未存储有该至少一个资源中的任一资源，将该任一资源确定为该目标资源。

在一种可能实现方式中，该第二页面的数量为至少一个，该根据当前显示的第一页面，确定第二页面之后，该页面显示方法还包括：

依次获取至少一个该第二页面的目标资源存储到该本地缓存中；

响应于任一该第二页面的加载请求，停止依次获取目标资源存储到该本地缓存中的过程。

在一种可能实现方式中，该获取该第二页面的目标资源存储到本地缓存中，包括：

响应于该第二页面的目标资源的尺寸大于尺寸阈值，对该第二页面的目标资源进行压缩，得到压缩后的该目标资源，该压缩后的该目标资源的尺寸小于或等于该尺寸阈值；

将该压缩后的该目标资源存储到该本地缓存中。

在一种可能实现方式中，该获取该第二页面的目标资源存储到本地缓存中之后，该页面显示方法还包括：

响应于该本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从该本地缓存中删除访问次数小于目标次数的资源。

在一种可能实现方式中，该响应于该第二页面的加载请求，在该第二页面中显示占位资源，包括：

响应于该第二页面的加载请求，拦截该第二页面的资源获取请求，该资源获取请求用于向服务器请求获取该第二页面的目标资源。

在该第二页面中显示该占位资源。

在一种可能实现方式中，该根据当前显示的第一页面，确定第二页面，包括：

扫描该第一页面中的链接；

根据扫描到的链接的目标属性，确定该第二页面，该目标属性用于指示链接对应的页面。

在一种可能实现方式中，该根据当前显示的第一页面，确定第二页面之前，该页面显示方法还包括：

响应于该第一页面的加载请求，在该第一页面中显示占位资源；

在该本地缓存中进行查询，得到该第一页面的目标资源；

将该第一页面中显示的占位资源替换为该第一页面的目标资源。

在一种可能实现方式中，该将该第一页面中显示的占位资源替换为该第一页面的目标资源之前，该页面显示方法还包括：

响应于该本地缓存中未存储该第一页面的目标资源，向服务器发送资源获取请求，该资源获取请求用于请求获取该第一页面的目标资源；

接收该服务器基于该资源获取请求返回的该第一页面的目标资源；

将该第一页面的目标资源存储到该本地缓存中。

上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

上述图2所示的流程为本公开实施例的基本流程，下面基于该基本流程对本公开实施例的详细流程进行介绍。

图3是根据一示例性实施例示出的一种页面显示方法的流程图，如图3所示，页面显示方法用于电子设备中，例如，该电子设备可以是图1对应的实施例中的终端101，该页面显示方法包括以下步骤。

在步骤S301中，电子设备响应于第一页面的加载请求，拦截该第一页面的资源获取请求，该资源获取请求用于向服务器请求获取该第一页面的目标资源。

其中，该第一页面可以是网页，如基于HTML(Hyper Text Markup Language，超文本标记语言)5开发的web网页，也称为H5页面。目标资源可以是图片，还可以是音频、视频等多媒体文件。

用户可以在电子设备的目标应用(如浏览器)上进行网页浏览操作，触发对第一页面的加载请求，该加载请求用于请求加载第一页面的目标资源。电子设备在接收到该加载请求后，可以加载第一页面，在加载第一页面时可以拦截该第一页面中的所有资源获取请求。例如，电子设备可以通过浏览器提供的目标接口拦截该资源获取请求，该目标接口中可以定义有拦截逻辑。通过在加载页面时，拦截资源获取请求，可以减少请求次数，节省流量。

在步骤S302中，电子设备在该第一页面中显示占位资源，该占位资源与该目标资源的资源类型相同。

其中，针对目标资源为图片的情况，该占位资源也可以是图片，如该占位资源可以是没有实质内容的灰色图片。

电子设备在接收到第一页面的加载请求后，可以先显示第一页面，在第一页面中显示占位资源，以表明此位置是待显示目标资源的位置。等到电子设备获取到第一页面的目标资源后，再替换该占位资源。

在步骤S303中，电子设备在本地缓存中进行查询，得到该第一页面的目标资源。

其中，该本地缓存中可以是将电子设备本地的物理内存划分出来的一部分空间，用于对进行缓存。该本地缓存可以根据资源标识存储资源，也即是，采用资源标识为索引，根据资源标识可以查询本地缓存中是否存储有对应的资源。

电子设备可以根据该第一页面对应的资源文件，确定该第一页面的目标资源的资源标识，根据该目标资源的资源标识，在该本地缓存中进行查询，如果本地缓存中存储有该目标资源，则电子设备根据该目标资源的资源标识可以查询到对应的目标资源。

其中，第一页面的资源文件可以通过对第一页面的HTML5文件进行解析，根据解析结果生成该资源文件，第一页面的资源文件中可以包括该第一页面的各个资源的资源标识。第一页面的目标资源的数量可以为一个，也可以为多个，如果为多个，则电子设备根据该第一页面对应的资源文件，可以确定多个目标资源的资源标识，然后依次根据该多个目标资源的资源标识，在本地缓存中进行查询，得到多个目标资源。

在步骤S304中，电子设备将该第一页面中显示的该占位资源替换为该目标资源。

电子设备从本地缓存中查询到第一页面的目标资源后，可以使用该目标资源，替换第一页面中当前显示的占位资源。通过在电子设备未获取到待显示的目标资源之前，优先显示默认的占位资源，可以避免页面上出现空白，提供更好的用户体验。

步骤S303是以本地缓存中存储有第一页面的目标资源为例进行说明，在一些可能实施例中，本地缓存中可能未存储有第一页面的目标资源，相应地，在一种可能实现方式中，本申请实施例提供的页面显示方法还可以包括：响应于该本地缓存中未存储该第一页面的目标资源，向服务器发送资源获取请求，该资源获取请求用于请求获取该第一页面的目标资源；接收该服务器基于该资源获取请求返回的该第一页面的目标资源；将该第一页面的目标资源存储到该本地缓存中。

如果电子设备在本地缓存中未查询到第一页面的目标资源，则电子设备可以向服务器发送资源获取请求，该资源获取请求中可以携带该目标资源的资源标识，服务器在接收到该资源获取请求后，可以根据该目标资源的资源标识，从资源数据库中获取到该目标资源，作为对该资源获取请求的响应，将该目标资源返回给电子设备。在一些可能实施例中，电子设备在本地缓存中未查询到第一页面的目标资源时，可以将该目标资源的请求(下载)任务添加到请求队列，该请求队列中可以包括多个请求任务，电子设备可以依次执行该请求队列中的请求任务，直至执行用于获取该第一页面的目标资源的请求任务时，向服务器发送资源获取请求。电子设备在请求到第一页面的目标资源后，可以将该目标资源存储到本地缓存中。同时，电子设备还可以使用当前请求到的目标资源替换第一页面中当前显示的占位资源。

在一种可能实现方式中，电子设备将第一页面的目标资源存储到本地缓存中，包括：响应于该第一页面的目标资源的尺寸大于尺寸阈值，对该第一页面的目标资源进行压缩，得到压缩后的该目标资源，该压缩后的该目标资源的尺寸小于或等于该尺寸阈值；将该压缩后的该目标资源存储到该本地缓存中。

如果电子设备请求到的第一页面的目标资源超过规定的最大尺寸，也即是尺寸阈值，则电子设备可以对该目标资源进行压缩处理，使得该目标资源的尺寸不超过尺寸阈值后，存储到本地缓存中。通过对大尺寸资源进行压缩，使得下一次读取更快，从而提升显示速度。

在一种可能实现方式中，电子设备获取该第一页面的目标资源存储到本地缓存中之后，本申请实施例提供的页面显示方法还包括：响应于该本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从该本地缓存中删除访问次数小于目标次数的资源。

电子设备在每次将资源存储到本地缓存中后，可以检测一下本地缓存的已缓存量是否超过缓存量阈值，如果超过，则根据该电子设备的历史访问数据，统计对本地缓存中各个资源的访问次数，删除本地缓存中访问次数小于目标次数的资源。通过在已缓存资源超出约定缓存大小后，将最少访问的资源剔除，可以释放一定的缓存空间。

在步骤S305中，电子设备根据当前显示的第一页面，确定第二页面，该第二页面为该第一页面的子页面。

电子设备在显示第一页面时，可以确定第一页面的子页面，也即是，第一页面可以跳转到的页面，第一页面的子页面是接下来用户可能访问的页面。第一页面如果对应有子页面，则该第一页面中可以包括该子页面的链接，对于H5页面，H5页面中的链接可以称为a链接。

在一种可能实现方式中，电子设备根据当前显示的第一页面，确定第二页面，包括：扫描该第一页面中的链接；根据该扫描到的链接的目标属性，确定该第二页面，该目标属性用于指示该链接对应的页面。其中，该目标属性可以是href(锚)属性。

电子设备可以扫描第一页面中的链接，确定该链接的目标属性的值，将该目标属性的值所代表的页面确定为第一页面待跳转到的第二页面。例如，该链接的目标属性可以表示为：<a href＝"xxx"></a>，其中，"xxx"所代表的页面即为第二页面，也即是用户接下来可能访问的页面。通过扫描当前显示的页面中的链接，确定接下来用户可能访问的第二页面，从而可以预先对第二页面的资源进行缓存。这样用户真的访问这个页面时，其资源都已经被提前缓存好，可以提升页面的显示速度，优化用户体验。

在步骤S306中，电子设备获取该第二页面的目标资源存储到本地缓存中。

第二页面的目标资源与第一页面的目标资源的资源类型可以相同，如都为图片。电子设备在确定第二页面后，可以获取该第二页面的目标资源，将其预先存储到本地缓存中。

在一种可能实现方式中，电子设备获取该第二页面的目标资源存储到本地缓存中，包括：根据该第二页面和该本地缓存，确定该目标资源，该目标资源为该本地缓存中未存储的该第二页面的资源；向服务器发送资源获取请求，该资源获取请求用于请求获取该目标资源；接收该服务器基于该资源获取请求返回的该目标资源；将该目标资源存储到该本地缓存中。

第二页面可以包括多个资源，有些资源可能已经存储在本地缓存中了，有些资源可能未存储在本地缓存中，电子设备可以确定未存储在本地缓存中的这部分资源为第二页面的目标资源，从而通过向服务器发送资源获取请求的方式，请求该目标资源，成功请求到该目标资源后，可以将该目标资源存储到本地缓存中。通过请求本地缓存中没有的目标资源，将其预先存储到本地缓存中，使得后续在需要加载该资源时，可以直接从本地缓存中获取到，从而提高加载速度。

在一种可能实现方式中，电子设备根据该第二页面和该本地缓存，确定该目标资源，包括：根据该第二页面对应的资源文件，确定该第二页面的至少一个资源的资源标识；根据该至少一个资源的资源标识，在该本地缓存中进行查询，该本地缓存用于根据资源标识存储资源；响应于该本地缓存中未存储有该至少一个资源中的任一资源，将该任一资源确定为该目标资源。通过根据第二页面上的各个资源的资源标识，确定本地缓存中没有的目标资源，从而请求目标资源，相比于请求第二页面的所有资源，可以节省流量。

其中，第二页面的资源文件可以通过对第二页面的HTML5文件进行解析，根据解析结果生成该资源文件，第二页面的资源文件中可以包括该第二页面的各个资源的资源标识。电子设备可以根据该第二页面对应的资源文件中所有资源的资源标识，在该本地缓存中进行查询，以确定本地缓存中是否存储有这些资源，如果根据任一资源标识未查询到对应的资源，则可以确定本地缓存中未存储有该资源，因而将该资源确定为待向服务器请求获取的目标资源。

第二页面的目标资源的数量可以为一个，也可以为多个，如果为多个，则电子设备可以获取该第二页面的多个目标资源存储到本地缓存中。

在一种可能实现方式中，电子设备获取第二页面的目标资源存储到本地缓存中，包括：响应于该第二页面的目标资源的尺寸大于尺寸阈值，对该第二页面的目标资源进行压缩，得到压缩后的该目标资源，该压缩后的该目标资源的尺寸小于或等于该尺寸阈值；将该压缩后的该目标资源存储到该本地缓存中。

电子设备对第二页面的目标资源进行压缩的过程与步骤S304中电子设备对第一页面的目标资源进行压缩的过程同理，此处不再赘述。

在一种可能实现方式中，电子设备获取该第二页面的目标资源存储到本地缓存中之后，该方法还包括：响应于该本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从该本地缓存中删除访问次数小于目标次数的资源。

电子设备根据历史访问数据删除资源的过程在步骤S304中已有说明，此处不再赘述。

在步骤S307中，电子设备响应于该第二页面的加载请求，拦截该第二页面的资源获取请求，该资源获取请求用于向服务器请求获取该第二页面的目标资源。

电子设备在显示第一页面的过程中，用户可以点击该第一页面中的链接，也即是，该第二页面的入口，触发对第二页面的加载请求，该加载请求用于请求加载第二页面的目标资源。电子设备在接收到该加载请求后，可以加载第二页面，在加载第二页面时可以拦截该第二页面中的所有资源获取请求，具体拦截过程与步骤S301中电子设备拦截第一页面的资源获取请求同理，此处不再赘述。

在一种可能实现方式中，第二页面的数量为至少一个，也即是，步骤S305可以确定一个或多个第二页面。相应地，电子设备根据当前显示的第一页面，确定第二页面之后，本申请实施例提供的方法还包括：依次获取至少一个该第二页面的目标资源存储到该本地缓存中；响应于任一该第二页面的加载请求，停止依次获取目标资源存储到该本地缓存中的过程。

电子设备在确定至少一个第二页面后，可以对针对该至少一个第二页面，依次执行步骤306，在该过程中，一旦用户点击了第一页面中的某个第二页面，触发了对该第二页面的加载请求，则电子设备可以执行该步骤307，而不再继续对下一个第二页面，执行步骤306。通过在用户点击第一页面的任一子页面后，不再继续获取其他子页面的目标资源进行缓存，可以减少不必要的资源缓存带来的流量消耗。

在步骤S308中，电子设备在该第二页面中显示占位资源，该占位资源与第二页面的目标资源的资源类型相同。

电子设备在接收到第二页面的加载请求后，可以先显示第二页面，在第二页面中显示占位资源，以表明此位置是待显示目标资源的位置。等到电子设备获取到第二页面的目标资源后，再替换该占位资源。第二页面中显示的占位资源与第一页面中显示的占位资源可以相同，也可以不同。

在步骤S309中，电子设备在该本地缓存中进行查询，得到该第二页面的该目标资源。

电子设备可以根据第二页面的目标资源的资源标识，在该本地缓存中进行查询，如果本地缓存中存储有第二页面的目标资源，则电子设备可以查询到该第二页面的目标资源。

在步骤S310中，电子设备将该第二页面中显示的该占位资源替换为该目标资源。

电子设备从本地缓存中查询到第二页面的目标资源后，可以使用该目标资源，替换第二页面中当前显示的占位资源。通过在电子设备未获取到待显示的目标资源之前，优先显示默认的占位资源，可以避免页面上出现空白，提供更好的用户体验。

本公开实施例提供的上述技术方案，资源(如图片)的请求次数变少，减少了用户的流量消耗，资源从本地读取缓存,显示速度更快。可以解决混合模式中客户端请求网页资源造成的消耗流量和加载慢的问题。混合模式指的是应用的页面采用的是基于HTML5开发的web网页，可以使不同操作系统使用一套代码。

本公开实施例提供的方法，通过在显示当前页面时，确定当前页面的子页面，预先获取该子页面的目标资源存储到本地缓存中，由于当前页面的子页面是用户接下来可能访问的页面，提前缓存该页面的目标资源，使得在需要加载该页面时，优先显示默认的占位资源，可以避免页面上出现空白，无需从服务器请求目标资源，而是直接从本地缓存中查询到该目标资源后，及时将占位资源替换为目标资源在页面中进行显示，可以减少流量的消耗，提升页面的显示速度。

图4是根据一示例性实施例示出的一种页面显示装置的框图。参照图2，该装置包括确定单元401，获取单元402，存储单元403，显示单元404和查询单元405。

确定单元401被配置为执行根据当前显示的第一页面，确定第二页面，该第二页面为该第一页面的子页面；

获取单元402被配置为执行获取该第二页面的目标资源；

存储单元403被配置为执行将该第二页面的目标资源存储到本地缓存中；

显示单元404，被配置为执行响应于该第二页面的加载请求，在该第二页面中显示占位资源，该占位资源与该目标资源的资源类型相同；

查询单元405被配置为执行在该本地缓存中进行查询，得到该第二页面的该目标资源；

显示单元404还被配置为执行将该第二页面中显示的该占位资源替换为该目标资源。

在一种可能实现方式中，获取单元402被配置为执行：

根据该第二页面和该本地缓存，确定该目标资源，该目标资源为该本地缓存中未存储的该第二页面的资源；

向服务器发送资源获取请求，该资源获取请求用于请求获取该目标资源；

接收该服务器基于该资源获取请求返回的该目标资源；

将该目标资源存储到该本地缓存中。

在一种可能实现方式中，获取单元402被配置为执行：

根据该第二页面对应的资源文件，确定该第二页面的至少一个资源的资源标识；

根据该至少一个资源的资源标识，在该本地缓存中进行查询，该本地缓存用于根据资源标识存储资源；

响应于该本地缓存中未存储有该至少一个资源中的任一资源，将该任一资源确定为该目标资源。

在一种可能实现方式中，该第二页面的数量为至少一个，该存储单元403还被配置为执行依次获取至少一个该第二页面的目标资源存储到该本地缓存中；响应于任一该第二页面的加载请求，停止依次获取目标资源存储到该本地缓存中的过程。

在一种可能实现方式中，该获取单元402被配置为执行：

响应于该第二页面的目标资源的尺寸大于尺寸阈值，对该第二页面的目标资源进行压缩，得到压缩后的该目标资源，该压缩后的该目标资源的尺寸小于或等于该尺寸阈值；

将该压缩后的该目标资源存储到该本地缓存中。

在一种可能实现方式中，该页面显示装置还包括：

删除单元，被配置为执行响应于该本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从该本地缓存中删除访问次数小于目标次数的资源。

在一种可能实现方式中，该查询单元405被配置为执行：

响应于该第二页面的加载请求，拦截该第二页面的资源获取请求，该资源获取请求用于向服务器请求获取该第二页面的目标资源。

在该第二页面中显示该占位资源。

在一种可能实现方式中，该确定单元401被配置为执行：

扫描该第一页面中的链接；

根据扫描到的链接的目标属性，确定该第二页面，该目标属性用于指示链接对应的页面。

在一种可能实现方式中，该查询单元405还被配置为执行：

响应于该第一页面的加载请求，在该第一页面中显示占位资源；

在该本地缓存中进行查询，得到该第一页面的目标资源；

将该第一页面中显示的占位资源替换为该第一页面的目标资源。

在一种可能实现方式中，该页面显示装置还包括：

发送单元，被配置为执行响应于该本地缓存中未存储该第一页面的目标资源，向服务器发送资源获取请求，该资源获取请求用于请求获取该第一页面的目标资源；

接收单元，被配置为执行接收该服务器基于该资源获取请求返回的该第一页面的目标资源；

该存储单元403还被配置为将该第一页面的目标资源存储到该本地缓存中。

本公开实施例中，通过在显示当前页面时，确定当前页面的子页面，预先获取该子页面的目标资源存储到本地缓存中，由于当前页面的子页面是用户接下来可能访问的页面，提前缓存该页面的目标资源，使得在需要加载该页面时，优先显示默认的占位资源，可以避免页面上出现空白，无需从服务器请求目标资源，而是直接从本地缓存中查询到该目标资源后，及时将占位资源替换为目标资源在页面中进行显示，可以减少流量的消耗，提升页面的显示速度。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

上述实施例中的电子设备可以是终端。

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

通常，终端500包括有：一个或多个处理器501和一个或多个存储器502。

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

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

在一些实施例中，终端500还可选包括有：外围设备接口503和至少一个外围设备。处理器501、存储器502和外围设备接口503之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口503相连。具体地，外围设备包括：射频电路504、显示屏505、摄像头组件506、音频电路507、定位组件508和电源509中的至少一种。

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

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

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

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

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

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

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

在一些实施例中，终端500还包括有一个或多个传感器510。该一个或多个传感器510包括但不限于：加速度传感器511、陀螺仪传感器512、压力传感器513、指纹传感器514、光学传感器515以及接近传感器516。

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

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

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

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

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

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

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

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由电子设备的处理器执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，该非临时性计算机可读存储介质可以是ROM(Read-OnlyMemory,ROM，只读内存)、RAM(Random Access Memory，随机存取存储器)、CD-ROM(CompactDisc Read-Only Memory，只读光盘)、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品，该计算机程序产品中的指令可由电子设备的处理器执行以完成上述方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

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

根据当前显示的第一页面，确定第二页面，所述第二页面为所述第一页面的子页面；

获取所述第二页面的目标资源存储到本地缓存中；

响应于所述第二页面的加载请求，在所述第二页面中显示占位资源，所述占位资源与所述目标资源的资源类型相同；

在所述本地缓存中进行查询，得到所述第二页面的所述目标资源；

将所述第二页面中显示的所述占位资源替换为所述目标资源。

2.根据权利要求1所述的页面显示方法，其特征在于，所述获取所述第二页面的目标资源存储到本地缓存中，包括：

根据所述第二页面和所述本地缓存，确定所述目标资源，所述目标资源为所述本地缓存中未存储的所述第二页面的资源；

向服务器发送资源获取请求，所述资源获取请求用于请求获取所述目标资源；

接收所述服务器基于所述资源获取请求返回的所述目标资源；

将所述目标资源存储到所述本地缓存中。

3.根据权利要求1所述的页面显示方法，其特征在于，所述第二页面的数量为至少一个，所述根据当前显示的第一页面，确定第二页面之后，所述页面显示方法还包括：

依次获取至少一个所述第二页面的目标资源存储到所述本地缓存中；

响应于任一所述第二页面的加载请求，停止依次获取目标资源存储到所述本地缓存中的过程。

4.根据权利要求1所述的页面显示方法，其特征在于，所述获取所述第二页面的目标资源存储到本地缓存中，包括：

响应于所述第二页面的目标资源的尺寸大于尺寸阈值，对所述第二页面的目标资源进行压缩，得到压缩后的所述目标资源，所述压缩后的所述目标资源的尺寸小于或等于所述尺寸阈值；

将所述压缩后的所述目标资源存储到所述本地缓存中。

5.根据权利要求1所述的页面显示方法，其特征在于，所述获取所述第二页面的目标资源存储到本地缓存中之后，所述页面显示方法还包括：

响应于所述本地缓存的已缓存量大于缓存量阈值，根据历史访问数据，从所述本地缓存中删除访问次数小于目标次数的资源。

6.根据权利要求1所述的页面显示方法，其特征在于，所述根据当前显示的第一页面，确定第二页面，包括：

扫描所述第一页面中的链接；

根据扫描到的链接的目标属性，确定所述第二页面，所述目标属性用于指示链接对应的页面。

7.根据权利要求1所述的页面显示方法，其特征在于，所述根据当前显示的第一页面，确定第二页面之前，所述页面显示方法还包括：

响应于所述第一页面的加载请求，在所述第一页面中显示占位资源；

在所述本地缓存中进行查询，得到所述第一页面的目标资源；

将所述第一页面中显示的占位资源替换为所述第一页面的目标资源。

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

确定单元，被配置为执行根据当前显示的第一页面，确定第二页面，所述第二页面为所述第一页面的子页面；

获取单元，被配置为执行获取所述第二页面的目标资源；

存储单元，被配置为执行将所述第二页面的目标资源存储到本地缓存中；

显示单元，被配置为执行响应于所述第二页面的加载请求，在所述第二页面中显示占位资源，所述占位资源与所述目标资源的资源类型相同；

查询单元，被配置为执行在所述本地缓存中进行查询，得到所述第二页面的所述目标资源；

所述显示单元还被配置为执行将所述第二页面中显示的所述占位资源替换为所述目标资源。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

用于存储所述一个或多个处理器可执行指令的一个或多个存储器；

其中，所述一个或多个处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的页面显示方法。

10.一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至7中任一项所述的页面显示方法。

Images