CN109101564A - 一种页面资源同时加载的方法、装置和电子设备 - Google Patents

Abstract

本申请公开了一种页面资源同时加载的方法、装置和电子设备，该方法包括：拦截页面加载请求；确定与所述页面加载请求对应的HTML文件；基于所述HTML文件，确定存储所述HTML文件的第一离线数据包；如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

Description

一种页面资源同时加载的方法、装置和电子设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面资源同时加载的方法、装置和电子设备。

背景技术

Hybrid App(混合模式移动应用)是介于web-app、native-app之间的一种app开发模式。在Hybrid App中，当多个HTML页面需要同时从离线包加载时，在目前的技术应用中，是首先基于页面加载请求判断需要加载的HTML文件内容是否在存储在本地，如果可以在本地找到，则将页面加载请求中的域名变换为对应的虚拟域，然后将该虚拟域对应的所有静态资源文件(包括HTML文件和JS/CSS文件)从本地离线包加载，而不会访问服务器。

但是，仅仅通过判断HTML文件在离线包就断定对应页面的JS/CSS文件也在离线包，存在导致页面访问错误的情况。具体而言，如果HTML文件在离线包，但与该HTML文件对应需要加载的JS/CSS文件不在离线包时，JS/CSS请求的域名会被修改为一个不存在的虚拟域，之后，则会发起访问虚拟域服务器请求。由于虚拟域服务器不存在，页面访问则会出现错误。

发明内容

本申请实施例提供一种页面资源同时加载的方法、装置和电子设备，以实现HTML文件和JS/CSS文件基于对应的离线包进行加载，避免页面加载错误。

本申请实施例采用下述技术方案：

第一方面，提升了一种页面资源同时加载的方法，该方法包括：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

第二方面，提供了一种页面资源同时加载的装置，该装置包括：

拦截模块，用于拦截页面加载请求；

第一确定模块，用于确定与所述页面加载请求对应的HTML文件；

第二确定模块，用于基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

第三确定模块，用于如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

第四确定模块，用于基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

构建模块，用于如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

第三方面，提供了一种电子设备，该电子设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行以下操作：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

基于同时多个页面加载请求，可以基于对应的HTML文件，确定在本地存储对应HTML文件的第一离线数据包，如果该第一离线数据包存在，则可以基于该第一离线数据包获取对应的HTML文件；对于同时多个基于HTML文件的JS/CSS请求，可以基于与JS/CSS请求对应的JS/CSS文件，确定在本地存储对应JS/CSS文件的第二离线数据包，如果该第二离线数据包存在，则可以基于该第二离线数据包获取对应的JS/CSS文件；由此，基于第一离线数据包可以获取HTML文件，基于第二离线数据包可以获取JS/CSS文件，实现HTML文件和JS/CSS文件基于对应的离线数据包进行加载，从而在同时加载多个页面时，即使同一页面下的HTML文件和JS/CSS文件不在同一离线数据包，也不会导致页面访问出现错误。

附图说明

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

图1为本申请的一个实施例的页面资源同时加载的方法的示意性流程图；

图2是本申请的一个实施例的电子设备的结构示意图；

图3是本申请的一个实施例的页面资源同时加载的装置的结构示意图。

具体实施方式

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

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本申请的一个实施例的页面资源同时加载的方法的示意性流程图。图1所示的方法的执行主体可以但不限于手机、电脑以及其他智能终端。或者图1所示的方法的执行主体还可以是能够执行该方法的客户端本身，例如图1所示的方法由页面资源同时加载的装置执行。

如图1所示，在S101处，拦截页面加载请求。

基于NSURLProtocol可以拦截由NSURLConnection发起的页面加载请求。如果页面加载请求的httpMethod方法为GET方法，则拦截该页面加载请求。

其中，可以通过继承NSURLProtocl并重写关键函数可以实现自定义FusionURLProtocol。

之后，通过方法[NSURLProtocol registerClass:[FusionURLProtocol class]]注册该Protocol，使FusionURLProtocol控制对HTML页面的访问。

具体而言，可以首先判断页面加载请求的httpMethod方法为是否为GET方法，如果不是GET方法，返回值为NO。之后，基于rcanInitWithRequest的请求URL，可以判断页面加载请求需要的页面资源是否可以在离线数据包中找到。

canInitWithRequest是回调函数，可以通过重写NSURLProtocol的回调函数+(BOOL)canInitWithRequest:(NSURLRequest*)request实现。当canInitWithRequest的返回值为YES，则表示拦截页面加载请求，返回值为NO，表示不拦截该页面加载请求，可以访问服务器。

可以调用功能函数loadCachedDataForURL确定页面资源是否可以在离线数据包中找到。loadCachedDataForURL的入参是页面加载请求的URL，返回值是NSData类型，若返回值不为空，表示本地离线数据包存在需要加载的页面资源，之后，canInitWithRequest函数的返回值为YES，表示拦截该页面加载请求。当loadCachedDataForURL的返回值为空时，表示本地离线数据包中不存在需要加载的页面资源，之后，canInitWithRequest函数返回值为NO，不拦截该页面加载请求，从而访问远程服务器加载对应的页面资源。

需要说明的是，页面加载请求具有多个，页面加载请求可以是基于HTML5.0页面加载请求，在此，本实施例不作具体的限定。

在S102处，确定与页面加载请求对应的HTML文件。

基于页面加载请求，可以确定该页面加载请求需要加载的HTML文件。需要加载的HTML文件可以同时具有多个。HTML(Hyper Text Markup Language，超文本标记语言)是用来描述网页的一种语言，其定义了网页的结构。

在S103处，基于HTML文件，通过正则匹配确定存储HTML文件的第一离线数据包。

对于需要同时加载的任一HTML文件，第一离线数据包可以基于正则匹配的方式获取。具体的，可以通过单例对象访问函数H5CacheList，通过正则匹配可获取URL对应的离线包。H5CacheList实现了URL和第一离线数据包的对应关系，其中，每一项结构示例性的如下所示："http://h5.m.taobao.com/trip/holiday/.+":"h5-holiday"，其表示页面加载请求中的URL链接为：“http://h5.m.taobao.com/trip/holiday/search/search.html”，通过正则匹配则会映射到h5-holiday第一离线数据包。

需要说明的是，正则表达式可以匹配页面加载请求与对应的第一离线数据包的名称信息。由该第一离线数据包的名称信息可以确定该第一离线数据包。

在S104处，如果第一离线数据包存在，则基于HTML文件的JS/CSS请求，确定与JS/CSS请求对应的JS/CSS文件。

基于对同时加载的多个HTML文件进行解析后，可以同时生成多个JS/CSS请求。对于任一JS/CSS请求，均可以确定与该JS/CSS请求对应的JS/CSS文件。

其中，本地存在第一离线数据包时，可以从第一离线数据包中确定与页面加载请求对应的HTML文件。获取该HTML文件后，对该HTML文件进行分析，可以解析出不同的JS/CSS请求。

在S105处，基于JS/CSS文件，确定存储JS/CSS文件的第二离线数据包。

基于JS/CSS文件的相关信息，包括名称信息等，可以在本地查找存储该JS/CSS文件的第二离线数据包。

在S106处，如果第二离线数据包存在，则基于HTML文件和JS/CSS文件构建页面加载请求的HTTP响应数据。

如果在本地查找到存储该JS/CSS文件的第二离线数据包，则表示本地存在该第二离线数据包。其中，第一离线数据包与第二离线数据包可以是同一离线数据包，也可以是不同的离线数据包。此时，可以从第二离线数据包中获取对应的JS/CSS文件。基于获取的HTML文件和JS/CSS文件可以构建页面加载请求的HTTP响应数据。

HTTP响应数据包含两部分，一部分是NSHTTPURLResponse，其提供请求资源类型、数据长度和请求的URL，另一部分是数据NSData，代表响应的body内容。重写NSURLProtocol的回调函数:-(void)startLoading，可以实现从第一离线数据包和第二离线数据包加载对应的资源文件，即HTML文件和JS/CSS文件，之后，构建HTTP响应数据返回给浏览器后可以执行渲染页面的操作。

基于同时多个页面加载请求，可以基于对应的HTML文件，确定在本地存储对应HTML文件的第一离线数据包，如果该第一离线数据包存在，则可以基于该第一离线数据包获取对应的HTML文件；对于同时多个基于HTML文件的JS/CSS请求，可以基于与JS/CSS请求对应的JS/CSS文件，确定在本地存储对应JS/CSS文件的第二离线数据包，如果该第二离线数据包存在，则可以基于该第二离线数据包获取对应的JS/CSS文件；由此，基于第一离线数据包可以获取HTML文件，基于第二离线数据包可以获取JS/CSS文件，实现HTML文件和JS/CSS文件基于对应的离线数据包进行加载，从而在同时加载多个页面时，即使同一页面下的HTML文件和JS/CSS文件不在同一离线数据包，也不会导致页面访问出现错误。

为了优化更新离线包逻辑，减少每次更新包的体积，一个第一离线数据包存储与一种业务逻辑类型的页面加载请求对应的HTML文件。一个第一离线数据包可以存储多个HTML文件，例如，一个第一离线数据包可以存储15到20个HTML文件等。为避免第一离线数据包的体积过大，方便更新和降低更新成本，第一离线数据包可以只存储与一种业务逻辑类型的页面加载请求对应的HTML文件，使第一离线数据包按照业务逻辑类型进行划分。这样，每次更新只需要更新具有同一业务逻辑类型的第一离线数据包，而不用更新所有app的离线包。例如，可以将度假、门票、机票等具有一种业务逻辑类型的HTML文件存储在同一个第一离线数据包。

需要指出的是，由于一个第一离线数据包包含多个HTML页面，每个HTML页面对应多个CSS/JS文件，因此，通过正则表达式不可能实现该业务包下所有的请求URL(包含JS和CSS请求)映射到同一个离线包。如果不能实现相同业务逻辑类型的请求从同一个离线包加载，则无法按照业务逻辑类型访问第一离线数据包。

而基于web页面加载资源的时序关系可以解决按照业务逻辑类型访问第一离线数据包的问题。具体的，由于WebKit内核加载资源的流程是先加载HTML文件，然后在解析HTML文件建立DOM树的过程中依次从上到下加载其中的JS/CSS文件，因此，对于一个HTML5页面，首先加载的是HTML文件，后续加载JS/CSS文件。因此，正则表达式只需要保证匹配所有的页面加载请求和第一离线数据包的名称信息，而大量JS/CSS文件和对应第二离线数据包的映射关系则不需要匹配，从而实现HTML文件和JS/CSS文件基于对应的离线包进行访问。

可选的，作为一个例子，基于HTML文件，确定存储HTML文件的第一离线数据包时，可以基于页面加载请求携带的URL地址或者表头信息确定存储HTML文件的第一离线数据包的名称信息，基于第一离线数据包的名称信息可以确定第一离线数据包。

在一种情况下，可以首先基于页面加载请求携带的URL地址进行正则匹配，匹配结果即第一离线数据包的名称信息，如果匹配的结果为空，可以基于页面加载请求携带的表头信息再次进行正则匹配，匹配结果即第一离线数据包的名称信息，如果匹配的结果为空，表示本地没有存储与页面加载请求对应的HTML文件，直接返回即可。其中，表头信息可以是Referer字段。

可选的，作为一个实施例，基于第一离线数据包的名称信息，可以从内存缓存中获取第一离线数据包的配置内容信息。需要说明的是，当基于页面加载请求携带的URL地址或者表头信息确定与页面加载请求对应的第一离线数据包的名称信息为空时，loadCachedDataForURL的返回值则为空，表示本地离线数据包中不存在需要加载的页面资源，即HTML文件，如果返回值不为空，则可以直接根据第一离线数据包的名称信息判断在内存缓存(NSCache)中是否存在该第一离线数据包对应的配置内容信息(abc.json文件)，如果存在，则可以直接从内存缓存中读取配置内容信息。

可选的，作为一个实施例，根据第一离线数据包的名称信息判断在内存缓存(NSCache)中不存在该第一离线数据包对应的配置内容信息时，则可以基于第一离线数据包的名称信息确定第一离线数据包的物理地址；当基于第一离线数据包的物理地址确定存在与第一离线数据包对应的本地文件时，可以获取在第一离线数据包的物理地址下第一离线数据包的配置内容信息。

需要指出的是，第一离线数据包在app安装包内是以zip包形式存在，且app安装包不能修改，为了实现动态更新，必须在沙盒下操作第一离线数据包，因此，需要在app安装后且首次打开时将zip包和总控文件H5PackageMap.json从app安装包拷贝并解压到指定的沙盒目录。当拷贝和解压操作结束，则第一离线数据包的物理地址会映射到app内并以zip包格式存在，此时，第一离线数据包的物理地址会映射到指定沙盒目录下面。因此，在沙盒目录下，基于第一离线数据包的名称信息可以确定第一离线数据包的物理地址。

基于第一离线数据包的物理地址可以确定是否存在与第一离线数据包对应的本地文件。如果存在本地文件，则本地存在第一离线数据包，此时，可以获取在第一离线数据包的物理地址下第一离线数据包的配置内容信息。配置内容信息(abc.json文件)实现了URL和其本地相对路径的对应关系，这个相对路径是相对于第一离线数据包而言的，因此，每个第一离线数据包均有一个配置内容信息。基于第一离线数据包的物理地址，通过I/O操作可直接获取该目录下的配置内容信息。

可选的，作为一个实施例，当基于第一离线数据包的物理地址确定不存在与第一离线数据包对应的本地文件时，可以确定第一离线数据包的下载地址；基于下载地址可以将第一离线数据包下载为本地文件；之后，可以获取在本地文件的物理地址下第一离线数据包的配置内容信息。

需要说明的是，当基于第一离线数据包的物理地址确定不存在与第一离线数据包对应的本地文件时，通常表示该第一离线数据包的访问频率不高，此时，可以采用懒加载模式下载第一离线数据包。具体的，将访问频率不高的第一离线数据包不内置于发布版app安装包，只是在总控文件H5PackageMap.json的H5CacheList配置文件中增加对应项，从而基于页面加载请求中的URL或表头信息可以确定第一离线数据包的名称信息。但由于app安装包和沙盒目录均不存在该第一离线数据包，因此，根据第一离线数据包的物理地址可以确定不存在与第一离线数据包对应的本地文件，此时，canInitWithRequest返回值为NO，会发起访问远程服务器的请求。同时，访问总控文件H5PackageMap.json的H5PackageList内容，根据第一离线数据包的名称信息可以获取该第一离线数据包的服务器地址，然后开启一个子线程，可以将其下载到本地沙盒并解压。当第二次发起与该第一离线数据包对应的页面加载请求时，由于本地沙盒已经存在该第一离线数据包的本地文件，此时，可以实现从本地加载。

其中，H5PackageList是总控文件H5PackageMap.json的另一部分，实现了懒加载模式下离线包名称与其下载地址的对应关系，示例结构格式如下："membercard":"http://g.alicdn.com/trip/h5-membercard/********.zip"，其中：

“membercard”表示离线包的名称；

"http://g.alicdn.com/trip/h5-membercard/********.zip表示与“membercard”离线包对应的服务器下载地址。

结合以上可知，对于访问频率不高的第一离线数据包，通过下载的方式可以有效减少发布版app安装包的体积，还可以通过下载后的本地第一离线数据包加载其中的HTML文件。

可选的，作为一个实施例，可以将第一离线数据包的名称信息和对应的配置内容信息写入内存缓存，使后续从内存缓存加载第一离线数据包的名称信息和对应的配置内容信息。例如，可以基于页面加载请求携带的URL地址或者表头信息从内存缓存中确定与页面加载请求对应的第一离线数据包的名称信息，基于第一离线数据包的名称信息，可以直接从内存缓存中获取对应的配置内容信息，从而提高加载效率。

可选的，作为一个实施例，获取第一离线数据包的配置内容信息后，可以基于配置内容信息获取HTML文件在第一离线数据包中的相对路径；基于第一离线数据包的物理地址和相对路径，可以确定HTML文件的绝对路径；基于绝对路径可以从第一离线数据包获取HTML文件。

其中，HTML文件在第一离线数据包中的相对路径，是指HTML文件在第一离线数据包内的位置信息。第一离线数据包的物理地址是指第一离线数据包在本地的存储地址。因此，基于第一离线数据包的物理地址和相对路径，可以确定HTML文件的绝对路径。可以理解的是，绝对路径是物理地址和相对路径的结合。

可选的，作为一个实施例，可以将从第一离线数据包获取的HTML文件写入内存缓存，使后续从内存缓存加载HTML文件。例如，当判断该HTML文件在内存缓存中时，可以直接从内存缓存中读取该HTML文件，从而提高加载效率。

由于从本地加载文件涉及到I/O操作，而利用内存缓存则可以最大限度地减少I/O次数，减少加载页面的时间。

可选的，作为一个实施例，第第二离线数据存储的JS/CSS文件为所述HTML文件的共用文件。例如，可以将多个HTML文件共用的JS/CSS文件单独存储在一个第二离线数据包中，从而使一个第二离线数据包成为多个HTML文件的共用包。基于此，则可以从该共用包中获取对应的JS/CSS文件。可以理解的是，通过共用包可以减少包的体积，并最大限度地实现了共用包中共用资源文件的复用机制，如酒店HTML页面和机票HTML页面都用到了日历组件，该日历组件则可以存储在共用包中，使整个app安装包内所有的日历都复用该日历组件。

可选的，作为一个实施例，基于JS/CSS文件，确定存储JS/CSS文件的第二离线数据包时，可以基于JS/CSS请求中的表头信息，确定与JS/CSS请求对应的页面加载请求；基于与JS/CSS请求对应的页面加载请求，可以确定存储JS/CSS文件的第二离线数据包。

其中，同时加载多个HTML文件时，解析不同的HTML文件会发出不同的JS/CSS请求。在这里，由于HTTP协议中的Referer字段是HTTP请求header头部的一部分，浏览器向服务器发送页面加载请求携带该Referer字段，以告诉服务器该页面加载请求的链接地址。Webkit在解析HTML文件时，会基于该HTML文件中的JS/CSS请求加载对应的JS/CSS文件。此时，每个JS/CSS请求头部的Referer就是该HTML地址。因此，当有多个页面加载请求时，通过正则匹配可获取其对应的第一离线数据包，从而首先加载HTML文件。之后，对于解析多个HTML文件发出的JS/CSS请求，可以通过Refer字段确定与该JS/CSS请求对应的页面加载请求，基于与该JS/CSS请求对应的页面加载请求可以获取对应的第二离线数据包。

需要说明的是，对于一个页面加载请求，只有在通过loadCachedDataForURL函数获取URL对应的本地数据不为空的时候，才会从对应的本地离线包加载HTML文件和JS/CSS文件，否则需要访问远程服务器。具体的，本实施例首先判断HTML文件是否在第一离线数据包，如果HTML文件在第一离线数据包，则从本地加载；之后，对于加载所需的JS/CSS文件也同样需要判断其是否在第二离线数据包，在第二离线数据包则从本地加载，否则把JS/CSS请求URL修改为有对应服务器资源的URL，然后再发起访问服务器请求。因此，当HTML文件在第一离线数据包，但与其对应的JS/CSS文件不在本地时，则不会出现加载网页错误的情况。这样，当具有多个页面加载请求时，HTML文件和JS/CSS文件都会从对应的离线包加载资源而不会错乱，从而提高鲁棒性。

可选的，作为一个实施例，基于HTML文件和JS/CSS文件构建页面加载请求的HTTP响应数据时，其中，当函数canInitWithRequest返回为YES时，startLoading就会被调用。首先，可以获取页面加载请求的URL，调用关键函数loadCachedDataForURL可获得与URL对应的本地数据，即HTML文件和JS/CSS文件等。之后，基于URL后缀可获得http资源的媒体类型MimeType，以此作为HTTP响应头部head的Content-Type值，取data数据的长度作为head的Content-Length值。

基于URL、HTTP响应头部head、HTTP响应状态码(200)和HTTP协议版本(HTTP/1.1)可以构建NSHTTPURLResponse。最后调用NSURLProtocolClient的函数:-(void)URLProtocol:didReceiveResponse:cacheStoragePolicy，通知浏览器NSHTTPURLResponse响应头，-(voURLProtocol:didLoadData返回给浏览器响应的数据内容NSData，-(void)URLProtocolDidFinishLoading通知浏览器加载URL数据结束。

以上基于模拟浏览器响应数据请求的过程，利用NSURLProtocolClient实现URLLoading System加载URL的方法，因此完全支持从离线包加载HTML文件时传递任意参数。

需要指出的是，本实施例利用NSURLProtocol和NSURLProtocolClient实现HybridApp加载本地HTML页面。NSURLProtocol可拦截由NSURLConnection发起的网络请求，NSURLProtocolClient提供NSURLProtocol控制URL Loading System加载URL的方法，使用UIWebView可以模拟浏览器功能，由于UIWebView的网络资源加载功能正是基于NSURLConnection实现的，因此利用NSURLProtocol可干涉整个UIWebView加载页面的过程。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

下面将结合图2详细描述根据本申请的一个实施例的电子设备。参考图2，在硬件层面，电子设备包括处理器，可选地，包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外设部件互连标准(Peripheral Component Interconnect，PCI)总线或扩展工业标准结构(ExtendedIndustry Standard Architecture，EISA)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图2中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成合同评估装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

上述如本申请图1所示实施例揭示的页面资源同时加载的方法，可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的电子设备执行时，能够使该电子设备执行图1所示实施例的方法，并具体用于执行以下方法：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

图3是本申请的一个实施例的页面资源同时加载的装置的结构示意图，请参考图3，在一种软件实施方式中，页面资源同时加载的装置300包括拦截模块301、第一确定模块302、第二确定模块303和构建模块304，其中：

拦截模块301，用于拦截页面加载请求；

第一确定模块302，用于确定与所述页面加载请求对应的HTML文件；

第二确定模块303，用于基于所述HTML文件，确定存储所述HTML文件的第一离线数据包；

第三确定模块304，用于如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

第四确定模块305，用于基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

构建模块306，用于如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

基于同时多个页面加载请求，可以基于对应的HTML文件，确定在本地存储对应HTML文件的第一离线数据包，如果该第一离线数据包存在，则可以基于该第一离线数据包获取对应的HTML文件；对于同时多个基于HTML文件的JS/CSS请求，可以基于与JS/CSS请求对应的JS/CSS文件，确定在本地存储对应JS/CSS文件的第二离线数据包，如果该第二离线数据包存在，则可以基于该第二离线数据包获取对应的JS/CSS文件；由此，基于第一离线数据包可以获取HTML文件，基于第二离线数据包可以获取JS/CSS文件，实现HTML文件和JS/CSS文件基于对应的离线数据包进行加载，从而在同时加载多个页面时，即使同一页面下的HTML文件和JS/CSS文件不在同一离线数据包，也不会导致页面访问出现错误。

可选的，作为一个实施例，拦截模块301，

如果所述页面加载请求的httpMethod方法为GET方法，则拦截所述页面加载请求。

可选的，作为一个实施例，拦截模块301，

基于NSURLProtocol拦截由NSURLConnection发起的页面加载请求。

可选的，作为一个实施例，第二确定模块303，

基于所述页面加载请求携带的URL地址或者表头信息确定存储所述HTML文件的第一离线数据包的名称信息；

基于所述第一离线数据包的名称信息确定所述第一离线数据包。

可选的，作为一个实施例，第二确定模块303，

基于所述第一离线数据包的名称信息，从内存缓存中获取所述第一离线数据包的配置内容信息。

可选的，作为一个实施例，第二确定模块303，

基于所述第一离线数据包的名称信息确定所述第一离线数据包的物理地址；

当基于所述第一离线数据包的物理地址确定存在与所述第一离线数据包对应的本地文件时，获取在所述第一离线数据包的物理地址下所述第一离线数据包的配置内容信息。

可选的，作为一个实施例，第二确定模块303，

当基于所述第一离线数据包的物理地址确定不存在与所述第一离线数据包对应的本地文件时，确定所述第一离线数据包的下载地址；

基于所述下载地址将所述第一离线数据包下载为本地文件；

获取在所述本地文件的物理地址下所述第一离线数据包的配置内容信息。

可选的，作为一个实施例，第二确定模块303，

将所述第一离线数据包的名称信息和对应的配置内容信息写入内存缓存，使后续从内存缓存加载所述第一离线数据包的名称信息和对应的配置内容信息。

可选的，作为一个实施例，第二确定模块303，

基于所述配置内容信息获取所述HTML文件在所述第一离线数据包中的相对路径；

基于所述第一离线数据包的物理地址和所述相对路径，确定所述HTML文件的绝对路径；

基于所述绝对路径从所述第一离线数据包获取所述HTML文件。

可选的，作为一个实施例，第二确定模块303，

将从所述第一离线数据包获取的所述HTML文件写入内存缓存，使后续从内存缓存加载所述HTML文件。

可选的，作为一个实施例，第四确定模块305，

基于所述JS/CSS请求中的表头信息，确定与所述JS/CSS请求对应的页面加载请求；

基于与所述JS/CSS请求对应的页面加载请求，确定存储所述JS/CSS文件的第二离线数据包。

可选的，作为一个实施例，

所述表头信息包括Refer字段。

可选的，作为一个实施例，

一个所述第一离线数据包存储与一种业务逻辑类型的页面加载请求对应的HTML文件。

可选的，作为一个实施例，

所述第二离线数据存储的JS/CSS文件为所述HTML文件的共用文件。

页面资源同时加载的装置300还可执行图1所示实施例的方法，并实现页面资源同时加载的装置在图1所示实施例的功能，本申请实施例在此不再赘述。

总之，以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

Claims (17)

1.一种页面资源同时加载的方法，包括：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

2.根据权利要求1所述的方法，

所述拦截页面加载请求，包括：

如果所述页面加载请求的httpMethod方法为GET方法，则拦截所述页面加载请求。

3.根据权利要求1所述的方法，

所述拦截页面加载请求，包括：

基于NSURLProtocol拦截由NSURLConnection发起的页面加载请求。

4.根据权利要求1所述的方法，

所述基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包，包括：

基于所述页面加载请求携带的URL地址或者表头信息进行正则匹配，以确定存储所述HTML文件的第一离线数据包的名称信息；

基于所述第一离线数据包的名称信息确定所述第一离线数据包。

5.根据权利要求4所述的方法，还包括：

基于所述第一离线数据包的名称信息，从内存缓存中获取所述第一离线数据包的配置内容信息。

6.根据权利要求4所述的方法，还包括：

基于所述第一离线数据包的名称信息确定所述第一离线数据包的物理地址；

当基于所述第一离线数据包的物理地址确定存在与所述第一离线数据包对应的本地文件时，获取在所述第一离线数据包的物理地址下所述第一离线数据包的配置内容信息。

7.根据权利要求6所述的方法，还包括：

当基于所述第一离线数据包的物理地址确定不存在与所述第一离线数据包对应的本地文件时，确定所述第一离线数据包的下载地址；

基于所述下载地址将所述第一离线数据包下载为本地文件；

获取在所述本地文件的物理地址下所述第一离线数据包的配置内容信息。

8.根据权利要求6或7所述的方法，还包括：

将所述第一离线数据包的名称信息和对应的配置内容信息写入内存缓存，使后续从内存缓存加载所述第一离线数据包的名称信息和对应的配置内容信息。

9.根据权利要求5-7中任一项所述的方法，还包括：

基于所述配置内容信息获取所述HTML文件在所述第一离线数据包中的相对路径；

基于所述第一离线数据包的物理地址和所述相对路径，确定所述HTML文件的绝对路径；

基于所述绝对路径从所述第一离线数据包获取所述HTML文件。

10.根据权利要求9所述的方法，还包括：

将从所述第一离线数据包获取的所述HTML文件写入内存缓存，使后续从内存缓存加载所述HTML文件。

11.根据权利要求1所述的方法，

所述基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包，包括：

基于所述JS/CSS请求中的表头信息，确定与所述JS/CSS请求对应的页面加载请求；

基于与所述JS/CSS请求对应的页面加载请求，确定存储所述JS/CSS文件的第二离线数据包。

12.根据权利要求4或11所述的方法，

所述表头信息包括Refer字段。

13.根据权利要求1所述的方法，

一个所述第一离线数据包存储与一种业务逻辑类型的页面加载请求对应的HTML文件。

14.根据权利要求1所述的方法，

所述第二离线数据存储的JS/CSS文件为所述HTML文件的共用文件。

15.一种页面资源同时加载的装置，包括：

拦截模块，用于拦截页面加载请求；

第一确定模块，用于确定与所述页面加载请求对应的HTML文件；

第二确定模块，用于基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

第三确定模块，用于如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

第四确定模块，用于基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

构建模块，用于如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

16.一种电子设备，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。

17.一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行以下操作：

拦截页面加载请求；

确定与所述页面加载请求对应的HTML文件；

基于所述HTML文件，通过正则匹配确定存储所述HTML文件的第一离线数据包；

如果所述第一离线数据包存在，则基于所述HTML文件的JS/CSS请求，确定与所述JS/CSS请求对应的JS/CSS文件；

基于所述JS/CSS文件，确定存储所述JS/CSS文件的第二离线数据包；

如果所述第二离线数据包存在，则基于所述HTML文件和JS/CSS文件构建所述页面加载请求的HTTP响应数据。