页面加载方法及相关设备、系统与流程

本申请涉及网络技术领域，尤其涉及一种页面加载方法及相关设备、系统。

背景技术：

随着移动通信技术的发展及手机、平板电脑等电子设备的普及，应用于电子设备的应用程序，即客户端，也越来越多，如各类购物网站提供的手机客户端。这些客户端运行时，可以与相应的服务端之间进行通信，从而将服务端提供的产品信息按照一定的布局渲染为相应的展示页面，使得用户可以通过电子设备随时随地获知上述产品信息。

由于产品信息包含大量的图文数据，直接一次性加载全部信息所需时间较多；而且，由于电子设备的屏幕大小也有限，不可能同时展示所有产品信息，故客户端一般将产品信息分布在多个页面进行展示，这些页面可分为基本信息展示页面和详情信息展示页面两类；其中，基本信息展示页面用于展示产品名称、价格、预览图等基本信息，通常为只占据一个页面并优先展示；详情信息展示页面用于展示产品细节图、性能描述文本等详细信息，且展示优先级低于基本信息展示页面。有鉴于此，现有客户端在接收到用户的产品信息访问请求后，先只渲染并展示上述基本信息展示页面，当再次接收到用户的详情信息访问请求后，才向服务端获取相应的详情信息，并对其渲染得到详情信息展示页面。这样，如果用户根据基本信息展示页面中的信息判定对产品不感兴趣，则不需要客户端加载详情信息展示页面，既可以节省网络流量，又可以减少用户等待页面加载的时间。

但是由于产品详细信息的数据量仍然很大，如果用户对产品感兴趣，则需要客户端仍需要一定的时间加载详细信息展示页面，特别是在传输速度较慢、响应时间较长的弱网(如WiFi、2G、3G等)条件下，加载时间会更长，导致由基本信息展示页面切换至详情信息展示页面所需的间隔时间较长，进而影响用户体验效果。

技术实现要素：

为克服相关技术中存在的问题，本申请提供一种页面加载方法及相关设备、系统。

本申请第一方面提供一种页面加载方法；该方法包括：

客户端在接收到用户的产品信息访问请求后，分别向服务端发送对目标产品的基本信息获取请求和预加载请求；

所述服务端根据所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端，并根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端返回预加载确认响应；

所述客户端对所述基本信息执行渲染操作，得到目标产品的基本信息展示页面，并在接收到所述预加载确认响应后，向所述服务端发送对目标产品的详情信息获取请求；

所述服务端根据所述详情信息获取请求提取相应的详情信息并发送至所述客户端；

所述客户端存储所述详情信息，并在接收到用户的详情信息访问请求后，读取存储的所述详情信息并执行渲染操作，得到目标产品的详情信息展示页面。

结合第一方面，在第一方面的第一种可行的实施方式中，所述服务端根据所述预加载请求判断是否需要对目标产品执行预加载操作，包括：

所述服务端根据用户偏好信息判断目标产品是否为所述用户的偏好产品，如果是，则判定需要对目标产品执行预加载操作。

结合第一方面，或者第一方面的第一种可行的实施方式，在第一方面的第二种可行的实施方式中，所述服务端根据所述详情信息获取请求提取相应的详情信息并发送至所述客户端，包括：

所述服务端在所述详情信息获取请求的触发下，按照页面展示顺序逐个提取并发送各个详情信息展示页面所需的单页详情信息。

结合第一方面的第二种可行的实施方式，在第一方面的第三种可行的实施方式中，该方法还包括：

在对所述客户端本地存储的单页详情信息执行渲染操作后，所述客户端向所述服务端发送下一页详情信息获取请求，并存储所述服务端返回的下一页详情信息。

本申请第二方面提供一种页面加载系统；该系统包括：服务端设备和客户端设备；

所述客户端设备包括：请求编辑单元、第一渲染单元、预加载存储单元和第二渲染单元；

其中，所述请求编辑单元用于，在接收到用户的产品信息访问请求后，分别向服务端设备发送对目标产品的基本信息获取请求和预加载请求，以及在接收到所述服务端设备反馈的预加载确认响应后，向所述服务端设备发送对目标产品的详情信息获取请求；

所述第一渲染单元用于，对所述服务端设备反馈的基本信息执行渲染操作，得到的基本信息展示页面；

所述预加载存储单元用于，存储所述服务端设备根据所述详情信息获取请求反馈的 详情信息；

所述第二渲染单元用于，在接收到用户的详情信息访问请求后，读取所述预加载存储单元中存储的所述详情信息并执行渲染操作，得到的详情信息展示页面；

所述服务端设备包括：第一响应单元、预加载判断单元和第二响应单元；

其中，所述第一响应单元用于，根据所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端设备；

所述预加载判断单元用于，根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端设备发送预加载确认响应；

所述第二响应单元用于，根据所述详情信息获取请求提取目标产品的详情信息并发送至所述客户端设备。

结合第二方面，在第二方面的第一种可行的实施方式中，所述预加载判断单元包括：偏好判断单元；

所述偏好判断单元用于，根据用户偏好信息判断目标产品是否为所述用户的偏好产品，如果是，则判定需要对目标产品执行预加载操作。

结合第二方面，或者第二方面的第一种可行的实施方式，在第二方面的第二种可行的实施方式中，所述第二响应单元包括：单页信息响应单元；

所述单页信息响应单元用于，在所述详情信息获取请求的触发下，按照页面展示顺序逐个提取并发送各个详情信息展示页面所需的单页详情信息。

结合第二方面，或者第二方面的第一种可行的实施方式，在第二方面的第三种可行的实施方式中，所述客户端设备还包括：单页信息请求单元；

所述单页信息请求单元用于，在对所述预加载存储单元存储的单页详情信息执行渲染操作后，向所述服务端发送下一页详情信息获取请求。

本申请第三方面提供一种客户端设备；该客户端设备应用于页面加载系统，包括：请求编辑单元、第一渲染单元、预加载存储单元和第二渲染单元；

所述请求编辑单元用于，在接收到用户的产品信息访问请求后，分别向所述页面加载系统的服务端设备发送对目标产品的基本信息获取请求和预加载请求，以及在接收到所述服务端设备反馈的预加载确认响应后，向所述服务端设备发送对目标产品的详情信息获取请求；

所述第一渲染单元用于，对所述服务端设备反馈的基本信息执行渲染操作，得到的基本信息展示页面；

所述预加载存储单元用于，存储所述服务端设备根据所述详情信息获取请求反馈的详情信息；

所述第二渲染单元用于，在接收到用户的详情信息访问请求后，读取所述预加载存储单元中存储的所述详情信息并执行渲染操作，得到的详情信息展示页面。

本申请第四方面提供一种服务端设备，该服务端设备应用于页面加载系统，包括：第一响应单元、预加载判断单元和第二响应单元；

所述第一响应单元用于，根据所述基本信息获取请求提取目标产品的基本信息并发送至所述页面加载系统的客户端设备；

所述预加载判断单元用于，根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端设备发送预加载确认响应；

所述第二响应单元用于，根据所述详情信息获取请求提取目标产品的详情信息并发送至所述客户端设备。

由以上技术方案可知，本申请实施例在客户端向服务端获取目标产品的基本信息进而渲染得到目标产品的基本信息展示页面的同时，向服务端请求对目标产品的详情信息进行预加载，如果确认需要执行预加载操作，则向服务端获取目标产品的详情信息并存储在客户端本地，从而在接收到用户的详情信息访问请求后，可直接从本地读取该详情信息，渲染得到目标产品的详情信息展示页面；相对于现有技术中在收到上述详情信息访问请求后才向服务端获取详情信息，本申请实施例可以提高页面加载速度，特别是在弱网环境下，可以大大减少用户等待时间，提高用户体验好感度。

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

附图说明

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

图1是本申请实施例提供的一种页面加载方法的信号流图。

图2是本申请实施例提供的一种页面加载方法中客户端执行的方法流程图。

图3是本申请实施例提供的一种页面加载方法中服务端执行的方法流程图。

图4是本申请实施例提供的页面加载方法中产品详情信息预加载及展示方法的信号流图。

图5是本申请实施例提供的一种页面加载系统的结构框图。

图6是本申请实施例提供的一种客户端设备的结构框图。

图7是本申请实施例提供的一种客户端设备的结构框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

图1为本申请实施例提供的一种页面加载方法的信号流图。如图1所示，该方法中客户端在接收到用户对目标产品的产品信息访问请求时，和服务端分别执行两种信息交互，实现对目标产品的产品信息的加载展示，具体包括以下步骤。

一方面，客户端和服务端通过如下步骤实现对目标产品的基本信息展示页面的加载及展示：

S11a、客户端在接收到用户的产品信息访问请求后，向服务端发送对目标产品的基本信息获取请求。

S12a、服务端根据所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端。

S13a、客户端对所述服务端返回的基本信息执行渲染操作，得到目标产品的基本信息展示页面。

另一方面，客户端和服务端通过如下步骤实现对目标产品的详细信息展示页面的加载及展示：

S11b、客户端在接收到用户的产品信息访问请求后，服务端发送对目标产品的预加载请求。

S12b、服务端根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端返回预加载确认响应。

在本申请一个可行的实施方式中，如果服务端判断不需要对目标产品的详情信息进行预加载，则可以不向客户端返回响应；在本申请另一个可行的实施例中，如果服务端判断不需要对目标产品的详情信息进行预加载，也可以向客户端返回预加载禁止响应。

S13b、客户端在接收到所述预加载确认响应后，向所述服务端发送对目标产品的详情信息获取请求。

S14b、服务端根据所述详情信息获取请求提取相应的详情信息并发送至所述客户 端。

S15b、客户端存储来自服务端的所述详情信息。

进一步的，客户端在接收到用户的详情信息访问请求后，通过执行如下步骤实现对目标产品的详情信息的展示。

S16、客户端在接收到用户的详情信息访问请求后，读取本地存储的所述详情信息并执行渲染操作，得到目标产品的详情信息展示页面。

由上述步骤可知，本申请实施例提供的页面加载方法在客户端向服务端获取目标产品的基本信息进而渲染得到目标产品的基本信息展示页面的同时，向服务端请求对目标产品的详情信息进行预加载，如果确认需要执行预加载操作，则向服务端获取目标产品的详情信息并存储在客户端本地，从而在接收到用户的详情信息访问请求后，可直接从本地读取该详情信息，渲染得到目标产品的详情信息展示页面；相对于现有技术中在收到上述详情信息访问请求后才向服务端获取详情信息，本申请实施例可以提高页面加载速度，特别是在弱网环境下，可以大大减少用户等待时间，提高用户体验好感度。

上文及图1展示了本实施例提供的页面加载方法中客户端和服务端的交互过程，图2和图3分别从客户端和服务端的角度示出了本实施例提供的页面加载方法所执行的步骤。

参照图2，本申请实施例提供的页面加载方法中客户端完成如下步骤：

S21、在接收到用户的产品信息访问请求后，分别向服务端发送对目标产品的基本信息获取请求和预加载请求；

S22、对所述服务端根据所述基本信息获取请求反馈的基本信息执行渲染操作，得到的基本信息展示页面；

S23、在接收到服务端根据所述预加载请求反馈的预加载确认响应后，向所述服务端发送对目标产品的详情信息获取请求；

S24、存储所述服务端根据所述详情信息获取请求反馈的详情信息；

S25、在接收到用户的详情信息访问请求后，读取本地存储的所述详情信息并执行渲染操作，得到的详情信息展示页面。

其中，如果客户端本地没有存储详情信息，即没有执行预加载操作，则客户端可以在接收到用户的详情信息访问请求后，即时向服务端发送详情信息获取请求。

另外，本申请实施例还提供了一种计算机存储介质，例如可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等；该计算机存储介质中存储有程 序，当所述存储介质中的程序由客户端设备的处理器执行时，使得客户端设备能够执行上述图2所示流程中的部分或全部步骤，实现对产品信息展示页面的加载。

参照图3，本申请实施例提供的页面加载方法中服务端完成如下步骤：

S31、根据客户端发送的所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端；

S32、根据客户端发送的所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端设备发送预加载确认响应；

S33、根据客户端发送的所述详情信息获取请求提取目标产品的详情信息并发送至所述客户端设备。

其中，服务端接收到的详情信息获取请求，既可以为客户端在接收到预加载确认响应后向服务端发送的详情信息获取请求，也可以为客户端在接收到用户的详情信息访问请求后发送的详情信息获取请求。

另外，本申请实施例还提供了一种计算机存储介质，例如可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等；该计算机存储介质中存储有程序，当所述存储介质中的程序由服务端设备的处理器执行时，使得服务端设备能够执行上述图3所示流程中的部分或全部步骤，实现产品信息展示页面在客户端设备上的加载。

另外，为减少客户端消耗的网络流量，特别是在按流量计费的网络(如2G、3G等移动运营商网络)下尽量减少用户的上网费用，对于用户兴趣度较低(也即用户访问其详详情信息的可能性较低)的产品，可以不执行预加载操作，而只对用户兴趣度高的产品进行预加载，因此，本申请实施例通过服务端判断是否需要对目标产品的详情信息进行预加载；如果不需要预加载，则客户端不会接收到预加载确认响应，上述步骤S13b、S14b和S15b也不会被执行，即客户端不会预先存储目标产品的详情信息。基于此情况，一种大概率的后续情形为：用户因对目标产品不感兴趣而不向客户端发送详情信息访问请求，则不会触发客户端向服务端获取目标产品的详情信息，从而达到了节省网络流量的目的；另一种小概率的后续情形为：虽然为非偏好产品，但用户仍请求访问目标产品的详情信息，则在接收到用户的详情信息访问请求后，由于无法在本地存储单元中找到目标产品的详情信息，故客户端可以依照现有技术，即时向服务端发送请求，以获取目标产品的详情信息。

本申请实施例中，为节省网络流量，仅对用户的偏好产品进行预加载；有鉴于此，客户端发送的预加载请求中可以包括当前用户的身份标识码(ID)和目标产品的ID；相应的，服务端可以根据用户偏好信息，判断目标产品的ID是否为所述用户ID对应的偏好产品ID，如果是，则判定需要对目标产品执行预加载操作；其中，上述偏好信息用于 记录各个用户ID对应的偏好产品ID。

在本申请一个可行的实施例中，服务端可以通过如下方法得到所述偏好信息：服务端根据用户访问记录分析各个用户对各类型产品的浏览次数、购买次数等，进而确定每个用户对各类型产品的兴趣度高低(浏览次数、购买次数越多，兴趣度越高)，选择兴趣度最高的一种或几种产品作为对应用户的偏好产品，存储选择出的产品ID与对应的用户ID，即得到所述偏好信息。

在本申请另一个可行的实施例中，还可以由用户直接设置自己的偏好产品，并将设置结果(即上述偏好信息)存储于服务端。

鉴于产品的详情信息数据量较多，故本申请实施例在对目标产品执行预加载操作时，以页面为单位，即客户端每次只向服务端端获取并缓存一个详情信息展示页面的详情信息，待该详情信息被渲染为对应的展示页面后，再向服务端请求下一个页面的详情数据。具体参照图4所示的本申请实施例提供的页面加载方法中产品详情信息预加载及展示方法的信号流图：

在步骤S43中，客户端接收到预加载确认响应后，向服务端发送第一页详情信息获取请求；

在步骤S44中，服务端根据所述第一页详情信息获取请求，提取用于展示在第一个详细信息展示页面的第一页详情信息，并将其发送至客户端；

在步骤S45中，客户端存储所述第一页详情信息，并在接收到用户的详情信息访问请求后，读取本地存储的所述第一详情信息，渲染得到目标产品的第一个详情信息展示页面；

在步骤S46中，客户端删除本地存储的第一页详情信息，并向服务端发送第二页详情信息获取请求；

在步骤S47中，服务端根据所述第二页详情信息获取请求，提取用于展示在第二个详细信息展示页面的第二页详情信息，并将其发送至客户端；

在步骤S48中，客户端存储所述第二页详情信息，并在检测到用户访问至第二个详细信息展示页面时，读取本地缓存的所述第二详情信息，渲染得到目标产品的第二个详情信息展示页面；

在步骤S49中，客户端删除本地存储的第二页详情信息，并向服务端发送第三页详情信息获取请求；依此类推，本申请实施例通过客户端和服务端的多次交互，实现对产品详情信息的预加载。

由以上步骤可知，本申请实施例只预加载当前页面的下一个页面的详情信息，既可 以达到减少用户等待时间的目的，且相对于一次性预加载全部详情信息，本实施例可以避免因用户提前结束访问详情信息导致的网络流量浪费；另外，本实施例在加载下一页详情信息前，先删除客户端现存的详情信息，可以节省客户端本地的存储空间。

图5为本申请实施例提供的一种页面加载系统的结构框图。参照图5，该系统包括：客户端设备100和服务端设备200。

其中，客户端设备100包括：请求编辑单元110、第一渲染单元120、预加载存储单元130和第二渲染单元140。

该请求编辑单元110被配置为，在接收到用户的产品信息访问请求后，分别向服务端设备发送对目标产品的基本信息获取请求和预加载请求，以及在接收到所述服务端设备反馈的预加载确认响应后，向所述服务端设备发送对目标产品的详情信息获取请求。

该第一渲染单元120被配置为，对所述服务端设备反馈的基本信息执行渲染操作，并展示渲染得到的基本信息展示页面。

该预加载存储单元130被配置为，存储所述服务端设备根据所述详情信息获取请求反馈的详情信息。

该第二渲染单元140被配置为，在接收到用户的详情信息访问请求后，读取所述预加载存储单元中存储的所述详情信息并执行渲染操作，得到的详情信息展示页面。

服务端设备200包括：第一响应单元210、预加载判断单元220和第二响应单元230。

该第一响应单元210被配置为，根据所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端设备。

该预加载判断单元220被配置为，根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端设备发送预加载确认响应。

该第二响应单元230被配置为，根据所述详情信息获取请求提取目标产品的详情信息并发送至所述客户端设备。

由以上技术方案可知，本申请实施例在客户端设备向服务端设备获取目标产品的基本信息进而渲染得到目标产品的基本信息展示页面的同时，还向服务端设备请求对目标产品的详情信息进行预加载，如果服务端设备确认需要执行预加载操作，则客户端设备继续向服务端设备获取目标产品的详情信息并存储在客户端设备本地，从而在接收到用户的详情信息访问请求后，客户端设备可直接从本地读取该详情信息，渲染得到目标产品的详情信息展示页面；相对于现有技术中在收到上述详情信息访问请求后才向服务端设备获取详情信息，本申请实施例可以提高页面加载速度，特别是在弱网环境下，可以大大减少用户等待时间，提高用户体验好感度。

在本申请一个可行的实施例中，上述预加载判断单元220可以包括：偏好判断单元；该偏好判断单元被配置为，根据用户偏好信息判断目标产品是否为所述用户的偏好产品，如果是，则判定需要对目标产品执行预加载操作。其中，上述偏好信息可以有服务端设备根据用户浏览记录分析得到，也可以直接由各个用户自行设置。

在本申请另一个可行的实施例中，上述第二响应单元230可以包括单页信息响应单元；该单页信息响应单元被配置为，在所述详情信息获取请求的触发下，按照页面展示顺序逐个提取并发送各个详情信息展示页面所需的单页详情信息。

基于上述单页信息响应单元，客户端设备100还包括单页信息请求单元；该单元信息请求单元被配置为，在对所述预加载存储单元存储的单页详情信息执行渲染操作后，向所述服务端发送下一页详情信息获取请求。

具体的，在请求编辑单元向服务端设备发送详情信息获取请求后，上述单页信息响应单元被触发，提取目标产品的第一个详情信息展示页面所需的第一页详情信息，并反馈至客户端设备；客户端设备的预加载存储单元接收并存储该第一页详情信息；在第二渲染单元读取该第一页详情信息并执行渲染操作时，单页信息请求单元向服务端设备发送第二页详情信息获取请求；单页信息响应单元接收到第二页详情信息获取请求后再次被触发，从而提取目标产品的第二个详情信息展示页面所述的第二页详情信息，并将其反馈至客户端设备；客户端设备的预加载存储单元接收并存储该第二页详情信息；在第二渲染单元读取该第二页详情信息并执行渲染操作时，单页信息请求单元向服务端设备发送第三页详情信息获取请求；依此类推，通过客户端设备的单页信息请求单元和服务端设备的单页信息响应单元之间的多次交互，将目标产品的详情信息以页面为单位逐个发送至客户端实现详情信息预加载。

另外，预加载存储单元在存储下一页详情信息前，可以先清空存储空间，从而保证只存储一个页面的详情信息，节省存储空间。

图6为本申请实施例提供的一种客户端设备的结构框图；该客户端设备通过与页面加载系统的服务端设备进行信息交互，实现对产品信息的加载、展示。参见图6，该客户端设备600包括：请求编辑单元610、第一渲染单元620、预加载存储单元630和第二渲染单元640。

该请求编辑单元610被配置为，在接收到用户的产品信息访问请求后，分别向服务端设备发送对目标产品的基本信息获取请求和预加载请求，以及在接收到所述服务端设备反馈的预加载确认响应后，向所述服务端设备发送对目标产品的详情信息获取请求。

该第一渲染单元620被配置为，对所述服务端设备反馈的基本信息执行渲染操作，并展示渲染得到的基本信息展示页面。

该预加载存储单元630被配置为，存储所述服务端设备根据所述详情信息获取请求反馈的详情信息。

该第二渲染单元640被配置为，在接收到用户的详情信息访问请求后，读取所述预加载存储单元中存储的所述详情信息并执行渲染操作，得到的详情信息展示页面。

图7为本申请实施例提供的一种服务端设备的结构框图；该服务端设备用于与页面加载系统的客户端设备进行信息交互，实现对产品信息在客户端设备上加载、展示。参见图7，该服务端设备700包括：第一响应单元710、预加载判断单元720和第二响应单元730。

该第一响应单元710被配置为，根据所述基本信息获取请求提取目标产品的基本信息并发送至所述客户端设备。

该预加载判断单元720被配置为，根据所述预加载请求判断是否需要对目标产品执行预加载操作，如果需要，则向所述客户端设备发送预加载确认响应。

该第二响应单元730被配置为，根据所述详情信息获取请求提取目标产品的详情信息并发送至所述客户端设备。

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

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

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