CN111400633A - 页面资源加载的方法及装置 - Google Patents

Abstract

本发明公开了一种页面资源加载的方法及装置。其中，该方法包括：获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；在上述预加载状态下，对上述待加载页面资源执行预加载操作。本发明解决了现有技术中对页面资源进行预加载的方式存在加载效果差，影响用户体验感的技术问题。

Description

页面资源加载的方法及装置

技术领域

本发明涉及页面资源加载技术领域，具体而言，涉及一种页面资源加载的方法及装置。

背景技术

现有技术中的加载页面资源的方式主要包括：预加载和懒加载，其中，预加载方式是指使用preload的方式，实现提前加载指定页面资源，上述preload是通过连接资源的元素属性值提前加载指定页面资源，但无法控制加载顺序导致用户体验差，并且，如果过于滥用preload提前加载资源，还会导致加重当前显示页面的负担。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种页面资源加载的方法及装置，以至少解决现有技术中对页面资源进行预加载的方式存在加载效果差，影响用户体验感的技术问题。

根据本发明实施例的一个方面，提供了一种页面资源加载的方法，包括：获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；在上述预加载状态下，对上述待加载页面资源执行预加载操作。

根据本发明实施例的另一方面，还提供了一种页面资源加载的装置，包括：获取模块，用于获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；确定模块，用于基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；加载模块，用于在上述预加载状态下，对上述待加载页面资源执行预加载操作。

根据本发明实施例的另一方面，还提供了一种存储介质，上述存储介质包括存储的程序，其中，在上述程序运行时控制上述存储介质所在设备执行任意一项上述的页面资源加载的方法。

根据本发明实施例的另一方面，还提供了一种处理器，上述处理器用于运行程序，其中，上述程序运行时执行任意一项上述的页面资源加载的方法。

在本发明实施例中，通过获取当前显示页面之外需要预加载的页面资源，并根据当前网络状态和当前界面交互状态，确定待加载页面资源进入预加载状态，并在上述预加载状态下，对上述待加载页面资源执行预加载操作；由于上述预加载操作执行过程可控，且基于该加载空闲时段对待加载页面资源执行预加载操作，即预加载过程中用户无需等待过长的时间，达到了有效提升对页面资源进行预加载的加载效果的目的，从而实现了提升用户体验感的技术效果，进而解决了现有技术中对页面资源进行预加载的方式存在加载效果差，影响用户体验感的技术问题。

附图说明

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

图1是根据本发明实施例的一种页面资源加载的方法的流程图；

图2是根据本发明实施例的一种可选的页面资源加载的方法的流程图；以及

图3是根据本发明实施例的一种页面资源加载的装置的结构示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，为方便理解本发明实施例，下面将对本发明中所涉及的部分术语或名词进行解释说明：

Web Worker:用于为JavaScript创造多线程环境，允许主线程创建Worker线程。

实施例1

根据本发明实施例，提供了一种页面资源加载的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种页面资源加载的方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；

步骤S104，基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；

步骤S106，在上述预加载状态下，对上述待加载页面资源执行预加载操作。

在本发明实施例中，通过获取当前显示页面之外需要预加载的页面资源，并根据当前网络状态和当前界面交互状态，确定待加载页面资源进入预加载状态，并在上述预加载状态下，对上述待加载页面资源执行预加载操作；由于上述预加载操作执行过程可控，且基于该加载空闲时段对待加载页面资源执行预加载操作，即预加载过程中用户无需等待过长的时间，达到了有效提升对页面资源进行预加载的加载效果的目的，从而实现了提升用户体验感的技术效果，进而解决了现有技术中对页面资源进行预加载的方式存在加载效果差，影响用户体验感的技术问题。

需要说明的是，本申请实施例所提供的页面资源加载的方法的实施例，可以但不限于应用于多页面的直播平台、购物平台等的应用场景中。

可选的，上述待加载页面资源为当前显示页面之外需要加载的页面资源，包括但不限于为图片、图标、文件(例如，js文件、css文件)等。

在一种可选的实施例中，在获取待加载页面资源之前，通过检测上述当前显示页面的页面资源是否加载完成；若检测结果指示已加载完成，则执行上述获取待加载页面资源的步骤；若检测结果指示未加载完成，则等待预定时间，直至上述当前显示页面的页面资源加载完成。

在另一种可选的实施例中，在获取待加载页面资源之后，通过检测客户端的当前网络状态是否为目标网络状态，其中，上述目标网络状态为支持执行上述预加载操作的网络状态；若检测到上述当前网络状态为上述目标网络状态，则检测上述客户端的当前界面交互状态；若检测到上述当前界面交互状态为交互空闲状态，则确定上述待加载页面资源进入上述预加载状态。

在上述预加载状态下，获取客户端的加载空闲时段，并通过比对上述加载空闲时段与预定空闲时段的大小；若上述加载空闲时段大于上述预定空闲时段，则在上述加载空闲时段加载上述待加载页面资源中的第一类待加载资源；若上述加载空闲时段小于或等于上述预定空闲时段，则在上述加载空闲时段加载上述待加载页面资源中的第二类待加载资源。

在一种可选的实施例中，加载上述第一类待加载资源所需的带宽大于加载上述第二类待加载资源所需的带宽，且加载上述第一类待加载资源所需的耗时大于加载上述第二类待加载资源所需的耗时。

在本申请实施例中，在获取待加载页面资源之后，通过检测当前网络状态和当前界面交互状态，来实现可控制的预加载操作，从而实现优化待加载页面资源的加载流程，在用户无感知的情况下对待加载页面资源进行预加载操作，进而可以优化用户的交互体验。

在一种可选的实施例中，在获取待加载页面资源之前，上述方法还包括：

步骤S202，检测上述当前显示页面的页面资源是否加载完成；

步骤S204，若检测结果指示已加载完成，则执行上述获取待加载页面资源的步骤；若检测结果指示未加载完成，则等待预定时间，直至上述当前显示页面的页面资源加载完成。

可选的，在加载完成当前显示页面正在显示中的页面资源时，可以采用一个全局变量来记录加载状态，可以但不限于通过在当前显示页面中加载一个js文件，通过该js文件检测当前显示页面正在显示中的页面资源是否已经加载完成。

其中，主要是通过检测当前是否存在ajax请求、是否加载图片资源和/或文件资源，来确定当前显示页面的页面资源是否加载完成，。

需要说明的是，为了避免影响加载当前显示页面的页面资源，降低用户的交互体验，因此，需要在检测到当前显示页面的页面资源已加载完成的情况下，再获取待加载页面资源，即获取当前显示页面之外预加载页面的资源，对待加载页面资源进行预加载操作。

在一种可选的实施例中，基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态包括：

步骤S302，检测客户端的当前界面交互状态；

步骤S304，检测上述客户端的当前网络状态；

步骤S306，若上述当前网络状态为目标网络状态且上述当前界面交互状态为交互空闲状态，则确定上述待加载页面资源进入上述预加载状态。

需要说明的是，若是应用客户端中的网络视图WebView加载并显示交互界面，则可以借助客户端的帮助，实现获取客户端的当前网络状态；其中，上述WebView用于展示网络请求后的内容。

可选的，上述目标网络状态为支持执行上述预加载操作的网络状态。可选的，支持执行上述预加载操作的网络状态，比如，可以是根据客户端当前的上传速度，或者，下载速度确定的网络状态，具体的，可以是上传速度，或者，下载速度小于预设值的网络状态。可选的，支持执行上述预加载操作的网络状态，可以是根据当前空闲的网络带宽确定的网络状态，等等。

在一种可选的实施例中，检测上述客户端的当前界面交互状态，包括：

步骤S402，检测上述当前显示页面中是否执行目标操作事件，其中，上述目标操作事件包括以下至少之一：点击事件、滚动事件、拖拽事件、信息获取事件；

步骤S404，若检测到上述当前显示页面中未存在上述目标操作事件，则确定上述当前界面交互状态为上述交互空闲状态。

在本申请实施例中，需要通过检测当前显示页面中是否执行目标操作事件，以判断用户当前有没有正在执行操作，例如，点击、滚动、拖拉、获取更多信息等操作，通过检测上述当前显示页面中是否执行目标操作事件，确定上述当前界面交互状态是否为上述交互空闲状态，以实现避免阻塞当前用户的操作与交互。

在上述可选的实施例中，在检测到上述当前网络状态为上述目标网络状态，且上述当前界面交互状态为交互空闲状态，即在同时满足上述两种状态要求的情况下，则确定上述待加载页面资源进入上述预加载状态。

在一种可选的实施例中，对上述待加载页面资源执行预加载操作包括：

步骤S502，获取加载空闲时段；

步骤S504，在上述加载空闲时段内对上述待加载页面资源执行上述预加载操作。

在上述可选的实施例中，依据获取到的执行上一预加载操作的加载完成时间点和当前时间点，基于上述当前时间点与上述加载完成时间点之间的时间差值，确定上述加载空闲时段，并在上述加载空闲时段内对上述待加载页面资源执行上述预加载操作。

在一种可选的实施例中，在上述加载空闲时段内对上述待加载页面资源执行上述预加载操作，包括：

步骤S602，比对上述加载空闲时段与预定空闲时段的大小；

步骤S604，若上述加载空闲时段大于上述预定空闲时段，则在上述加载空闲时段加载上述待加载页面资源中的第一类待加载资源；

步骤S606，若上述加载空闲时段小于或等于上述预定空闲时段，则在上述加载空闲时段加载上述待加载页面资源中的第二类待加载资源。

在一种可选的实施例中，加载上述第一类待加载资源所需的带宽大于加载上述第二类待加载资源所需的带宽，且加载上述第一类待加载资源所需的耗时大于加载上述第二类待加载资源所需的耗时。

可选的，上述预定空闲时段可以为一分钟、三分钟等，该预定空闲时段具体可以根据实施情况进行设置，本申请实施例对此并不具体限定。

可选的，上述第一类待加载资源即为需要在加载空闲时段较长的情况下，例如，在用户不看当前显示页面，处于较长的加载空闲时段时，进行预加载的较大的待加载资源；上述第二类待加载资源即为可以在较短的加载空闲时段中，进行穿插预加载的较小的待加载资源。

作为一种可选的实施例，若浏览器支持web worker可以使用多线程，则上述预加载操作则在web worker的新线程中执行，从而不要影响到当前显示页面的线程，但是，需要注意的是，本申请实施例中并非支持web worker即可无限制的执行预加载，支持webworker只是可以不影响当前线程，不代表可以预加载更多的页面资源。

通过本申请实施例，可以实现提前预加载待加载的页面资源，当用户打开下个页面时，可以不需要等待过长的加载时间，从而会优化用户的体验，而且执行预加载操作的流程是可控的，因此，执行该预加载操作不会额外增加加载当前页面的页面资源的负担。

作为一种可选的实施例，以下通过一个可选的实施例，对本申请实施例所提供的页面资源加载的方法实施例，图2是根据本发明实施例的一种可选的页面资源加载的方法的流程图，如图2所示，该方法包括如下步骤：

步骤S702，检测当前显示页面的页面资源是否加载完成；

其中，若检测结果指示已加载完成，则执行步骤S704；若检测结果指示未加载完成，则等待预定时间，直至上述当前显示页面的页面资源加载完成。

步骤S704，获取待加载页面资源；

其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；

步骤S706，检测客户端的当前网络状态；

步骤S708，检测客户端的当前界面交互状态；

步骤S710，若当前网络状态为目标网络状态且当前界面交互状态为交互空闲状态，则确定待加载页面资源进入预加载状态；

步骤S712，在预加载状态下，获取加载空闲时段；

步骤S714，比对加载空闲时段与预定空闲时段的大小；

步骤S716，若加载空闲时段大于预定空闲时段，则在加载空闲时段加载待加载页面资源中的第一类待加载资源；

步骤S718，若加载空闲时段小于或等于预定空闲时段，则在加载空闲时段加载待加载页面资源中的第二类待加载资源。

在一种可选的实施例中，加载上述第一类待加载资源所需的带宽大于加载上述第二类待加载资源所需的带宽，且加载上述第一类待加载资源所需的耗时大于加载上述第二类待加载资源所需的耗时。

实施例2

根据本发明实施例，还提供了一种用于实施上述页面资源加载的方法的装置实施例，图3是根据本发明实施例的一种页面资源加载的装置的结构示意图，如图3所示，上述页面资源加载的装置，包括：获取模块30、确定模块32、加载模块34，其中：

获取模块30，用于获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；确定模块32，用于基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；加载模块34，用于在上述预加载状态下，对上述待加载页面资源执行预加载操作。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，例如，对于后者，可以通过以下方式实现：上述各个模块可以位于同一处理器中；或者，上述各个模块以任意组合的方式位于不同的处理器中。

此处需要说明的是，上述获取模块30、确定模块32、加载模块34对应于实施例1中的步骤S102至步骤S106，上述模块与对应的步骤所实现的实例和应用场景相同，但不限于上述实施例1所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在计算机终端中。

需要说明的是，本实施例的可选或优选实施方式可以参见实施例1中的相关描述，此处不再赘述。

上述的页面资源加载的装置还可以包括处理器和存储器，上述获取模块30、确定模块32、加载模块34等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元，上述内核可以设置一个或以上。存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

根据本申请实施例，还提供了一种存储介质实施例。可选地，在本实施例中，上述存储介质包括存储的程序，其中，在上述程序运行时控制上述存储介质所在设备执行上述任意一种页面资源加载的方法。

可选地，在本实施例中，上述存储介质可以位于计算机网络中计算机终端群中的任意一个计算机终端中，或者位于移动终端群中的任意一个移动终端中，上述存储介质包括存储的程序。

可选地，在程序运行时控制存储介质所在设备执行以下功能：获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；在上述预加载状态下，对上述待加载页面资源执行预加载操作。

根据本申请实施例，还提供了一种处理器实施例。可选地，在本实施例中，上述处理器用于运行程序，其中，上述程序运行时执行上述任意一种页面资源加载的方法。

本申请实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；在上述预加载状态下，对上述待加载页面资源执行预加载操作。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：获取待加载页面资源，其中，上述待加载页面资源为当前显示页面之外需要加载的页面资源；基于当前网络状态和当前界面交互状态确定上述待加载页面资源进入预加载状态；在上述预加载状态下，对上述待加载页面资源执行预加载操作。

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

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (11)

1.一种页面资源加载的方法，其特征在于，包括：

获取待加载页面资源，其中，所述待加载页面资源为当前显示页面之外需要加载的页面资源；

基于当前网络状态和当前界面交互状态确定所述待加载页面资源进入预加载状态；

在所述预加载状态下，对所述待加载页面资源执行预加载操作。

2.根据权利要求1所述的方法，其特征在于，在获取待加载页面资源之前，所述方法还包括：

检测所述当前显示页面的页面资源是否加载完成；

若检测结果指示已加载完成，则执行所述获取待加载页面资源的步骤；若检测结果指示未加载完成，则等待预定时间，直至所述当前显示页面的页面资源加载完成。

3.根据权利要求1所述的方法，其特征在于，基于当前网络状态和当前界面交互状态确定所述待加载页面资源进入预加载状态包括：

检测客户端的当前界面交互状态；

检测所述客户端的当前网络状态；

若所述当前网络状态为目标网络状态且所述当前界面交互状态为交互空闲状态，则确定所述待加载页面资源进入所述预加载状态。

4.根据权利要求3所述的方法，其特征在于，所述目标网络状态为支持执行所述预加载操作的网络状态。

5.根据权利要求3所述的方法，其特征在于，检测所述客户端的当前界面交互状态，包括：

检测所述当前显示页面中是否执行目标操作事件，其中，所述目标操作事件包括以下至少之一：点击事件、滚动事件、拖拽事件、信息获取事件；

若检测到所述当前显示页面中未存在所述目标操作事件，则确定所述当前界面交互状态为所述交互空闲状态。

6.根据权利要求1所述的方法，其特征在于，对所述待加载页面资源执行预加载操作包括：

获取加载空闲时段；

在所述加载空闲时段内对所述待加载页面资源执行所述预加载操作。

7.根据权利要求6所述的方法，其特征在于，在所述加载空闲时段内对所述待加载页面资源执行所述预加载操作，包括：

比对所述加载空闲时段与预定空闲时段的大小；

若所述加载空闲时段大于所述预定空闲时段，则在所述加载空闲时段加载所述待加载页面资源中的第一类待加载资源；

若所述加载空闲时段小于或等于所述预定空闲时段，则在所述加载空闲时段加载所述待加载页面资源中的第二类待加载资源。

8.根据权利要求7所述的方法，其特征在于，加载所述第一类待加载资源所需的带宽大于加载所述第二类待加载资源所需的带宽，加载所述第一类待加载资源所需的耗时大于加载所述第二类待加载资源所需的耗时。

9.一种页面资源加载的装置，其特征在于，包括：

获取模块，用于获取待加载页面资源，其中，所述待加载页面资源为当前显示页面之外需要加载的页面资源；

确定模块，用于基于当前网络状态和当前界面交互状态确定所述待加载页面资源进入预加载状态；

加载模块，用于在所述预加载状态下，对所述待加载页面资源执行预加载操作。

10.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行权利要求1至8中任意一项所述的页面资源加载的方法。

11.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至8中任意一项所述的页面资源加载的方法。

Images