CN106202100A

CN106202100A - 页面的加载方法及装置

Info

Publication number: CN106202100A
Application number: CN201510225240.6A
Authority: CN
Inventors: 张镇圳
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2015-05-05
Filing date: 2015-05-05
Publication date: 2016-12-07
Anticipated expiration: 2035-05-05
Also published as: CN106202100B

Abstract

本发明实施例公开了一种页面的加载方法及装置，可根据用户需求动态加载页面组件，并有效提高首屏页面的加载速度。本发明实施例方法包括：针对页面的页面组件创建脚本文件，其中，所述脚本文件声明至少一个页面组件的页面组件关键字，并定义与所述页面组件关键字对应的页面组件逻辑；在页面的加载过程中，加载所述脚本文件，以生成对应的页面；检测用户在所述页面上的触发操作，所述触发操作用于请求调用某个或某些目标页面组件；在所述脚本文件中查找与所述触发操作所请求的目标页面组件对应的页面组件关键字；执行与所述页面组件关键字对应的页面组件逻辑，以加载所述目标页面组件。

Description

页面的加载方法及装置

技术领域

本发明涉及一种计算机技术领域，尤其涉及一种页面的加载方法及装置。

背景技术

在现有的页面加载方案中，当页面有可能需要调用到某页面组件时，需先将该页面组件所依赖的资源文件(js文件、css文件)预先写入页面，且必须等这些资源文件加载完毕，才会向用户响应首屏页面。

然而，实际应用中，页面中的某些页面组件在首屏页面加载时并没有起到实质作用，但这些页面组件的资源文件随着首屏页面加载会延长首屏页面的加载时间，尤其对于页面组件较多的首屏页面，全部加载所有资源文件将会增大首屏页面的加载负担，降低首屏页面的加载速度，造成用户打开页面的时间过长，影响用户体验。

发明内容

本发明实施例提供了一种可根据用户需求动态加载页面组件的页面的加载方法及装置，可有效提高首屏页面的加载速度。

本发明实施例的第一方面提供一种页面的加载方法，包括：

针对页面的页面组件创建脚本文件，其中，所述脚本文件声明至少一个页面组件的页面组件关键字，并定义与所述页面组件关键字对应的页面组件逻辑；

在页面的加载过程中，加载所述脚本文件，以生成对应的页面；

检测用户在所述页面上的触发操作，所述触发操作用于请求调用某个或某些目标页面组件；

在所述脚本文件中查找与所述触发操作所请求的目标页面组件对应的页面组件关键字；

执行与所述页面组件关键字对应的页面组件逻辑，以加载所述目标页面组件。

本发明实施例第二方面提供了一种页面的加载装置，包括：

创建单元，用于针对页面的页面组件创建脚本文件，其中，所述脚本文件声明至少一个页面组件的页面组件关键字，并定义与所述页面组件关键字对应的页面组件逻辑；

加载单元，用于在页面的加载过程中，加载所述脚本文件，以生成对应的页面；

检测单元，用于检测用户在所述页面上的触发操作，所述触发操作用于请求调用某个或某些目标页面组件；

查找单元，用于在所述脚本文件中查找与所述触发操作所请求的目标页面组件对应的页面组件关键字；

执行单元，用于执行与所述页面组件关键字对应的页面组件逻辑，以加载所述目标页面组件。

本发明实施例提供的技术方案中，预先针对页面的页面组件创建脚本文件，其中，该脚本文件声明至少一个页面组件的页面组件关键字，并定义与该页面组件关键字对应的页面组件逻辑；在页面的加载过程中，加载该脚本文件，以生成对应的页面；检测用户在页面上的触发操作，该触发操作用于请求调用某个或某些目标页面组件，在该脚本文件中查找与该触发操作所请求的目标页面组件对应的页面组件关键字，并执行与该页面组件关键字对应的页面组件逻辑，以加载目标页面组件。因此相对于现有技术，本发明实施例在页面初始加载过程中的无需全部加载页面组件的所有资源文件，而只需加载脚本文件，以便在检测到触发操作时，再利用该脚本文件动态加载对应页面组件，从而有效提高首屏页面的加载速度，提升用户体验。

附图说明

图1为本发明实施例中页面的加载方法的一个实施例示意图；

图2为本发明实施例中页面的加载装置的一个实施例示意图；

图3为本发明实施例中页面的加载装置的另一实施例示意图。

具体实施方式

本发明实施例提供了一种可根据用户需求动态加载页面组件的页面的加载方法及装置，可有效提高首屏页面的加载速度，以下分别进行详细说明。

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

此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，本发明实施例可以应用于多种浏览器工具，具体此处不一一列举。

请参阅图1，本发明实施例中页面的加载方法的一个实施例包括：

101、针对页面中的页面组件创建脚本文件；

在本实施例中，该脚本文件声明至少一个页面组件的页面组件关键字，并定义与该页面组件关键字对应的页面组件逻辑，即在该脚本文件中，针对每个页面组件，包含对应的页面组件关键字和对应的页面组件逻辑。例如，针对页面组件a可以包括如下内容：c.a＝function()，其中，“c.a”对应页面组件a声明的页面组件关键字，“function()”对应页面组件a定义的页面组件逻辑。

可以理解的是，在本实施例中，该脚本文件的数量不限，可以为一个或者多个，在实际应用中，为了节省资源或者提高首屏页面的加载速度，可以优选将脚本文件设置为一个。可选地，该脚本文件可以为js文件，以供浏览器调用。

在本实施例中，页面组件是指一系列作用于页面，以产生不同的页面效果的代码，该页面组件可以为一个或者多个，具体此处不做限定。在实际应用中，页面组件的选取可根据实际需求从页面关联的所有页面组件中选取，可以选取上述所有页面组件中的全部或者部分，通常，页面组件可以选取非首屏页面对应的页面组件，以便无需用户进行触发操作便可快速加载首屏页面。

102、在页面的加载过程中，加载该脚本文件，以生成对应的页面；

在本实施例中，在页面的加载过程中，涉及该页面组件的处理时，无需加载该页面组件的资源文件，而只需加载该脚本文件，以生成对应的页面。可以理解的是，在页面的加载过程中，还包括其他页面内容文件的处理，本领域技术人员可根据现有技术获取其他页面内容文件的加载过程，具体此处不再赘述。

在本实施例中，在加载脚本文件以及其他页面内容文件后，便可生成可供用户访问的页面，从而向用户响应首屏页面。

103、检测用户在页面上的触发操作；

其中，该触发操作用于请求调用某个或某些目标页面组件。

可选地，在本实施例中，检测用户在页面上的触发操作具体可以包括检测用户对页面中预设按钮的点击操作，其中，一个预设按钮可以对应一个目标页面组件，也可以对应多个目标页面组件。例如，用户点击按钮A，对应的目标页面组件为页面组件a，用户点击按钮B，对应的目标页面组件为页面组件b，具体此处对于按钮与页面组件的对应关系可根据实际需求设置，具体此处不做限定。

104、在脚本文件中查找与触发操作所请求的目标页面组件对应的页面组件关键字；

在本实施例中，脚本文件声明有页面组件的页面组件关键字，由此，可根据页面组件与页面组件关键字的对应关系查找到触发操作所请求的目标页面组件对应的页面组件关键字。

例如，目标页面组件为页面组件a，则在脚本文件中查到页面组件a的页面组件关键字，如步骤101中描述的“c.a”。

105、执行与页面组件关键字对应的页面组件逻辑，以加载该目标页面组件；

在本实施例中，页面组件关键字用于建立目标页面组件与页面组件逻辑直接的关联，以便根据目标页面组件可以确定与该目标页面组件对应的页面组件逻辑。

可选地，在本实施例中，执行与页面组件关键字对应的页面组件逻辑包括：

获取调用目标页面组件所需的参数；

加载该目标页面组件所需的资源文件；

根据该参数和该资源文件加载该目标页面组件。

可选地，资源文件可以包括js文件和/或css文件，并通过资源服务器加载对应的js文件和/或css文件。其中，js文件是用javascript脚本语言编写的文件，css文件是用于控制页面样式并允许将样式信息与页面内容分离的一种标记性语言。

在本实施例中，对于用户未点击的按钮，无需执行对应的页面组件的页面组件逻辑。

为便于理解，下面以一具体应用场景对上述实施例中描述的页面的加载方法进行详细描述：

首先通过脚本文件对选取的页面组件a和页面组件b的开发规范和调用方式进行预先约定，其中，页面组件a所依赖的资源文件为a.js和a.css，页面组件b所依赖的资源文件为b.js、b.css，具体包括：

针对页面组件a和页面组件b创建脚本文件c.js；其中，在脚本文件c.js中，包括以下内容：

c.a＝function1(){/**组件a定义的逻辑**/}；

c.b＝function2(){/**组件b定义的逻辑**/}。

其中，“c.a”对应页面组件a声明的页面组件关键字；“function1()”对应页面组件a定义的页面组件逻辑；“c.b”对应页面组件a声明的页面组件关键字；“function2()”对应页面组件b定义的页面组件逻辑；

在页面的初始加载过程中，无需从资源服务器加载页面组件a和页面组件b，而只需加载脚本文件c.js，以生成对应的页面，从而向用户响应首屏页面。

在页面上设置有对应页面组件a的按钮A，对应页面组件b的按钮B；

当用户点击按钮A时，在脚本文件查找与页面组件a对应的页面组件关键字“c.a”，并执行function1()。

当用户点击按钮B时，在脚本文件查找与页面组件b对应的页面组件关键字“c.b”，并执行function2()。

由此，本发明实施例在页面初始加载过程中的无需加载页面组件的所有资源文件(a.js、a.css、b.js以及b.css)，而只需加载脚本文件，以便在检测用户的点击操作时，再利用该脚本文件动态加载对应页面组件a和页面组件b，从而有效提高首屏页面的加载速度，提升用户体验。

上面对本发明实施例中的页面的加载方法进行了描述，下面对本发明实施例中的页面的加载装置进行描述，请参阅图2，本发明实施例中页面的加载装置一个实施例包括：

创建单元201，用于针对页面的页面组件创建脚本文件，其中，所述脚本文件声明至少一个页面组件的页面组件关键字，并定义与所述页面组件关键字对应的页面组件逻辑；

加载单元202，用于在页面的加载过程中，加载所述脚本文件，以生成对应的页面；

检测单元203，用于检测用户在所述页面上的触发操作，所述触发操作用于请求调用某个或某些目标页面组件；

查找单元204，用于在所述脚本文件中查找与所述触发操作所请求的目标页面组件对应的页面组件关键字；

执行单元205，用于执行与所述页面组件关键字对应的页面组件逻辑，以加载所述目标页面组件。

为便于理解，下面以一具体应用场景为例，对本实施例中页面的加载装置内部运作流程进行描述：

创建单元201针对页面的页面组件创建脚本文件，其中，所述脚本文件声明至少一个页面组件的页面组件关键字，并定义与所述页面组件关键字对应的页面组件逻辑；加载单元202在页面的加载过程中，加载所述脚本文件，以生成对应的页面；检测单元203检测用户在所述页面上的触发操作，所述触发操作用于请求调用某个或某些目标页面组件；查找单元204在所述脚本文件中查找与所述触发操作所请求的目标页面组件对应的页面组件关键字；执行单元205执行与所述页面组件关键字对应的页面组件逻辑，以加载所述目标页面组件。

本发明实施例提供的技术方案中，预先通过创建单元201针对页面的页面组件创建脚本文件，其中，该脚本文件声明至少一个页面组件的页面组件关键字，并定义与该页面组件关键字对应的页面组件逻辑；由加载单元202在页面的加载过程中，加载该脚本文件，以生成对应的页面；并通过检测单元203检测用户在页面上的触发操作，该触发操作用于请求调用某个或某些目标页面组件，由查找单元204在该脚本文件中查找与该触发操作所请求的目标页面组件对应的页面组件关键字，并由执行单元205执行与该页面组件关键字对应的页面组件逻辑，以加载目标页面组件。因此相对于现有技术，本发明实施例在页面初始加载过程中的无需全部加载页面组件的所有资源文件，而只需加载脚本文件，以便在检测到触发操作时，再利用该脚本文件动态加载对应页面组件，从而有效提高首屏页面的加载速度，提升用户体验。

可选地，在本实施例中，所述执行单元205可以包括：

获取模块2051，用于获取调用所述目标页面组件所需的参数；

第一加载模块2052，用于加载所述目标页面组件所需的资源文件；

第二加载模块2053，用于根据所述参数和所述资源文件加载所述目标页面组件。

可选地，在本实施例中，所述检测单元203，具体用于检测用户对所述页面中预设按钮的点击操作。

可选地，在本实施例中，所述脚本文件为js文件。

可选地，在本实施例中，所述资源文件包括js文件和/或css文件。

上面从模块化功能实体的角度对本发明实施例中的页面的加载装置进行描述，下面从硬件处理的角度对本发明实施例中的页面的加载装置进行描述，请参阅图3，本发明实施例中页面的加载装置另一实施例包括：

输入装置301、输出装置302、处理器303和存储器304(其中页面的加载装置中的处理器303的数量可以一个或多个，图3中以一个处理器303为例)。在本发明的一些实施例中，输入装置301、输出装置302、处理器303和存储器304可通过总线或其它方式连接，其中，图3中以通过总线连接为例。

其中，通过调用存储器304存储的操作指令，处理器303，用于执行如下步骤：

在本发明的一些实施例中，处理器303具体可以用于执行以下步骤：

获取调用所述目标页面组件所需的参数；

加载所述目标页面组件所需的资源文件；

根据所述参数和所述资源文件加载所述目标页面组件。

检测用户对所述页面中预设按钮的点击操作。

在本发明的一些实施例中，所述脚本文件包括js文件。

在本发明的一些实施例中，所述资源文件包括js文件和/或css文件。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

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

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

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

Claims

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

2.如权利要求1所述的页面的加载方法，其特征在于，所述执行与所述页面组件关键字对应的页面组件逻辑包括：

获取调用所述目标页面组件所需的参数；

加载所述目标页面组件所需的资源文件；

根据所述参数和所述资源文件加载所述目标页面组件。

3.如权利要求1所述的页面的加载方法，其特征在于，所述检测用户在页面上的触发操作包括：

检测用户对所述页面中预设按钮的点击操作。

4.如权利要求1至3中任意一项所述的页面的加载方法，其特征在于，所述脚本文件包括js文件。

5.如权利要求2所述的页面的加载方法，其特征在于，所述资源文件包括js文件和/或css文件。

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

7.如权利要求6所述的页面的加载装置，其特征在于，所述执行单元包括：

获取模块，用于获取调用所述目标页面组件所需的参数；

第一加载模块，用于加载所述目标页面组件所需的资源文件；

第二加载模块，用于根据所述参数和所述资源文件加载所述目标页面组件。

8.如权利要求6所述的页面的加载装置，其特征在于，

所述检测单元，具体用于检测用户对所述页面中预设按钮的点击操作。

9.如权利要求6至8中任意一项所述的页面的加载装置，其特征在于，所述脚本文件为js文件。

10.如权利要求7所述的页面的加载装置，其特征在于，所述资源文件包括js文件和/或css文件。