一种页面数据缓存方法及其相关设备与流程

1.本技术实施例涉及软件技术领域，尤其涉及一种页面数据缓存方法及其相关设备。


背景技术：

2.随着移动互联网技术的发展，应用程序(app，application)的功能越来越强大。同时，html5(简称h5)页面因其灵活性高、开发成本低、制作周期短等优势，在app中的应用也越来越普遍。
3.伴随着开发app的功能越来越完善，导致app内的资源数据越来越大，目前app环境内打开一个h5页面是通过客户端的系统webview进行页面的打开渲染的，利用的是浏览器自带的webview缓存机制进行静态资源的缓存。但首次打开app内未访问过的h5页面时，需要请求下载一次h5页面所需要的资源文件，再进行页面的渲染。而浏览器自带的webview缓存大小有限且不可控，无法控制页面静态资源的缓存逻辑，会造成页面首屏加载时间大大增加，对页面访问的用户造成比较大的影响，体验感变差。


技术实现要素：

4.本技术实施例提供了一种页面数据缓存方法，用于减少页面的加载时间，提升用户体验。
5.本技术实施例第一方面提供了一种页面数据缓存方法，应用于客户端，包括：
6.当所述客户端的应用程序启动时，从所述应用程序对应的服务端的缓存接口获取目标缓存配置信息，所述目标缓存配置信息包括页面的目标页面参数信息及与所述目标页面参数信息一一匹配的目标页面标识信息；
7.当访问第一页面时，获取所述第一页面的第一页面参数信息及与所述第一页面参数信息匹配的第一页面标识信息；
8.校验所述第一页面标识信息是否与所述目标页面标识信息中的任一页面标识信息相同且所述客户端是否未保存所述第一页面标识信息；
9.若相同且未保存所述第一页面标识信息，根据所述目标页面参数信息向所述缓存接口发送数据缓存指令，以获取目标页面缓存信息。
10.可选地，所述根据所述目标页面参数信息向所述缓存接口发送数据缓存指令，以获取目标页面缓存信息之后，所述方法还包括：
11.按照预设格式在本地保存所述目标页面缓存信息。
12.可选地，所述按照预设格式在本地保存所述目标页面缓存信息包括：
13.将所述目标页面缓存信息按照所述目标页面参数信息与所述目标页面标识信息的匹配关系进行命名，以形成所述目标页面缓存信息的命名信息；
14.将所述目标页面缓存信息按照所述命名信息的格式保存至所述客户端；
15.将所述目标页面参数信息与所述命名信息的目标匹配关系保存至所述客户端。
16.可选地，所述将所述目标页面参数信息与所述命名信息的目标匹配关系保存至所述客户端之后，所述方法还包括：
17.当访问第二页面时，获取所述第二页面的第二页面参数信息；
18.根据所述第二页面参数信息判断是否对所述目标匹配关系进行更新；
19.若是，从所述缓存接口获取与所述第二页面对应的第一缓存配置信息，以确定所述第一缓存配置信息是否存在与所述目标页面标识信息相同的页面标识信息；
20.若否，根据超文本传送https协议访问所述第二页面。
21.可选地，所述第一缓存配置信息包括与所述第二页面参数信息匹配的第二页面标识信息，所述确定所述第一缓存配置信息是否存在与所述目标页面标识信息相同的页面标识信息包括：
22.判断所述目标页面标识信息是否存在所述第二页面标识信息；
23.若是，将所述目标页面参数信息更新为所述第二页面参数信息；
24.若否，执行所述根据超文本传送https协议访问所述第二页面的步骤。
25.可选地，所述按照预设格式在本地保存所述目标页面缓存信息之后，所述方法还包括：
26.当访问所述页面中的任一页面时，根据本地保存的所述目标页面缓存信息对所述任一页面进行页面渲染。
27.可选地，所述根据本地保存的所述目标页面缓存信息对所述任一页面进行页面渲染包括：
28.根据所述第二页面参数信息向所述缓存接口发送所述数据缓存指令，以获取与所述第二页面参数信息对应的目标页面缓存信息；
29.根据本地保存的所述第二页面参数信息对应的目标页面缓存信息对所述第二页面进行页面渲染。
30.可选地，所述按照预设格式在本地保存所述目标页面缓存信息之后，所述方法还包括：
31.当获取所述目标页面缓存信息时，获取实时时间信息；
32.将所述实时时间信息写入所述目标页面缓存信息，并将写入所述实时时间信息后的所述目标页面缓存信息保存在本地。
33.可选地，所述将所述实时时间信息写入所述目标页面缓存信息，并将所述目标页面缓存信息保存在本地之后，所述方法还包括：
34.若关闭所述应用程序，获取关闭所述应用程序的当前时间信息；
35.将所述实时时间信息与所述当前时间信息进行计算，以获取计算结果；
36.判断所述计算结果是否大于预设阈值；
37.若是，删除所述目标页面缓存信息。
38.本技术实施例第二方面提供了一种页面数据缓存系统，应用于客户端，包括：
39.获取单元，用于当所述客户端的应用程序启动时，从所述应用程序对应的服务端的缓存接口获取目标缓存配置信息，所述目标缓存配置信息包括页面的目标页面参数信息及与所述目标页面参数信息一一匹配的目标页面标识信息；
40.所述获取单元，还用于当访问第一页面时，获取所述第一页面的第一页面参数信
息及与所述第一页面参数信息匹配的第一页面标识信息；
41.校验单元，用于校验所述第一页面标识信息是否与所述目标页面标识信息中的任一页面标识信息相同且所述客户端是否未保存所述第一页面标识信息；
42.发送单元，用于当相同且未保存所述第一页面标识信息时，根据所述目标页面参数信息向所述缓存接口发送数据缓存指令，以获取目标页面缓存信息。
43.可选地，所述系统还包括：保存单元；
44.所述保存单元，用于按照预设格式在本地保存所述目标页面缓存信息。
45.可选地，所述系统还包括：命名单元；
46.所述命名单元，用于将所述目标页面缓存信息按照所述目标页面参数信息与所述目标页面标识信息的匹配关系进行命名，以形成所述目标页面缓存信息的命名信息；
47.所述保存单元，具体用于将所述目标页面缓存信息按照所述命名信息的格式保存至所述客户端；
48.所述保存单元，具体用于将所述目标页面参数信息与所述命名信息的目标匹配关系保存至所述客户端。
49.可选地，所述系统还包括：判断单元及访问单元；
50.所述获取单元，还用于当访问第二页面时，获取所述第二页面的第二页面参数信息；
51.所述判断单元，用于根据所述第二页面参数信息判断是否对所述目标匹配关系进行更新；
52.所述获取单元，具体用于当根据所述第二页面参数信息对所述目标匹配关系进行更新时，从所述缓存接口获取与所述第二页面对应的第一缓存配置信息，以确定所述第一缓存配置信息是否存在与所述目标页面标识信息相同的页面标识信息；
53.所述访问单元，用于当根据所述第二页面参数信息未对所述目标匹配关系进行更新时，根据超文本传送https协议访问所述第二页面。
54.可选地，所述系统还包括：更新单元及执行单元；
55.所述判断单元，具体用于判断所述目标页面标识信息是否存在所述第二页面标识信息；
56.所述更新单元，用于当所述目标页面标识信息存在所述第二页面标识信息时，将所述目标页面参数信息更新为所述第二页面参数信息；
57.所述执行单元，用于当所述目标页面标识信息未存在所述第二页面标识信息时，执行所述根据超文本传送https协议访问所述第二页面的步骤。
58.可选地，所述系统还包括：渲染单元；
59.所述渲染单元，用于当访问所述页面中的任一页面时，根据本地保存的所述目标页面缓存信息对所述任一页面进行页面渲染。
60.可选地，
61.所述发送单元，具体用于根据所述第二页面参数信息向所述缓存接口发送所述数据缓存指令，以获取与所述第二页面参数信息对应的目标页面缓存信息；
62.所述渲染单元，具体用于根据本地保存的所述第二页面参数信息对应的目标页面缓存信息对所述第二页面进行页面渲染。
63.可选地，所述系统还包括：写入单元；
64.所述获取单元，还用于当获取所述目标页面缓存信息时，获取实时时间信息；
65.所述写入单元，用于将所述实时时间信息写入所述目标页面缓存信息，并将写入所述实时时间信息后的所述目标页面缓存信息保存在本地。
66.可选地，所述系统还包括：计算单元及删除单元；
67.所述获取单元，还用于当关闭所述应用程序时，获取关闭所述应用程序的当前时间信息；
68.所述计算单元，用于将所述实时时间信息与所述当前时间信息进行计算，以获取计算结果；
69.所述判断单元，还用于判断所述计算结果是否大于预设阈值；
70.所述删除单元，用于当所述计算结果大于预设阈值时，删除所述目标页面缓存信息。
71.本技术实施例第二方面提供的用于执行第一方面所述的方法。
72.本技术实施例第三方面提供了一种页面数据缓存装置，包括：
73.中央处理器，存储器，输入输出接口，有线或无线网络接口以及电源；
74.所述存储器为短暂存储存储器或持久存储存储器；
75.所述中央处理器配置为与所述存储器通信，并执行所述存储器中的指令操作以执行第一方面所述的方法。
76.本技术实施例第四方面提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括指令，当所述指令在计算机上运行时，使得计算机执行第一方面所述的方法。
77.从以上技术方案可以看出，本技术实施例具有以下优点：
78.通过本技术实施例提出的一种应用于客户端的页面数据缓存的方法，当客户端的应用程序启动时，从应用程序对应的服务端的缓存接口获取目标缓存配置信息，从而当访问第一页面时，获取第一页面的第一页面参数信息及与第一页面参数信息匹配的第一页面标识信息，再校验第一页面标识信息是否与目标页面标识信息中的任一页面标识信息相同且客户端是否未保存第一页面标识信息，若相同且未保存第一页面标识信息，那么就可以根据目标页面参数信息向缓存接口发送数据缓存指令，以获取目标页面缓存信息。从而打开页面时可以直接使用该页面缓存信息来替代请求接口数据，从而减少页面的加载耗时，达到秒开的效果，用户体验感更好。
附图说明
79.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
80.图1为本技术实施例公开的一种页面数据缓存的系统架构示意图；
81.图2为本技术实施例公开的一种页面数据缓存方法的流程示意图；
82.图3为本技术实施例公开的另一种页面数据缓存方法的流程示意图；
83.图4为本技术实施例公开的另一种页面数据缓存方法的流程示意图；
84.图5为本技术实施例公开的一种页面数据缓存系统的结构示意图；
85.图6为本技术实施例公开的一种页面数据缓存装置的结构示意图。
具体实施方式
86.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
87.需要说明的是，在本技术中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本技术要求的保护范围之内。
88.随着移动互联网技术的发展，应用程序app的功能越来越强大。同时，h5页面因其灵活性高、开发成本低、制作周期短等优势，在app中的应用也越来越普遍。
89.伴随着开发app的功能越来越完善，导致app内的资源数据越来越大，目前app环境内打开一个h5页面是通过客户端的系统webview进行页面的打开渲染的，利用的是浏览器自带的webview缓存机制进行静态资源的缓存。需要说明的是，webview是android系统中一个非常重要的控件，它的作用是用来展示一个web页面。webview在android平台上是一个特殊的view，是一种基于webkit引擎、展现web页面的控件，这个可以被用来在app中仅仅显示一张在线的网页，还可以用来开发浏览器。webview内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索。为方便描述和理解，后续不再对webview的具体功能进行详细描述。
90.由此，容易产生两个问题：1、首次打开app内未访问过的h5页面时，需要请求下载一次html、js、css和图片等资源文件，再进行页面的渲染。2、浏览器自带的webview缓存大小有限且不可控，无法控制页面静态资源的缓存逻辑。
91.因此，本技术实施例提出一种页面数据缓存方法，通过app在启动时，针对h5页面渲染需要用到的资源提前进行下载，从而减少h5页面的首屏加载耗时，达到秒开的效果。
92.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
93.请参阅图1，图1为本技术实施例公开的一种页面数据缓存的系统架构示意图。包括服务器101以及客户端102。
94.如图1所示，该系统架构可以包括服务器101以及客户端102，客户端102可以包括：
客户端102a、客户端102b、客户端102c、
……
、客户端102n等客户端。其中，上述服务器101可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云数据库、云服务、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn、以及大数据和人工智能平台等基础云计算服务的云服务器。客户端(包括客户端102a、客户端102b、客户端102c、
……
、客户端102n)可以是智能手机、平板电脑、笔记本电脑、台式计算机、掌上电脑、移动互联网设备(mid，mobile internet device)、可穿戴设备(例如智能手表、智能手环等)、智能电脑、智能车载等智能终端。其中，服务器101与客户端102中的各客户端可以建立通信连接。换句话说，服务器101可与客户端102a、客户端102b、客户端102c、
……
、客户端102n中的各客户端建立通信连接，例如客户端102a与服务器101之间可建立通信连接。其中，上述通信连接不限定连接方式，可以通过有线通信方式进行直接或间接地连接，也可以通过无线通信方式进行直接或间接地连接等，具体可根据实际应用场景确定，本技术在此不做限制。
95.应该理解，如图1所示的客户端集群中的每个客户端均可以安装有应用客户端，当该应用客户端运行于各客户端中时，可以分别与上述图1所示的服务器101之间进行数据交互，使得每个客户端可以接收来自于服务器101的业务数据(比如服务器下发的图片缓存数据)。其中，该客户端102上的应用程序app可以为社交应用、即时通信应用、直播应用、游戏应用、短视频应用、视频应用、音乐应用、k歌应用、购物应用、小说应用、支付应用等具有显示文字、图像、音频以及视频等数据信息功能的客户端102，具体可根据实际应用场景需求确定，在此不做限制。其中，该客户端102可以为独立的客户端，也可以为集成在某客户端(例如即时通信客户端、社交客户端等)中的嵌入式子客户端，具体可根据实际应用场景确定，在此不做限定。以购物应用为例，客户在通过客户端102使用购物应用的过程中，服务器101可以根据购物应用上的缓存配置信息将对应的页面缓存信息提前下发给客户端102。与服务器101建立通信连接的各客户端(客户端102a、客户端102b、客户端102c、
……
、客户端102n)上的购物应用均可以获取到对应的页面缓存信息。本技术实施例提供的方法可以由如图1所示的服务器101执行，也可以由客户端(如图1所示的客户端102a、客户端102b、
……
、客户端102n中的任意一个)执行，还可以由客户端和服务器101共同执行，具体可根据实际应用场景确定，此处不做限制。
96.为方便理解和描述，下面对本技术实施例提出的一种页面数据缓存方法进行详细描述。请参阅图2，图2为本技术实施例公开的一种页面数据缓存方法的流程示意图。包括步骤201-步骤204。
97.201、当客户端的应用程序启动时，从应用程序对应的服务端的缓存接口获取目标缓存配置信息。
98.当打开客户端上的某个app时，会提前初始化wkwebview，需要说明的是，wkwebview是一种浏览器控件。对应的，就是初始化app内的浏览器进程环境，可以让第一次打开h5页面速度更快(h5页面是通过app内的浏览器webview打开的)。
99.具体的，当热启动app时，客户端会从app对应的服务端的缓存接口获取到离线缓存协议json配置列表。需要说明的是，本实施例中所描述的离线缓存协议json配置列表即为上述部分中所描述的目标缓存配置信息。
100.对应的，该目标缓存配置信息是通过oa管理平台提前写好的配置信息。需要补充
的是，该oa管理平台不仅可以进行配置管理，同时还是json协议生成平台(只需输入页面url即可)，还可以提供查询接口，也就是缓存接口。还需要补充的是，oa管理平台还具备其他功能，本实施例并不对对此进行赘述，后续也不再对oa管理平台的具体功能进行描述。其中，需要补充的是，internet上的每一个网页都具有一个唯一的名称标识，通常称之为统一资源定位器(url，uniform resource locator)。它是www的统一资源定位标志，简单地说url就是web地址，俗称“网址”。为方便描述和理解，后续不再对url进行详细描述。
101.具体的，客户端上的app通过向服务端发送接口请求信息，从而获取到服务端通过缓存接口下发的目标缓存配置信息，也就是json配置列表。其中，目标缓存配置信息包括目标页面的所有目标页面参数信息。也就是说，oa管理平台可以提前设置好app内所需要进行提前缓存的页面，对应的，就需要设置该需要提前缓存的页面的页面参数信息，也就是页面url。
102.需要补充的是，该目标缓存配置信息包括预设设置好需要缓存的页面的目标页面参数信息及与目标页面参数信息一一匹配的目标页面标识信息。其中，目标页面参数信息就是所需缓存页面的页面url，目标页面标识信息就是信息摘要算法(md5，message digest algorithm)。还需要补充的是，md5是一种加密串，是一种被广泛使用的密码散列函数，可以产生出一个128位的散列值，用于确保信息传输完整一致。
103.进一步的是，每次热启动app的时候都可以请求服务端，从而获取最新的json列表。需要补充的是，热启动指的手机的app切到后台运行之后又从后台打开到界面允许的这么一个过程。
104.202、当访问第一页面时，获取第一页面的第一页面参数信息及与第一页面参数信息匹配的第一页面标识信息。
105.当用户在应用程序界面上点击某一页面，也就是客户端访问第一子页面时，可以获取到该第一子页面的第一页面参数信息以及与第一页面参数信息匹配的第一页面标识信息。需要说明的是，该第一页面参数信息就是第一页面的页面url，第一页面标识信息就是与第一页面的页面url对应的md5。
106.需要说明的是，当打开客户端上的某个app时，
107.203、校验第一页面标识信息是否与目标页面标识信息中的任一页面标识信息相同且客户端是否未保存第一页面标识信息。
108.由步骤201可知，目标缓存配置信息包括目标页面参数信息及与目标页面参数信息一一匹配的目标页面标识信息。具体的，就是每一段目标页面参数信息都对应一段目标页面标识信息。
109.对应的，先根据页面url查询或读取协议json内的离线缓存资源列表。具体的，根据第一页面参数信息，也就是第一页面url(过滤参数)查询或读取目标缓存配置信息中的目标页面参数信息。对应的，就是根据第一页面的页面url查询或读取协议json内第一页面的加载资源列表。
110.其中，需要补充的是，离线缓存资源列表是通过一个工具服务去生成这个h5页面会加载的资源列表，然后再发到cdn给到客户端app去获取(app初始化的时候请求缓存接口获取的是这些cdn json的一个数组集合，然后去做每个页面资源预下载的处理)。
111.然后，判断本地缓存中是否有该md5文件，具体的，解密json描述文件(做了aes加
密防篡改)后，判断本地缓存是否有第一页面的md5文件。对应的，若存在，则表示目标缓存配置信息已被下载，不需要进行文件缓存；若不存在，则下载目标缓存配置信息并校验该目标缓存配置信息内容。其中，需要说明的是，该描述文件就是目标缓存配置信息。
112.最后，校验第一页面的md5文件是否与目标页面标识信息中的任一页面标识信息相同。具体的，校验下载的第一页面的md5文件跟json描述文件上对应文件的md5是否相等。需要补充的是，该校验是为了做安全隐患的一个校验，防止js文件内容被黑客篡改了之后md5的值变化了，如果跟通过接口获取的md5的值不一致的话，则认为该文件不可信，就不会进行文件的预加载。因此，若相等，就执行步骤204；若不相同则不进行目标页面缓存信息的缓存。
113.进一步的是，当客户端访问的是app上的其他页面时，也执行与步骤203相同的动作，具体此处不做赘述。
114.204、若相同且未保存第一页面标识信息，根据目标页面参数信息向缓存接口发送数据缓存指令，以获取目标页面缓存信息。
115.当目标配置缓存信息中的md5文件与第一页面的md5文件相同，且本地未保存该第一页面的md5文件，就根据目标配置缓存信息中的目标页面参数信息向服务器的缓存接口发送数据缓存指令，从而获取到目标页面缓存信息，以便对页面进行页面渲染。
116.具体的，就是根据确定好的目标页面参数信息向服务器的缓存接口进行预请求，从而请求接口的缓存。
117.通过本实施例提出的一种应用于客户端的页面数据缓存的方法，当客户端的应用程序启动时，从应用程序对应的服务端的缓存接口获取目标缓存配置信息，从而当访问第一页面时，获取第一页面的第一页面参数信息及与第一页面参数信息匹配的第一页面标识信息，再校验第一页面标识信息是否与目标页面标识信息中的任一页面标识信息相同且客户端是否未保存第一页面标识信息，若相同且未保存第一页面标识信息，那么就可以根据目标页面参数信息向缓存接口发送数据缓存指令，以获取目标页面缓存信息。从而打开页面时可以直接使用该页面缓存信息来替代请求接口数据，从而减少页面的加载耗时，达到秒开的效果，用户体验感更好。
118.请参阅图3，图3为本技术实施例公开的另一种页面数据缓存方法的流程示意图。包括步骤301-步骤307。需要说明的是，本实施例主要应用于客户端上的应用程序app。
119.301、当客户端的应用程序启动时，从应用程序对应的服务端的缓存接口获取目标缓存配置信息。
120.本实施例中步骤301与前述图2中步骤201类似，具体此处不进行赘述。但需要说明的是，一种目标缓存配置信息，也就是对应的离线缓存协议json配置列表的其中一个具体的实施例可以是，其中，json数据格式如下：
[0121][0122][0123]
不难理解的是，以上仅为json数据格式的其中一个具体的实施例，本实施例并不对json数据格式中的具体实现代码进行限制。
[0124]
302、当访问第一页面时，获取第一页面的第一页面参数信息及与第一页面参数信
息匹配的第一页面标识信息。
[0125]
本实施例中的步骤302与前述图2中步骤202类似，具体此处不对此进行赘述。但需要说明的是，进一步的，当访问第一页面之前，weex或h5对应的weex_bridge或h5_bridge会提供文件缓存写入jsapi，从而app可以提供对应的jsapi传参的方式供h5页面进行数据的读取。具体的，也就是app针对weex和h5均新增一个bridge_api方法，该方法可以通过传入页面url进行文件缓存的写入需要说明的是，上述中所描述的文件缓存也可以理解为页面的页面参数信息及与页面参数信息匹配的页面标识信息。例如，当客户端访问第一页面时，就可以获取到h5_bridge写入的该第一页面的页面url以及对应的md5。
[0126]
其中，需要补充的是，weex是一个可以利用web前端开发技术来实现android或ios原生引用的框架，使用vue作为上层框架，并遵循w3c标准实现了统一的jsengine和domapi，换言之，weex可以理解为一个前端的技术栈。
[0127]
还需要补充的是，bridge_api方法就是app跟h5或者weex进行通信的一种桥梁方式，是app提供的一种能力(可以理解h5或者weex想要调用，比如摄像头这种能力就得通过bridge_api告诉app需要要打开摄像头)。
[0128]
进一步的是，该步骤还可以是用户打开第一页面后，准备打开第二页面时，所执行的步骤，此时，第一页面参数信息及第一页面标识信息即为第二页面参数信息及第二页面标识信息。对应的，此时的第一页面即为中间页面。为方便描述，后续不再对中间页面的具体含义进行详细描述。
[0129]
还需要补充的是，后续步骤303-步骤308也可以理解为用户打开第一页面后，准备打开第二页面时，所执行的步骤。后续不再对此进行赘述。
[0130]
303、校验第一页面标识信息是否与目标页面标识信息中的任一页面标识信息相同且客户端是否未保存第一页面标识信息。若是，执行步骤304。
[0131]
304、根据目标页面参数信息向缓存接口发送数据缓存指令，以获取目标页面缓存信息。
[0132]
本实施例中步骤303-步骤304与前述图2中步骤203-步骤204类似，具体此处不进行赘述。但需要说明的是，客户端获取到页面url之后会进行json协议的接口查询更新，然后进行页面的静态资源离线缓存，若md5已存在则不需要再进行缓存。
[0133]
其中，需要补充的是，该接口是由oa管理平台提供的一个接口。通过传入页面url就可以获取到该页面加载的资源文件集合的json文件，从而再进行后面资源的预加载操作。
[0134]
其中，还需要补充的是，每一个资源文件可以认为为颗粒度，如js或css等。当访问页面首屏时的目标页面缓存信息可以理解为页面首屏加载的cdn的静态资源列表，获取方式可以理解为以静态资源的离线缓存方式进行文件的缓存。其中，缓存方式也可以理解为读取资源列表文件的地址。
[0135]
305、当获取目标页面缓存信息时，获取实时时间信息，并将实时时间信息写入目标页面缓存信息，并将写入实时时间信息后的目标页面缓存信息保存在本地。
[0136]
当获取到目标页面缓存信息时，需要按照预设格式在本地保存该目标页面缓存信息。
[0137]
具体的，具体格式的其中一个实施例可以为：
[0138][0139]
其中，每个url对应一份缓存数据。不难理解的是，本实施例并不对url的数量进行限制，后续也不再对此进行赘述。由此，客户端可以将目标页面缓存信息按照上述格式保存到本地的缓存池中。
[0140]
进一步的，当客户将目标页面缓存信息保存起来后，还可以提供jsapi传参的方式供页面进行数据的读取。其中，jsapi是app和h5进行通信的桥梁，应用程序编程接口(api，applicationprogramming interface)。对应的，传参指的是h5要告诉app参数(url就是参数)，app根据这个参数返回给h5对应的目标页面缓存信息，也就是url对应存储的缓存接口数据。
[0141]
进一步的是，还可以将目标页面缓存信息按照目标页面参数信息与目标页面标识信息的匹配关系进行命名，以形成目标页面缓存信息的命名信息，再将所述目标页面缓存信息按照命名信息的格式保存至所述客户端，同时也将目标页面参数信息与命名信息的目标匹配关系保存至客户端。具体的，以md5为命名将json协议内的资源文件(url对应的页面缓存信息，具体可包括js，css，png等文件)缓存到客户端本地，并且缓存一份url：md5的映射。其中，app本地文件缓存的命名信息可以是md5_1，md5_2，md5_3，...等等。具体的命名数量与目标页面参数信息(url)的字段数量有关，本实施例并不对此进行限制。那么，对应的有，app本地缓存的映射即为url1：md5_1，url2：md5_2，url3：md5_3，...等等。为方便描述，后续不再对资源文件的具体含义以及所包含的内容进行赘述。
[0142]
更进一步的是，当app本地缓存池获取到目标页面缓存信息的时候，也就是接口数据存储在内存当中的时候，会获取到此时获取目标页面缓存信息的实时时间。在存入目标页面缓存信息的时候会将获取到的实时时间，也就是当前时间字段写入到目标页面缓存信息中。具体的，就是app请求接口的时候会记录一个时间戳。然后将写入实时时间的目标页面缓存信息保存在本地。
[0143]
具体的，步骤305中，获取当前时间的其中一个实施例可以是，先根据场景id将业务逻辑进行划分，其中的场景id可以由oa管理平台进行生成，本实施例并不对生成场景id的管理端进行限制，后续也不再对此进行赘述。场景id只需由一个管理端配置生成即可，比如电商业务，保险业务等。每个场景固定分配15m空间，超过则按照时间倒序(最近最少使用算法lru算法)各自进行磁盘文件的清理，互不影响。然后，通过计算文件最近访问时间与当前时间做对比，判断是否大于某个淘汰阈值，若超过则删除本地对应md5资源文件。最后，根据所有场景的磁盘空间做一个判断是否超过150m空间，超过则按照时间倒序进行整体磁盘
文件的清理，也就是删除目标页面缓存信息。
[0144]
其中，需要补充的是，每个场景固定分配的存储空间可进行自由设置，例如，还可以设置为20m，10m等，具体此处不对此进行限制。对应的，lru算法，它的基本思想是长期不被使用的数据，在未来被用到的几率也不大，所以当新的数据进来时我们可以优先把这些数据替换掉。还需要补充的是，淘汰阈值也可可进行自由设置，例如，还可以设置为200m，100m等，具体此处不对此进行限制。对应的，场景的数量也可以是一个预分配的值，可以随时增加，可以由具体的业务使用量来确定，例如，可以设置10个场景，也可以设置成20个等，具体此处不对此进行限制。
[0145]
不难理解的是，当每个场景固定分配15m空间，场景设置为10个时，对应的磁盘空间即为150m。当设置每个场景固定分配20m空间，场景设置为20个时，对应的磁盘空间即为400m。
[0146]
306、当访问目标页面中的任一页面时，根据本地保存的目标页面缓存信息对任一页面进行渲染。
[0147]
当用户通过点击等操作进到一些app内的活动页时，也就是访问目标页面中的任一页面的时候，子页面就可以将本页面需要加载的url参数发送给客户端，从而客户端根据该url参数找到目标页面缓存信息中的对应于该url参数的缓存数据，并将该页面需要的缓存数据发送给子页面，从而使得页面根据读取到的缓存数据，也就是对应的目标页面缓存信息对页面进行渲染。
[0148]
307、获取关闭应用程序的当前时间信息，并将实时时间信息与当前时间信息进行计算，以获取计算结果。
[0149]
当关闭app时，也就是关闭掉app进程时，客户端会获取到此时关闭该app的当前时间。通过计算当前时间和实时时间，从而获取到计算结果。
[0150]
308、判断计算结果是否大于预设阈值。
[0151]
当获取到计算结果后，判断该计算结果是否大于预设阈值，若大于预设阈值，就删除掉目标页面缓存信息。具体的，可以通过计算文件最近访问h5页面的时间与上述获取到目标页面缓存信息的实时时间做对比，判断是否大于某个阈值，例如，可以设置为10s，也可以设置为5s，具体可以根据页面对于缓存数据的实时性的要求进行修改，此处不对阈值的具体数值进行限制，后续也不再对此进行赘述。当超过该阈值时，就删除目标页面缓存信息中，对应于h5页面的md5的资源文件，从而，客户端就可以执行上述步骤，从而再获取到最新的json文件，以获取最新的目标页面缓存信息。
[0152]
更进一步的是，该实时时间信息可以用来告诉h5判断是否还要使用目标页面缓存信息，有些业务场景对缓存数据实时性要求比较高，就可能会不使用。当业务场景对缓存数据的实时性要求不高或不需要时，就可以不对页面进行页面渲染，从而实现业务兜底。
[0153]
通过本实施例提出的一种页面数据缓存方法，客户端上的应用程序app可以通过配置好的目标缓存配置信息，从服务端获取到对应的目标页面缓存信息。同时，通过搭建通用的h5资源离线缓存方案体系，实现app内重要页面达到秒开，同时，也实现了app内资源颗粒度的资源缓存，通过网络拦截请求替换磁盘内资源访问，最后，通过读取页面首屏加载的cdn的静态资源列表，以静态资源的离线缓存方式进行文件的缓存提升了方案的可实现性。
[0154]
请参阅图4，图4为本技术实施例公开的另一种页面数据缓存方法的流程示意图。
包括步骤401-步骤408。需要说明的是，本实施例主要应用于访问h5页面时。还需要说明的是，本实施例中所提及的各类页面参数信息、页面配置信息及页面标识信息可参阅步骤301-步骤308中获取时的执行步骤，具体的获取步骤本实施例不再对此进行赘述。
[0155]
401、当访问第二页面时，获取第二页面的第二页面参数信息。
[0156]
app启动指的是打开app的时候，这时候还没有访问h5页面，只有用户通过点击等操作进到一些活动页，这些叫做访问h5页面，app启动是前置的，所以可以在这个时候做数据的提前缓存，h5访问的时候就不需要请求接口直接用缓存的数据。
[0157]
具体的，当用户通过点击等操作进到app内的第二页面时，第二页面会将第二页面参数信息(页面url)发送给客户端，从而，客户端便可以获取到第二页面的第二页面参数信息。
[0158]
进一步的是，当第一次访问第一页面时，第一页面可以与第二页面为同一页面。
[0159]
402、根据第二页面参数信息判断是否对目标匹配关系进行更新。若是，执行步骤403；若否，执行步骤404。
[0160]
当客户端获取到第二页面参数信息后，便可以根据第二页面参数信息判断是否对客户端内已存储的目标匹配关系进行更新。其中，目标匹配关系可参阅图3中步骤305。若是，执行步骤403；若否，执行步骤404。
[0161]
具体的，根据页面url(过滤参数)判断在映射表中是否对html文件开启进行拦截，其中，拦截就是是否离线缓存，换言之，就是是否更新。由于映射表中存在app本地缓存的映射，由此，便可以根据第二页面参数信息url读取到对应的目标页面参数信息。
[0162]
若本地不存在目标页面参数信息就执行步骤404；若存在就执行步骤304。
[0163]
403、从缓存接口获取与第二页面对应的第一缓存配置信息。
[0164]
若需要对目标页面缓存信息进行更新，对应的第二子页面就可以通过缓存接口从服务器获取到该第二子页面对应的第一缓存配置信息。具体的，第二子页面可以通过缓存接口获取到oa管理平台配置的json协议，此时的json协议为该页面最新的json协议。此时，第二子页面便可以查询到该页面最新的json协议。其中，第一缓存配置信息包括第二页面参数信息以及与第二页面参数信息匹配的第二页面标识信息。
[0165]
404、根据超文本传送https协议访问第二页面。
[0166]
若不需要对目标页面缓存信息进行更新，或最新的json协议中的md5不在本地缓存中存在，就直接走超文本传输安全协议(https，hypertext transportprotocol server)。通过https协议访问第二页面。
[0167]
405、判断目标页面标识信息是否存在第二页面标识信息。若是，执行步骤406；若否，执行步骤404。
[0168]
当获取到最新的目标缓存配置信息后，也就是第一缓存配置信息后，就判断在本地缓存中的目标页面标识信息是否存在第一缓存配置信息中的第二页面标识信息。具体的，就是判断最新的json协议的md5是否在缓存中存在。若是，执行步骤406；若否，执行步骤404。
[0169]
进一步的，app还可以判断静态资源是否命中离线缓存列表。具体的，app判断第一缓存配置信息是否命中目标缓存配置信息。若没有命中，则执行步骤404；若命中，则执行步骤406。需要补充的是，命中指的是根据实际访问时会加载的文件，结合映射关系去判断是
否命中。
[0170]
406、将目标页面参数信息更新为第二页面参数信息。
[0171]
当该json协议的md5在本地缓存中存在时，就将将目标页面参数信息更新为第二页面参数信息。具体的，就是对页面url进行更新。
[0172]
进一步的是，由于页面url对应的是页面渲染时所需要的图片，视频等，因此，也可以理解为对资源文件(图片，视频等)进行拦截替换。换言之，就是替换子页面的显示图片或视频等。
[0173]
407、根据本地保存的目标页面缓存信息对任一页面进行渲染。
[0174]
若本地缓存有目标页面缓存信息，就根据本地保存的目标页面缓存信息对第二页面进行页面渲染。
[0175]
进一步的是，根据本地保存的目标页面缓存信息对任一页面进行渲染。
[0176]
408、接收服务端发送的第二页面缓存信息，并根据第二页面缓存信息进行页面渲染。
[0177]
当通过https协议访问第二页面时，可以直接通过https协议接收服务端发送的第二页面的第二页面缓存信息，并根据该第二页面缓存信息对第二页面进行页面渲染。
[0178]
通过本实施例提出的一种页面数据缓存方法，通过访问特定的h5页面时，根据当前h5页面的缓存配置信息，确定是否对资源文件进行页面数据缓存，可以减少页面的首屏加载时间和资源带宽加载占用量，提升用户体验，也提升了方案的可实现性。
[0179]
应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
[0180]
若方案涉及敏感信息(如用户信息、企业信息)，则应当说明针对敏感信息的收集、使用和处理需要遵守相关国家和地区的法律法规和标准，且需要在相应主体(如用户或企业等)许可或同意的情况下进行。
[0181]
请参阅图5，图5为本技术实施例公开的一种页面数据缓存的系统结构图。包括：
[0182]
获取单元501，用于当客户端的应用程序启动时，从应用程序对应的服务端的缓存接口获取目标缓存配置信息，目标缓存配置信息包括页面的目标页面参数信息及与目标页面参数信息一一匹配的目标页面标识信息；
[0183]
获取单元501，还用于当访问第一页面时，获取第一页面的第一页面参数信息及与第一页面参数信息匹配的第一页面标识信息；
[0184]
校验单元502，用于校验第一页面标识信息是否与目标页面标识信息中的任一页面标识信息相同且客户端是否未保存第一页面标识信息；
[0185]
发送单元503，用于当相同且未保存第一页面标识信息时，根据目标页面参数信息向缓存接口发送数据缓存指令，以获取目标页面缓存信息。
[0186]
示例性地，系统还包括：保存单元504；
[0187]
保存单元504，用于按照预设格式在本地保存目标页面缓存信息。
[0188]
示例性地，系统还包括：命名单元505；
[0189]
命名单元505，用于将目标页面缓存信息按照目标页面参数信息与目标页面标识信息的匹配关系进行命名，以形成目标页面缓存信息的命名信息；
[0190]
保存单元504，具体用于将目标页面缓存信息按照命名信息的格式保存至客户端；
[0191]
保存单元504，具体用于将目标页面参数信息与命名信息的目标匹配关系保存至客户端。
[0192]
示例性地，系统还包括：判断单元506及访问单元507；
[0193]
获取单元501，还用于当访问第二页面时，获取第二页面的第二页面参数信息；
[0194]
判断单元506，用于根据第二页面参数信息判断是否对目标匹配关系进行更新；
[0195]
获取单元501，具体用于当根据第二页面参数信息对目标匹配关系进行更新时，从缓存接口获取与第二页面对应的第一缓存配置信息，以确定第一缓存配置信息是否存在与目标页面标识信息相同的页面标识信息；
[0196]
访问单元507，用于当根据第二页面参数信息未对目标匹配关系进行更新时，根据超文本传送https协议访问第二页面。
[0197]
示例性地，系统还包括：更新单元508及执行单元509；
[0198]
判断单元506，具体用于判断目标页面标识信息是否存在第二页面标识信息；
[0199]
更新单元508，用于当目标页面标识信息存在第二页面标识信息时，将目标页面参数信息更新为第二页面参数信息；
[0200]
执行单元509，用于当目标页面标识信息未存在第二页面标识信息时，执行根据超文本传送https协议访问第二页面的步骤。
[0201]
示例性地，系统还包括：渲染单元510；
[0202]
渲染单元510，用于当访问页面中的任一页面时，根据本地保存的目标页面缓存信息对任一页面进行页面渲染。
[0203]
示例性地，
[0204]
发送单元503，具体用于根据第二页面参数信息向缓存接口发送数据缓存指令，以获取与第二页面参数信息对应的目标页面缓存信息；
[0205]
渲染单元510，具体用于根据本地保存的第二页面参数信息对应的目标页面缓存信息对第二页面进行页面渲染。
[0206]
示例性地，系统还包括：写入单元511；
[0207]
获取单元501，还用于当获取目标页面缓存信息时，获取实时时间信息；
[0208]
写入单元511，用于将实时时间信息写入目标页面缓存信息，并将写入实时时间信息后的目标页面缓存信息保存在本地。
[0209]
示例性地，系统还包括：计算单元512及删除单元513；
[0210]
获取单元501，还用于当关闭应用程序时，获取关闭应用程序的当前时间信息；
[0211]
计算单元512，用于将实时时间信息与当前时间信息进行计算，以获取计算结果；
[0212]
判断单元506，还用于判断计算结果是否大于预设阈值；
[0213]
删除单元513，用于当计算结果大于预设阈值时，删除目标页面缓存信息。
[0214]
下面请参阅图6，本技术实施例公开的一种页面数据缓存装置的结构示意图，装置
包括：
[0215]
中央处理器601，存储器605，输入输出接口604，有线或无线网络接口603以及电源602；
[0216]
存储器605为短暂存储存储器或持久存储存储器；
[0217]
中央处理器601配置为与存储器605通信，并执行存储器605中的指令操作以执行前述图2至图4中任一所示实施例中的方法。
[0218]
本技术实施例还提供一种芯片系统，其特征在于，芯片系统包括至少一个处理器和通信接口，通信接口和至少一个处理器通过线路互联，至少一个处理器用于运行计算机程序或指令，以执行前述图2至图4中任一所示实施例中的方法。
[0219]
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
[0220]
在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0221]
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0222]
另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
[0223]
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。