页面加载方法、客户端及系统与流程

本申请涉及移动通信技术领域，更为具体地，涉及一种页面加载方法、客户端及系统。

背景技术：

在移动应用程序(App，Application)开发领域，主要有以下几种开发模式：本地应用模式(Native App)、混合应用模式(Hybrid App)、基于网页的应用模式(WebApp)。Hybrid App综合了Native App和WebApp的优势，具有更新速度快、交互体验好、跨平台等优点，因而被广泛应用在移动终端中。该模式中HTML5的页面被嵌入到NatvieApp的网络视图(webview)中，并将网络视图的网页以本地视图(Native)的页面形式进行显示。但是，被嵌入到HybridApp的HTML5页面的应用性能较差，其页面加载速度相对Native App较慢，这是因为Native实现方式中对页面所需静态资源文件的加载都是本地化获取，不通过网络请求获取，因此加载速度快，而Hybrid App的HTML5页面所需静态资源文件是需要通过网络请求获取，增加了请求延迟，也就影响了页面加载速度，因此加载速度较慢。例如，在Hybrid架构下的移动应用中存在着许多HTML5页面，这些页面中会引用大量的静态资源文件，如JS(JavaScript)、CSS(Cascading Style Sheets，级联样式表)文件。加载这些HTML5页面，就会引发多个HTTP请求，例如某些页面中未经优化的页面会发送出多个如至少8个HTTP请求，而且每次页面刷新都需要重新进行请求，造成页面的加载性能低下。

现有技术存在一种针对混合Hybrid架构下页面加载方法，该方法对静态资源文件的加载是通过URL(Uniform Resource Locator，统一资源定位符)拦截机制实现，主要是客户端中设置的拦截模块检测到客户端向网络侧请求获取静态资源文件的HTTP请求后，拦截HTTP请求，并向客户端本地请求已缓存的静态资源文件。

但是，现有技术方法的这种拦截机制并非在所有的平台和系统下都生效，只能适应部分情形下的加载性能优化，使得应用范围较小，并不是一种完善的解决方案。

技术实现要素：

鉴于上述，本申请提出了一种页面加载方法、客户端及系统，能克服平台和系统限制，使得各种平台和系统都能适用该方法提升页面加载性能，应用更为广泛。

本申请提供的技术方案如下：

根据本申请的一个方面，提供一种页面加载方法，包括：根据页面加载请求加载页面；通过加载器解析出所加载的页面内容中所需的静态资源文件的引用地址；根据所述静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件。

可选的，所述根据静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载页面内容中所需的静态资源文件包括：当客户端本地静态资源缓存区存储有加载页面内容中所需的静态资源文件时，根据静态资源文件的引用地址，调用静态资源应用程序接口从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件。

可选的，所述根据静态资源文件的引用地址，调用静态资源应用程序接口从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件包括：向静态资源应用程序接口输入所述静态资源文件的引用地址，由所述静态资源应用程序接口根据所述引用地址从客户端本地静态资源缓存区获取所述页面内容中所需的静态资源文件后输出。

可选的，所述客户端本地静态资源缓存区预先存储静态资源文件。

可选的，所述静态资源文件通过增量打包的方式发送到客户端本地静态资源缓存区进行存储和更新。

可选的，所述页面内容中，通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中，通过分析依赖列表确定各静态资源文件的引用地址。

可选的，所述方法还包括，当从客户端本地静态资源缓存区未加载到页面内容中所需的静态资源文件时，加载器从网络侧加载页面内容所需的静态资源文件，并存储到客户端本地静态资源缓存区。

可选的，所述页面为HTML5页面，和/或，所述根据页面加载请求加载页面为在混合应用模式下根据页面加载请求加载页面。

根据本申请的另一个方面，提供一种页面加载的客户端，包括：加载单元，用于根据页面加载请求加载页面；加载器，用于解析出加载单元所加载的页面内容中所需的静态资源文件的引用地址，根据所述静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件。

可选的，客户端还包括：静态资源应用程序接口，用于被所述加载器调用，当客户端存储有加载页面内容中所需的静态资源文件时，根据静态资源文件的引用地址，从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件。

可选的，客户端还包括：存储单元，用于在客户端设置本地静态资源缓存区，在本地静态资源缓存区预先存储静态资源文件。

可选的，所述加载单元是根据页面加载请求加载HTML5页面，和/或，所述加载单元是在混合应用模式下根据页面加载请求加载页面。

可选的，所述加载器从客户端本地静态资源缓存区未加载到页面内容中所需的静态资源文件时，从网络侧加载所述页面内容所需的静态资源文件，并存储到客户端本地静态资源缓存区。

根据本申请的另一个方面，提供一种提升页面加载系统，包括：客户端，用于根据页面加载请求加载页面，通过加载器解析出所加载的页面内容中所需的静态资源文件的引用地址，根据所述静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载所述页面内容中所需的静态资源文件，当未加载到页面内容中所需的静态资源文件后，向网络侧服务器请求加载所述页面内容所需的静态资源文件；服务器，用于向所述客户端下发所请求的页面内容所需的静态资源文件。

可选的，所述客户端是根据页面加载请求加载HTML5页面，和/或，所述客户端是在混合应用模式下根据页面加载请求加载页面。

可选的，所述服务器包括：页面修改单元，用于在页面内容中，通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中；资源下发单元，用于在所述客户端的加载器从客户端本地静态资源缓存区未加载到页面内容中所需的静态资源文件时，根据客户端的请求向客户端下发所请求的静态资源文件；所述客户端的加载器通过分析页面内容中的依赖列表确定各静态资源文件的引用地址。

可选的，所述客户端通过加载器从所述服务器加载页面内容所需的静态资源文件后，还存储到客户端本地静态资源缓存区。

可选的，所述客户端根据页面加载请求是从客户端自身加载预先缓存的页面，或者从网络侧服务器加载页面。

从上述技术方案可以发现，本申请方案是设置了一个加载器，在根据页面加载请求加载页面时，通过设置的加载器解析出加载的页面内容中所需的静态资源文件的引用地址，那么就可以根据静态资源文件的引用地址，直接选择性地从客户端本地静态资源缓存区加载页面内容所需的静态资源文件。因为是通过加载器从客户端本地加载静态资源文件，那么就不需要像现有技术方法那样拦截向网络侧请求获取静态资源的HTTP请求，也就避免了现有拦截机制由于平台和操作系统的限制导致有些情形无法适用的问题，使得各种平台和系统都能适用该方法提升页面加载性能，应用更为广泛。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1是本申请页面加载方法的第一流程示意图；

图2是本申请页面加载方法的第二流程示意图；

图3是本申请的客户端结构示意图；

图4是本申请的系统结构示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。

本申请提出了一种页面加载方法，能克服平台和系统限制，使得各种平台和系统都能适用该方法提升页面加载性能，应用更为广泛。

下面将参照附图描述本申请的各个实施例。

图1是本申请页面加载方法的第一流程示意图。如图1所示，包括：

101、根据页面加载请求加载页面。

102、通过加载器解析出所加载的页面内容中所需的静态资源文件的引用地址。

本申请中，设置了一个加载器，该步骤通过加载器解析出页面内容所需的静态资源文件的引用地址。

在页面内容中，通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中，通过分析依赖列表确定各静态资源文件的引用地址。

103、根据静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载所述页面内容所需的静态资源文件。

本申请中，设置了一个静态资源应用程序接口，该步骤是根据静态资源文件的引用地址，调用静态资源应用程序接口从客户端本地静态资源缓存区加载页面内容所需的静态资源文件。

需说明的是，上述所说的页面可以是HTML5页面。上述根据页面加载请求加载页面可以是在混合应用模式下根据页面加载请求加载页面。

从上述内容可以看出，本申请方案是设置了一个加载器，在根据页面加载请求加载页面时，通过设置的加载器解析出加载的页面内容所需的静态资源文件的引用地址，那么就可以根据静态资源文件的引用地址，直接选择性地从客户端本地静态资源缓存区加载页面内容所需的静态资源文件。因为是通过加载器从客户端本地加载静态资源文件，那么就不需要像现有技术方法那样拦截向网络侧请求获取静态资源的HTTP请求，也就避免了现有拦截机制由于平台和操作系统的限制导致有些情形无法适用的问题，使得各种平台和系统都能适用该方法提升页面加载性能，应用更为广泛。

以下进一步更详细介绍本申请技术方案。

本申请方案在客户端设置了加载器(以下称为“前端模块加载器”)和静态资源应用程序接口(以下称为“Hybrid API”)，并在客户端预先存储HTML5页面静态资源文件，借助前端模块加载器和Hybrid API来加载客户端本地静态资源文件(如JS、CSS文件等)，从而无需在Hybrid架构层面进行URL拦截，因此可以规避拦截机制由于平台和操作系统限制在部分终端机型无法生效的问题，可以实现终端各种机型的适用，即各种情形都可以适用，从而扩大了本方案的应用范围。

图2是本申请页面加载方法的第二流程示意图。该页面是以HTML5页面举例说明但不局限于此。如图2所示，包括：

201、在客户端本地静态资源缓存区预先存储HTML5页面静态资源文件。

本申请预先将HTML5页面应用所依赖的静态资源文件(JS、CSS等)通过增量打包的方式发送到移动终端客户端上进行存储和更新，例如可以存储到客户端静态资源缓存区，使得后续可以直接从客户端加载HTML5页面所需的静态资源文件。现有技术方法的拦截机制是拦截HTTP网络请求，而本申请方 案是通过静态资源预置包的方式将静态资源文件预先存储到客户端上，无需向网络侧发送网络请求，也就无需进行拦截。

上述增量打包的处理过程如下：将要发布的静态资源文件的文件包进行压缩和合并，对文件包内容进行md5(Message Digest Algorithm5，消息摘要算法第五版)编码，生成url－md5文件映射表，将本次与上次发布生成的url－md5文件映射表进行对比，得到本次发布更新的文件列表，根据更新的文件列表生成增量包，并发送到客户端的静态资源缓存区。

202、客户端在进行HTML5页面加载时，通过前端模块加载器解析出加载的HTML5页面内容所需的静态资源文件的引用地址。

需要说明的是，该步骤进行HTML5页面加载，可以是从网络侧加载HTML5页面，也可以是从客户端加载预先缓存的HTML5页面。本申请优选是将HTML5网页内容提前缓存在客户端上，从客户端加载预先缓存的HTML5页面，这样无需经过网络请求既可加载，可以加快加载速度。以从客户端加载缓存的HTML5页面为例，当用户使用客户端进行网页浏览时，例如点击相应链接想进入某个HTML5网页页面时，客户端响应该点击操作，直接从客户端加载对应的预先缓存的HTML5页面内容。如果是从网络侧加载HTML5页面的方式，那么此时是向网络侧服务器发送相应的页面加载请求，从网络侧接收并加载所述对应HTML5网页的页面内容。

在加载HTML5页面内容时，通过前端模块加载器解析出加载的HTML5页面内容所需的静态资源文件的引用地址。

本申请方案设置了前端模块加载器，使用前端模块加载器解析出加载的HTML5页面内容所需的静态资源文件的引用地址后，根据引用地址加载HTML5网页所需的静态资源文件。

本申请方案中，对HTML5页面的内容格式进行了修改，即在HTML5页面内容代码中，不再将所有的静态资源文件如JS、CSS的引用地址都写在页面上，而是只需要写一个入口文件作为引用，例如如下描述：＜script src＝”http：//style.c.aliimg.com/app/wap/start.js”＞。而其他的静态资源文件引用地址采用模块化的方式声明在各自的依赖列表中，例如如下描述：

也就是说，本申请通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中，通过分析依赖列表确定各静态资源文件的引用地址。本申请通过写一个入口文件的方式，区别于现有技术URL拦截方式下需要列出许多JS、CSS引用地址的方式。

具体的，以代码中的start.js文件举例，它的入口文件内容类似如以下描述：

其中[]中的“path/module1”，“path/module2”等就是start.js所依赖的其它静态资源文件的路径。

那么，前端模块加载器根据静态资源文件中的依赖列表可以获取各文件的依赖关系，从而解析出各模块的依赖关系。

上述说的依赖关系，可以把模型简化为一维数组，例如以上所说的start.js文件，它的依赖关系数据结构的存储描述为：

从上面所描述的数据结构可以看出，start.js依赖了模块module1、2、3这三个模块，而模块module1又依赖了模块module5、6...。

通过上述描述可以发现，虽然页面代码上只写了入口文件start.js，但是通过分析依赖列表，可以递归找到页面加载所需要的其它静态资源文件并加载。

203、根据静态资源文件的引用地址，前端模块加载器调用Hybrid API从客户端本地静态资源缓存区加载HTML5页面内容所需的静态资源文件。

本申请方案设置一个静态资源应用程序接口HybridAPI–loadAssets。这个Hybrid API完成的功能是供前端模块加载器调用，Hybrid API的输入参数是静态资源的引用地址，输出是从客户端本地静态资源缓存区读取到的静态资源文件的内容。也就是说，前端模块加载器向Hybrid API输入所述静态资源文件的引用地址，由Hybrid API根据引用地址从客户端本地静态资源缓存区获取HTML5页面内容所需的静态资源文件后输出。

需说明的是，如果无法从客户端本地静态资源缓存区读取到静态资源文件的内容，如路径不存在或静态资源缓存区没有所需静态资源文件，则发送网络请求向网络侧请求获取静态资源文件，并将获取的静态资源文件缓存到客户端静态资源缓存区，供下次加载使用。

可以发现，本申请方案实现了在Hybrid架构下对HTML5页面静态资源加载的优化，避免了现有技术采用URL拦截等机制所无法避免的机型受限的问题，使得各种平台和系统都能适用该方法提升HTML5页面加载性能，应用更为广泛；也充分利用Hybrid架构的能力加载客户端本地的静态资源文件如JS、CSS文件，加快了加载速度，提升了HTML5页面加载性能，从而也提升了页面的渲染速度。

上述详细介绍了本申请的方法流程，相应的，本申请提供一种客户端装置和系统。

图3是本申请的客户端结构示意图。

如图3所示，客户端31包括：加载单元301、加载器302。

加载单元301，用于根据页面加载请求加载页面。

加载器302，用于解析出加载单元301所加载的页面内容中所需的静态资源文件的引用地址，根据所述静态资源文件的引用地址，选择性从客户端本地静态资源缓存区加载所述页面内容所需的静态资源文件。

进一步的，客户端还包括：静态资源应用程序接口303。

静态资源应用程序接口303，用于被所述加载器402调用，当客户端存储有加载页面内容中所需的静态资源文件时，根据静态资源文件的引用地址，从客户端本地静态资源缓存区加载HTML5页面内容中所需的静态资源文件。

具体的，当客户端本地静态资源缓存区存储有加载页面内容中所需的静态资源文件时，加载器302根据静态资源文件的引用地址，调用静态资源应用程序接口303从客户端本地静态资源缓存区加载页面内容中所需的静态资源文件。

具体的，加载器302向静态资源应用程序接口303输入所述静态资源文件的引用地址，由所述静态资源应用程序接口303根据所述引用地址从客户端本地静态资源缓存区获取HTML5页面内容中所需的静态资源文件后输出。

进一步的，客户端还包括：存储单元(图中未示出)。

存储单元，用于在客户端设置本地静态资源缓存区，在本地静态资源缓存区预先存储静态资源文件。

进一步的，所述加载器302从客户端本地静态资源缓存区未加载到页面内容中所需的静态资源文件时，从网络侧加载页面内容所需的静态资源文件，并存储到客户端本地静态资源缓存区。

进一步的，上述所说的页面可以是HTML5页面，所述加载单元301是根据页面加载请求加载HTML5页面，和/或，所述加载单元301是在混合应用模式下根据页面加载请求加载页面。

其中，所述HTML5页面静态资源文件通过增量打包的方式发送到客户端本地静态资源缓存区进行存储和更新。

需说明的是，所述HTML5页面内容中，通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中，通过分析依赖列表确定各静态资源文件的引用地址。

上述各单元模块之间的交互关系，可以参见前面方法流程图的描述，此处不再赘述。

图4是本申请的系统结构示意图。

如图4所示，系统包括：客户端41、服务器42。

客户端41，用于根据页面加载请求加载页面，通过加载器解析出所加载的页面内容中所需的静态资源文件的引用地址，根据所述静态资源文件的引用地址，选择性地从客户端本地静态资源缓存区加载页面内容所需的静态资源文件，当未加载到页面内容中所需的静态资源文件时，向网络侧服务器请求加载页面内容所需的静态资源文件。

服务器42，用于向所述客户端41下发所请求的页面内容所需的静态资源文件。

进一步的，上述所说的页面可以是HTML5页面，所述客户端是根据页面加载请求加载HTML5页面，和/或，所述客户端是在混合应用模式下根据页面加载请求加载页面。

需要说明的是，客户端41进行HTML5页面加载，可以是从网络侧服务器42加载HTML5页面，也可以是从客户端41自身加载预先缓存的HTML5页面。即所述客户端41根据页面加载请求是从客户端41自身加载预先缓存的HTML5页面，或者从网络侧服务器42加载HTML5页面。本申请优选是将HTML5网页内容也提前缓存在客户端41上，这样无需经过网络请求既可加载，可以加快加载速度。

进一步的，所述服务器42包括：页面修改单元、资源下发单元(图中未示出)。

页面修改单元，用于在HTML5页面内容中，通过入口文件表明静态资源文件的引用地址，在入口文件中将静态资源文件的引用地址采用模块化方式声明在各自的依赖列表中；

资源下发单元，用于在所述客户端41的加载器从客户端本地静态资源缓存区未加载到HTML5页面内容中所需的静态资源文件后，根据客户端41的请求向客户端41下发所请求的静态资源文件；

所述客户端41的加载器通过分析HTML5页面内容中的依赖列表确定各静态资源文件的引用地址。

进一步的，所述客户端41通过加载器从所述服务器42加载HTML5页面内容所需的静态资源文件后，还存储到客户端本地静态资源缓存区。

客户端41的具体结构和功能描述，参见图3的描述，此处不再赘述。

综上所述，本申请方案是设置了一个加载器，在根据页面加载请求加载HTML5页面时，通过设置的加载器解析出加载的HTML5页面内容所需的静态资源文件的引用地址，那么就可以根据静态资源文件的引用地址，直接从客户端本地静态资源缓存区加载HTML5页面内容所需的静态资源文件。因为是通过加载器从客户端本地加载静态资源文件，那么就不需要像现有技术方法那样拦截向网络侧请求获取静态资源的HTTP请求，也就避免了现有拦截机制由 于平台和操作系统的限制导致有些情形无法适用的问题，使得各种平台和系统都能适用该方法提升HTML5页面加载性能，应用更为广泛。

此外，典型地，本申请所述的移动终端可为各种具有蓝牙功能的手持终端设备，例如具有蓝牙功能的手机、个人数字助理(PDA)。

此外，根据申请的方法还可以被实现为由移动终端中的处理器(比如CPU)执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本申请的方法中限定的上述功能。

此外，根据本申请的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本申请的范围。

尽管前面公开的内容示出了本申请的示例性实施例，但是应当注意，在不背离权利要求限定的本申请的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

虽然如上参照图描述了根据本申请的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本申请所提出的各个实施例，还可以在不脱离本申请内容的基础上做出各种改进。