CN108920203A - 一种页面加载方法及设备 - Google Patents

Abstract

本发明公开了一种页面加载方法及设备，用于提高页面加载的效率。其中的页面加载方法包括：接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；输出加载后的所述第一页面。

Description

一种页面加载方法及设备

技术领域

本发明涉及计算机技术领域，特别涉及一种页面加载方法及设备。

背景技术

网络管理软件提供了各种各样的页面，通常用于实现网络管理功能，也称为网管系统。借助于网管系统，网络管理员可以经由网络管理员与被管理系统中的代理交换网络信息，而且还可以开发网络管理应用程序。

其中，网管系统的各个页面在显示之前，需要加载一些资源，例如脚本文件、贴图素材等，以经过渲染后显示相应的页面所包括的内容。

目前，对于一个页面的资源的加载是通过调用全局的资源文件来实现，而一个页面可能只需要加载全部资源中的部分资源，这就导致无法避免加载不需要的资源，随着资源文件的数量的增多，一个页面每次都加载全部的资源文件，显然页面加载资源所需时间较长，降低了页面加载的效率。

发明内容

本发明实施例提供一种页面加载方法及设备，用于提高页面加载的效率。

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

接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出加载后的所述第一页面。

可选的，在输出加载后的所述第一页面之前，还包括：

确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

可选的，在接收第一访问请求消息之前，还包括：

针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

确定得到的所述第一页面的每个区域是否存在依赖项，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

可选的，在完成对所述第一页面的加载之后，还包括：

检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，在输出加载后的所述第一页面之前，还包括：

获取所述第一页面的各个区域所需填充的数据；

将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。

第二方面，本发明一实施例提供了一种页面加载设备，所述设备包括：

接收模块，用于接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

加载模块，用于对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出模块，用于输出加载后的所述第一页面。

可选的，还包括确定模块、获取模块；

所述确定模块用于：在输出加载后的所述第一页面之前，确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

所述获取模块用于：若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

所述加载模块还用于：将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

可选的，还包括创建模块，所述创建模块用于在接收第一访问请求消息之前，针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

其中，所述确定模块用于确定得到的所述第一页面的每个区域是否存在依赖项，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

可选的，还包括检测模块、查找模块，其中，所述检测模块用于在完成对所述第一页面的加载之后，检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

所述查找模块用于根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

所述加载模块还用于：加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，还包括填充模块、渲染模块，其中，

所述获取模块还用于：在输出加载后的所述第一页面之前，获取所述第一页面的各个区域所需填充的数据；

所述填充模块用于：将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

所述渲染模块用于：对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。

第三方面，本发明一实施例还提供了一种页面加载设备，所述设备包括：

存储器，用于存储指令；

处理器，用于执行所述指令：

接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出加载后的所述第一页面。

可选的，所述处理器还用于：

在输出加载后的所述第一页面之前，确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

可选的，所述处理器还用于：

在接收第一访问请求消息之前，针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

其中，所述处理器用于确定得到的所述第一页面的每个区域是否存在依赖项，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

可选的，所述处理器还用于：

在完成对所述第一页面的加载之后，检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，所述处理器还用于：

在输出加载后的所述第一页面之前，获取所述第一页面的各个区域所需填充的数据；

将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。

本发明实施例中，在加载第一页面时，只加载第一页面的部分页面资源，其中，部分页面资源包括被第一样本视图和文本信息，第一样本视图被划分为至少一个区域，在每个区域对应的位置可以先只加载文本信息，这样就避免了对第一页面所需要的资源全部进行加载，提高了页面加载的效率，使第一页面能够快速显示，提升用户体验。

附图说明

图1是本发明实施例提供的页面加载方法的流程图；

图2为本发明实施例提供的页面加载设备的一种结构示意图；

图3为本发明实施例提供的页面加载设备的一种结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。

在介绍本申请的具体实施例之前，首先介绍网页的相关情况：

一个网页大致可以分为三个部分：头部、主体和尾部。其中，头部主要是用于显示企业或网站标志性的内容，例如企业名称、企业标志等信息。尾部通常是用于显示企业的联系方式、网络内容服务商(Internet Content Provider，ICP)备案等信息。而主体是用于显示网页的主要内容，例如包括一些控件，以使得用户可以对主体所显示的内容进行操作，例如点击控件，获得用户想要知道的内容。

在网页加载过程中，首先是获取网页加载所需要的资源，例如图片资源、文字资源等。由于主体的作用是显示网页的主要内容，所以加载主体所对应的资源后，一个网页的大体内容则加载完成，渲染之后就基本完成主体内容的显示。

网页主体一般对应多个模块，每个模块均对应有自己的模块资源。每个模块资源主要包括有独立功能模板、层叠样式表单(Cascading Style Sheets，CSS)文件以及Java脚本(JavaScript，JS)文件。其中，本发明实施例中所指的CSS文件是模块中以.css为后缀名的文件，JS文件是模块中以.js为后缀名的文件。

每个模块中的CSS文件主要用来定义一个超文本标记语言(HyperText MarkupLanguage，HTML)标识的显示样式。JS文件为用JavaScript脚本语言编写的、用于执行模块主要功能的软件程序。例如，一个超链接字符串，子啊实现这个超链接字符串的过程中，CSS文件主要显示字符串的字体，例如宋体、楷体或者其他字体，JS文件的作用是为字符串添加超链接。

目前，网络管理系统中各个功能的页面都是通过调用全量依赖JS文件和CSS文件，也就是调用全部的JS文件和CSS文件实现加载页面所需要的资源的。例如，A页面有一个子页面，称为B页面。A页面和B页面共有30个组件依赖JS文件，但是实际上A页面中只依赖10个组件依赖JS文件，为了保证B页面不出问题，在加载A页面的时候也要加载B页面所依赖的JS文件。也就是在加载A页面的时候也加载B页面的依赖。再如，B页面在回调A页面，为了防止A页面出问题，这个时候加载B页面的时候又去加载A页面依赖JS文件，也就是说无论用户是否会触发这30组件的交互事件，加载A、B页面都去各自加载了30条脚本JS文件，这是非常消耗加载时间的。可见，目前页面加载的方法比较耗时，加载效率不高。

鉴于此，本发明实施例提供一种页面加载方法设备，在加载各个页面时，只加载页面的部分页面资源，而不是加载与该页面相关联的全部页面资源，这样就不需要加载全量依赖的JS文件和CSS文件，所加载的资源较少，加载所用时长就较短，提高了页面加载的效率，使页面能够快速显示，提升用户体验。

下面结合附图对本发明优选的实施方式进行详细说明。

请参见图1，本发明实施例提供一种页面加载方法，该方法的主要流程描述如下。

S101：接收第一访问请求消息，第一访问请求消息用于请求访问第一页面；

S102：对第一页面的部分页面资源进行加载；其中，部分页面资源包括第一样本视图和至少一个文本信息，第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

S103：输出加载后的第一页面。

当客户端在启动一个网络管理系统后，用户可以向客户端发送第一访问请求消息，请求访问网络管理系统的第一页面。其中网络管理系统包括多个页面，第一页面可以是网络管理系统启动后，用户最先看到的页面。用户向客户端发送第一访问请求消息可以通过在客户端显示的网络管理系统的登录界面上进行操作实现，例如，用户可以在登录页面中输入用户名和/或密码，请求进入网络管理系统的页面，那么第一访问请求消息可以是用户输入用户名和/或密码所对应的消息。

客户端接收了第一访问请求消息之后，可以对用户所要访问的第一页面的部分页面资源进行加载。部分页面资源可以包括所述部分页面资源包括第一样本视图和至少一个文本信息，第一样本视图被划分为至少一个区域，一个区域对应一个文本信息。第一样本视图可以理解为第一页面的显示模板视图，可以是静态视图，也可以是动态视图，本发明实施例中不作限定。第一样本视图可以根据第一页面所实现的各个功能进行设置，在具体实施中，客户端可以事先存储多个样本视图，各个样本视图都可以根据对应的页面设置，当需要加载第一页面时，客户端可以先加载与第一页面对应的第一样本视图，以先显示第一样本视图，后续在第一样本视图上加载数据，实现第一页面的显示。

第一样本视图可以实现被划分为至少一个区域，每个区域可以实现对应的一种功能。例如，第一样本视图可以被划分为三个区域，第一个区域可以显示企业的LOGO，第二个区域可以显示企业的联系方式，第三个区域可以显示该页面所能实现的功能。每个区域又可以被划分成至少一个子区域，每个子区域对应实现一种功能，例如每个子区域可以对应显示页面的一个控件，例如导入按钮、修改按钮等。

由于用户想要访问第一页面，但是不一定要通过第一页面实现某种功能，因为客户端可以只将第一页面显示出来即可，所以客户端在对第一页面加载时，可以加载第一样本视图，并对应加载第一样本视图上的部分数据。部分数据可以以文本信息的方式显示，例如第一样本视图上的各个区域上填充文本信息。而仅文本信息的方式将数据加载在第一样本视图上，这样加载第一页面时，就不需要加载全部的资源，减少了加载时间，提供了加载效率。

本发明实施例中，客户端所存储的多个样本视图可以复用，这样就可以节约存储空间。例如，某个功能页面所要实现的功能的布局可能和另一个功能页面所要实现的功能的布局相似，那么两个功能页面被划分的至少一个区域也相似。可能的实施方式中，客户端可以定义这两个功能页面对应一个样本视图，这个样本视图实现被划分的至少一个区域可以通过一些占位资源事先进行布局，占位资源可以理解为初始设置的一些占位图，可以以文本信息的形式标识，也可以以图片的形式标识。在实际加载过程中，可以用实际要加载的资源替换占位资源即可，例如用实际要加载的文本信息替换占位资源即可。

客户端加载第一样本视图后，还可以在第一样本视图中继续加载数据模型，数据模型可以理解为包括数据结、数据操作及数据约束的模型，其可以以图和/或表形式存在的模型，或者其他形式存在的模型。本发明实施例中，数据模型可以存储在客户端，也可以存储在远端服务器中。若数据模型存储在客户端，客户端还可以存储样本视图和数据模型之间的对应关系，客户端可以直接根据要加载的第一样本视图及上述对应关系获取与第一样本视图对应的数据模型进行加载。若数据模型存储在远端服务器，客户端需要加载数据模型时，可以向远端服务器发送请求消息，该请求消息用于向远端服务器请求获取数据模型。远端服务器接收客户端发送的请求消息后，可以获取自身存储的与第一样本视图对应的数据模型，并将获取的数据模型发送给客户端。

其中，一个样本视图可以对应一个或多个数据模型，各个数据模型可以根据网络管理系统要管理的设备获取对应的数据进行填充，不同的设备类型，数据可能相同，也可能不同。客户端可以获取第一页面的各个区域所需填充的数据，将获取的数据填充在存储的数据模型后，在第一页面上加载填充后的数据模型，对加载了填充后的数据模型的第一页面进行渲染，以输出渲染后的第一页面，将第一页面显示在客户端，便于用户查看和/或操作。本发明实施例中，样本视图和数据模型各自独立，样本视图和数据模型可以灵活自由组合可以快速构成第一页面，方便用户查看。

本发明实施例中，客户端在对第一页面的部分页面资源进行加载之前，可以针对网络管理系统所要实现的各个功能的页面中的页面组件创建脚本文件。JS文件声明至少一个页面组件的页面组件关键字，并定义与该页面组件关键字对应的页面组件逻辑，加载页面时，只需要运行脚本文件，就可以对应运行页面组件逻辑实现页面的加载。JS文件声明至少一个页面组件的组件标识，并定义与该组件标识对应的页面组件逻辑。其中，页面组件可以理解为作用于页面，已产生不同的页面效果的代码，页面组件可以为一个或多个，在实际应用中，页面组件的选取可以根据实际需求从页面关联的所有页面组件中选取，可以选取上述所有页面组件中的全部或者部分。

可能的实施方式中，所创建的脚本文件中包括各个功能的页面所依赖的JS文件和CSS文件，其中，各个功能的页面所依赖的JS文件和CSS文件可以事先被分解成多个具体功能的JS模块文件和CSS模块文件，这样有利于功能的分类和修改，维护也方便。所创建的脚本文件也可以称为配置文件，该配置文件用于指示指定资源库、页面组件、控件之间的映射关系，即页面的功能模块或者业务模块中要加载的资源库、页面组件、控件所需要的依赖资源之间的依赖关系。初始时，创建了配置文件后，如果后期有新的资源需要加入，或者需要修改或删除已有的资源，那么只需要更新配置文件即可，即维护配置文件中的映射关系，以在网络管理系统运行时和运行中确保网络管理系统中库、页面组件、控件依赖关系的正确性。具体实施过程中，可以由包管理器由系统通过diff算法检测更新配置文件，并修改对应的参数，生成最新的配置文件，从而尽量保证依赖映射关系的正确性。

本发明实施例中，页面组件可以根据用户进行的触发操作，例如用户点击页面上的某个控件来选取，而用户不进行操作，则可以认为用户不需要通过进行某个操作实现页面的某个功能，那么对于这部分页面组件就可以暂时不加载，这样所加载的页面组件就较少，缩短了页面加载时间，可快速实现加载某个页面，提升用户体验。

例如，例如：A页面功能实现需要加载shiro.js，edit.js，delete.js这3个资源文件，其中A页面的展示功能实现只依赖shiro.js，A页面的输入框编辑交互的功能实现只依赖edit.js，A页面的列表删除事件交互的功能实现只依赖delete.js。当A页面呈现的时候，可以模块化加载shiro.js，edit.js，delete.js这三个资源文件，但是这样加载明显不是最优最小化加载。在A页面只需要实现展示功能时仅可以加载shiro.js，这样才达到最优最小化加载。而在用户点击文本输入框时，可以认为A页面需要实现输入框编辑交互的功能，那么此时可以加载edit.js，在用户点击列表删除按钮时，可以认为A页面需要实现列表删除事件交互的功能，此时可以加载delete.js，这样就实现了，按照用户的需求而加载，实现了最优最小化加载，一次加载的资源文件较少，用时也较少，提高了加载的效率。本发明实施例中，一个页面功能中的交互事件依赖资源文件可以被监测，一旦监测到加载过了某个资源文件，就将加载的资源存储为缓存，那么在后期使用时，可以直接调用缓存，而不需要在重新加载，也减少了页面在下一次加载时的时间。

本发明实施例中，一个脚本文件在运行时，可能会对另一个或多个其他脚本文件具有依赖性，也就是运行一个脚本文件时，需要一个或多个其他脚本文件已经加载。客户端在对第一页面进行加载时，只加载部分页面资源，事先建立各个功能的页面所需要的加载的资源之间的依赖关系。例如，一个功能页面所要实现的功能以页面上存在的页面组件来标识，该依赖关系包括页面组件的标识，及与页面组件的标识对应的页面组件逻辑，页面组件逻辑对应部分JS文件和CSS文件。当有触发事件发生，例如，用户登录网络管理系统，客户端就可以检测到用户所进行的触发操作，该触发操作用于请求调用某个或某些目标页面组件。例如用户对页面中预设按钮的点击操作，预设按钮可以对应一个目标页面组件，也可以对应多个目标页面，具体按钮与页面组件的对应关系可以根据实际需求设置，此处不作限定。

加载时，根据用户进行的触发操作，在脚本文件中查找与触发操作对应的目标页面组件的组件标识，例如，目标页面组件为页面组件A，则在脚本文件查到页面组件A对应的组件标识为c.a,，或者是其他形式，此处不作限定。查找到组件标识后，运行与组件标识对应的页面组件逻辑，以加载该目标页面组件。运行页面组件逻辑包括加载目标页面组件所需的资源文件，例如JS文件和CSS文件，实现第一页面资源的加载。

本发明实施例中，客户端在输出加载后的第一页面之前，还可以确定第一页面是否不存在依赖项，以确定是否继续加载第一页面所需要的资源。其中，依赖项可以用于指示第一页面有区域还需要加载关联资源。可能的实施方式中，客户端首先确定得到的第一页面的每个区域是否存在依赖项，若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的关联资源，将获取的关联资源加载在第一页面中对应的区域，以完成对第一页面的加载。

可能的实施方式中，客户端确定得到的所述第一页面的每个区域是否存在依赖项可以包括：遍历第一页面的每个区域对应的每个页面组件的每个组件标识，其中，一个区域对应一个页面组件或多个页面组件。本发明实施例可以事先建立一个标识队列，用于存放组件标识，及组件标识与组件的映射关系，若任意一个组件标识在标识队列中存在，且任意一个组件标识存在对应的依赖关系，则确定该组件和组件对应队列中的映射关系存在依赖项。若任意一个组件标识在组件队列中不存在或者组件已经加载过，则可以确定第一页面的部分页面资源全部加载完成。

本发明实施例中，客户端在完成对所述第一页面的加载之后，用户还可能在第一页面上进行操作，以请求访问第一页面的子页面，也可以称为目标页面。此时，客户端同样可以检测用户在所述第一页面上进行的触发操作，该触发操作用于请求调用目标页面。客户端可以根据触发操作，从存储的资源中查找与所述目标页面对应的目标资源，加载所查找的目标资源，以得到目标页面。其中，目标资源包括第二样本视图和至少一个文本信息，第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。关于此部分的实现与上述客户端加载第一页面的方式相似，为避免重复累赘，这里就不详细介绍了。

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

首先根据网络管理系统所要实现的功能，将功能模块划分为多个模块，一个功能模块的实现可以依赖一个脚本文件的运行。根据每个功能模块要实现的功能，事先建立配置文件，即每个功能模块对应的脚本文件运行时需要加载的资源库、页面组件，控件之间的映射关系，所需要依赖的资源之间的依赖关系。例如，A页面中的A1组件中的A11控件所依赖的资源文件为edit.js，A页面中的A2组件中的A12控件所依赖的资源文件为delete.js，那么映射关系可以是A页面的标识、A1组件的ID、A11控件的ID与edit.js之间的对应关系，同样地，也包括A页面的标识、A2组件的ID、A12控件的ID与delete.js之间的对应关系。以上仅是举例进行示意，不代表真实的情况。实际中，如果映射关系中所包括的元素，例如页面组件、控件或是资源文件有发生改变的，则更新映射关系，尽量保证网络管理系统中库、页面组件、控件依赖关系的正确性。

在对页面进行加载时，客户端可以一直监听网络管理系统中是否有触发事件发生。例如，网络管理系统启动时，可以认为有触发事件发生，当用户在网络管理系统的页面进行操作，例如点击操作，可以认为是有触发事件发生。而本发明实施例中，客户端对页面的加载是基于检测到触发事件才加载，以尽量减轻客户端的负担。

当有触发事件发生，需要加载页面时，或者需要加载页面某个功能模块时，客户端可以根据配置文件实现相应功能模块的加载。例如，用户点击文本输入框时，可以认为A页面需要实现输入框编辑交互的功能，那么此时可以加载edit.js，在用户点击列表删除按钮时，可以认为A页面需要实现列表删除事件交互的功能，此时可以加载delete.js，以实现按需加载，实现了最优最小化加载，而不是全部加载，节约了加载所需时长，提高了加载效率，页面较快地显示，提升了用户体验。

现有技术中，采用单线程加载机制加载JS文件、CSS文件或SASS文件等，在某种情况下，例如网络不好的情况下，JS文件已加载完成，但是CSS文件和SASS文件无法加载，就可能导致加载得到的页面会出现空白、显示错乱等现象，从而无法继续加载资源文件。如果先加载CSS文件，JS文件无法后续进行加载，有可能导致页面崩溃，鼠标一直处于待加载状态，也就是我们常见的一直是圆圈标识，或者页面报错等现象。而在本发明实施例中，由于模块化加载资源文件，且是按需加载资源文件，在加载时，可以异步并行加载多个模块化的资源文件，实现异步并行加载资源文件。一种实施方式中，本发明实施例可以事先建立发明了容器，例如store，store容器中可以存储加载的依赖性或数据的快照，每个依赖性或数据的快照可以通过设置state标识来区分。在HTTP请求加载超过2秒钟时，自动通知store容器获最新一次state标识，从而得到最新一次的依赖项或数据的快照，间接实现离线机制，实现本地快速加载文件或数据的功能。对于同一个页面来说，现有技术中，页面加载资源后到渲染显示可能需要的时长是1-2分钟，而本发明实施例中，页面加载资源后到渲染显示可能需要的时长是1.2～1.9秒，显然提高了加载效率。

下面介绍本发明实施例所提供的设备。

请参见图2，基于同一发明构思，本发明实施例提供一种页面加载设备，所述页面加载设备可以是如前所述的客户端，所述页面加载设备可以包括接收模块201、加载模块202和输出模块203。

其中，接收模块201可以用于接收第一访问请求消息，第一访问请求消息用于请求访问第一页面。加载模块202可以用于对第一页面的部分页面资源进行加载，其中，部分页面资源包括第一样本视图和至少一个文本信息，第一样本视图被划分为至少一个区域，一个区域对应一个文本信息。输出模块203可以用于输出加载后的第一页面。

可选的，所述页面加载设备还包括确定模块和获取模块；

其中，确定模块可以用于：在输出加载后的第一页面之前，确定得到的第一页面的每个区域是否存在依赖项，依赖项用于指示第一页面有区域还需要加载关联资源。

获取模块可以用于：若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的关联资源。

加载模块还可以用于：将获取的关联资源加载在第一页面中对应的区域，以完成对第一页面的加载。

可选的，所述页面加载设备还包括创建模块，创建模块可以用于在接收第一访问请求消息之前，针对任意一个页面的页面组件创建脚本文件，脚本文件包括至少一个页面组件的组件标识，并定义与组件标识对应的页面组件逻辑。

其中，确定模块用于确定得到的第一页面的每个区域是否存在依赖项，包括：

遍历第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若任意一个组件标识在存储的脚本文件中存在，且任意一个组件标识存在对应的依赖资源，则确定与任意一个组件对应的区域存在依赖项。

可选的，所述页面加载设备还包括检测模块和查找模块，其中，检测模块可以用于在完成对第一页面的加载之后，检测用户在第一页面上进行的触发操作，触发操作用于请求调用目标页面；

查找模块可以用于根据触发操作，从存储的资源中查找与目标页面对应的目标资源。

加载模块还可以用于：加载所查找的目标资源，以得到目标页面；其中，目标资源包括第二样本视图和至少一个文本信息，第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，所述页面加载设备还包括填充模块、渲染模块，其中，

获取模块还可以用于：在输出加载后的第一页面之前获取第一页面的各个区域所需填充的数据；

填充模块可以用于：将获取的数据填充在存储的数据模型后，在第一页面上加载填充后的数据模型；

渲染模块可以用于：对加载了填充后的数据模型的第一页面进行渲染，以输出渲染后的第一页面。

该页面加载设备可以用于执行上述图1所述的方法，因此，对于该设备中的各单元所实现的功能等，可参考如前方法部分的描述，不多赘述。

请参见图3，基于同一发明构思，本发明实施例还提供了一种页面加载设备，该页面加载设备与图2所示的页面加载设备可以是同一页面加载设备。该页面加载设备可以包括存储器301和处理器302。其中，存储器301可以通过总线300与处理器302相连接(图3以此为例)，或者也可以通过专门的连接线与处理器302连接。

其中，存储器301可以用于存储指令。处理器302可以用于执行存储器301存储的指令，以接收第一访问请求消息，对所述第一页面的部分页面资源进行加载，输出加载后的所述第一页面。其中，部分页面资源包括第一样本视图和至少一个文本信息，第一样本视图被划分为至少一个区域，一个区域对应一个文本信息，第一访问请求消息用于请求访问第一页面，

可选的，处理器302还可以用于：

在输出加载后的第一页面之前，确定得到的第一页面的每个区域是否存在依赖项，依赖项用于指示第一页面有区域还需要加载关联资源；

若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的关联资源；

将获取的关联资源加载在所述第一页面中对应的区域，以完成对第一页面的加载。

可选的，处理器302还可以用于：

在接收第一访问请求消息之前，针对任意一个页面的页面组件创建脚本文件，脚本文件包括至少一个页面组件的组件标识，并定义与组件标识对应的页面组件逻辑；

其中，处理器302用于确定得到的第一页面的每个区域是否存在依赖项，包括：

遍历第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若任意一个组件标识在存储的所述脚本文件中存在，且任意一个组件标识存在对应的依赖资源，则确定与任意一个组件对应的区域存在依赖项。

可选的，处理器302还可以用于：

在完成对第一页面的加载之后，检测用户在第一页面上进行的触发操作，触发操作用于请求调用目标页面；

根据触发操作，从存储的资源中查找与目标页面对应的目标资源；

加载所查找的目标资源，以得到目标页面；其中，目标资源包括第二样本视图和至少一个文本信息，第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，处理器302还可以用于：

在输出加载后的第一页面之前，获取第一页面的各个区域所需填充的数据；

将获取的数据填充在存储的数据模型后，在第一页面上加载填充后的数据模型；

对加载了填充后的数据模型的第一页面进行渲染，以输出渲染后的第一页面。

其中，图2中的接收模块201、加载模块202和输出模块203所对应的实体设备均可以是图3中的处理器302。

本发明实施例中，在加载第一页面时，只加载第一页面的部分页面资源，其中，部分页面资源包括被第一样本视图和文本信息，第一样本视图被划分为至少一个区域，在每个区域对应的位置可以先只加载文本信息，这样就避免了对第一页面所需要的资源全部进行加载，提高了页面加载的效率，使第一页面能够快速显示，提升用户体验。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

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

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

具体来讲，本申请实施例中的页面加载方法对应的计算机程序指令可以被存储在光盘，硬盘，通用串行总线闪存盘等存储介质上，当存储介质中的与页面加载方法对应的计算机程序指令被一电子设备读取或被执行时，包括：

接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出加载后的所述第一页面。

可选的，所述存储介质中还存储有另外一些计算机指令，这些计算机指令在输出加载后的所述第一页面之前被执行，被执行时可以包括：

确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

可选的，所述存储介质中还存储有另外一些计算机指令，这些计算机指令在接收第一访问请求消息之前被执行，被执行时可以包括：

针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

所述存储介质中存储的与确定得到的所述第一页面的每个区域是否存在依赖项对应的计算机指令，在被执行时，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

可选的，所述存储介质中还存储有另外一些计算机指令，这些计算机指令在完成对所述第一页面的加载之后被执行，被执行时可以包括：

检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

可选的，所述存储介质中还存储有另外一些计算机指令，这些计算机指令在输出加载后的所述第一页面之前被执行，被执行时可以包括：

获取所述第一页面的各个区域所需填充的数据；

将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。

以上所述，以上实施例仅用以对本申请的技术方案进行了详细介绍，显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

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

接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出加载后的所述第一页面。

2.如权利要求1所述的方法，其特征在于，在输出加载后的所述第一页面之前，还包括：

确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

3.如权利要求2所述的方法，其特征在于，在接收第一访问请求消息之前，还包括：

针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

确定得到的所述第一页面的每个区域是否存在依赖项，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

4.如权利要求2所述的方法，其特征在于，在完成对所述第一页面的加载之后，还包括：

检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

5.如权利要求1所述的方法，其特征在于，在输出加载后的所述第一页面之前，还包括：

获取所述第一页面的各个区域所需填充的数据；

将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。

6.一种页面加载设备，其特征在于，包括：

接收模块，用于接收第一访问请求消息，所述第一访问请求消息用于请求访问第一页面；

加载模块，用于对所述第一页面的部分页面资源进行加载；其中，所述部分页面资源包括第一样本视图和至少一个文本信息，所述第一样本视图被划分为至少一个区域，一个区域对应一个文本信息；

输出模块，用于输出加载后的所述第一页面。

7.如权利要求6所述的设备，其特征在于，还包括确定模块、获取模块；

所述确定模块用于：在输出加载后的所述第一页面之前，确定得到的所述第一页面的每个区域是否存在依赖项，所述依赖项用于指示所述第一页面有区域还需要加载关联资源；

所述获取模块用于：若确定有区域存在依赖项，则获取存在依赖项的区域需要加载的所述关联资源；

所述加载模块还用于：将获取的所述关联资源加载在所述第一页面中对应的区域，以完成对所述第一页面的加载。

8.如权利要求7所述的设备，其特征在于，还包括创建模块，所述创建模块用于在接收第一访问请求消息之前，针对任意一个页面的页面组件创建脚本文件，所述脚本文件包括至少一个页面组件的组件标识，并定义与所述组件标识对应的页面组件逻辑；

其中，所述确定模块用于确定得到的所述第一页面的每个区域是否存在依赖项，包括：

遍历所述第一页面的每个区域对应的每个组件标识；其中，一个区域对应一个组件标识；

若所述任意一个组件标识在存储的所述脚本文件中存在，且所述任意一个组件标识存在对应的依赖资源，则确定与所述任意一个组件对应的区域存在依赖项。

9.如权利要求7所述的设备，其特征在于，还包括检测模块、查找模块，其中，所述检测模块用于在完成对所述第一页面的加载之后，检测用户在所述第一页面上进行的触发操作，所述触发操作用于请求调用目标页面；

所述查找模块用于根据所述触发操作，从存储的资源中查找与所述目标页面对应的目标资源；

所述加载模块还用于：加载所查找的目标资源，以得到所述目标页面；其中，所述目标资源包括第二样本视图和至少一个文本信息，所述第二样本视图被划分为至少一个区域，一个区域对应一个文本信息。

10.如权利要求6所述的设备，其特征在于，还包括填充模块、渲染模块，其中，所述获取模块还用于：在输出加载后的所述第一页面之前，获取所述第一页面的各个区域所需填充的数据；

所述填充模块用于：将获取的数据填充在存储的数据模型后，在所述第一页面上加载填充后的数据模型；

所述渲染模块用于：对加载了所述填充后的数据模型的第一页面进行渲染，以输出渲染后的所述第一页面。