CN106294365A - 一种单页web应用的页面数据处理方法及设备 - Google Patents

Abstract

本申请公开了一种单页web应用的页面数据处理方法。通过在客户端中设置用于存储缓存数据的缓存区间，当客户端接收获取网页内容的HTTP请求后，查询缓存区间中是否存在可用的缓存数据，并在缓存区间中存在缓存数据且缓存数据可用时利用缓存数据生成HTTP请求所请求的网页内容，否则向服务器发送HTTP请求，接收服务器返回的数据并生成HTTP请求所请求的网页内容。从而在节省资源的前提下在客户端上实现了页面静态化处理，减少重复非必要的HTTP请求以及数据库查询对服务器资源造成的消耗。

Description

一种单页web应用的页面数据处理方法及设备

技术领域

本申请涉及网络技术领域，特别涉及一种单页web应用的页面数据处理方法。本申请同时还涉及一种页面数据处理设备。

背景技术

单页Web应用(single-page application简称为SPA)是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML(HyperText Markup Language，超级文本标记语言)、JavaScript和CSS(Cascading Style Sheets，层叠样式表)。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用JavaScript动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA可以提供流畅的用户体验。

目前SPA大多应用在PC端或是移动端的网络访问客户端(例如网络浏览器)中。在应用SPA后，用户通过用户设备的浏览器加载独立的HTML页面并且无需离开此导航页面，与仅通过重绘界面上需要变化的部分来实现快速渲染和即时反馈的SPA相比，传统的Web应用都是由服务端来处理页面数据与模板的渲染与拼接，当服务端应用程序从后端数据库查询出数据和模板后，可以根据实际应用场景，对数据与模板进行缓存，并将缓存数据提供给发送HTTP(HyperText Transfer Protocol，超文本传输协议)请求的客户端。因此许多用户操作都会重绘整张页面，结果是当服务端从后台服务器获取数据时，页面往往会响应缓慢。如果页面很大，服务器又繁忙，或者网络连接很慢，甚至还会导致客户端发生假死的问题。

然而，申请人在实现本申请的过程中发现，虽然在使用SPA的过程中用户不需要重新刷新页面以及页面显示流畅，但是一旦加载和执行单个页面应用程序通常会有更多的响应，这就需要返回至后端Web服务器进行处理。而在SPA中，模板与后端服务器是处于脱离状态，后端Web服务器仅执行提供数据的功能，无法对缓存进行处理，因此对于不需要经过服务器解析直接传送到客户端的静态页面来说，单页Web应用无法由服务端完成页面数据静态化处理，后端Web服务器必需响应来自于用户的每一个HTTP请求，从而加重了服务器的负荷，造成资源的浪费。

发明内容

本申请提供了一种单页web应用的页面数据处理方法。用以减少重复的HTTP请求以及数据库查询对服务器资源造成的消耗。

本申请提供了一种单页web应用的的页面数据处理方法，所述方法应用于客户端中，所述客户端中设置有用于存储缓存数据的缓存区间，所述方法包括：

所述客户端接收获取网页内容的超文本传输协议HTTP请求；

查询所述缓存区间中是否存在可用的缓存数据；

若所述缓存区间中存在缓存数据，且所述缓存数据可用，则利用所述缓存数据生成所述HTTP请求所请求的网页内容；

否则，向服务器发送所述HTTP请求，接收所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

相应地，本申请还提出了一种单页web应用的页面数据处理设备，所述设备作为客户端且设置有用于存储缓存数据的缓存区间，所述设备包括：

接收模块，用于接收获取网页内容的超文本传输协议HTTP请求；

查询模块，用于查询所述缓存区间中是否存在可用的缓存数据；

处理模块，用于在所述缓存区间中存在缓存数据且所述缓存数据可用时，利用所述缓存数据生成所述HTTP请求所请求的网页内容，否则通过发送模块向所述服务器发送所述HTTP请求，利用所述接收模块接收的所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

由此可见，通过应用本申请的技术方案，通过在客户端中设置用于存储缓存数据的缓存区间，当客户端接收获取网页内容的HTTP请求后，查询缓存区间中是否存在可用的缓存数据，并在缓存区间中存在缓存数据且缓存数据可用时利用缓存数据生成HTTP请求所请求的网页内容，否则向服务器发送HTTP请求，接收服务器返回的数据并生成HTTP请求所请求的网页内容。从而在节省资源的前提下在客户端上实现了页面静态化处理，减少重复非必要的HTTP请求以及数据库查询对服务器资源造成的消耗。

附图说明

图1为本申请提出的一种单页web应用的页面数据处理方法的流程示意图；

图2为本申请提出的一种单页web应用的页面数据处理设备的结构示意图。

具体实施方式

如背景技术所述，尽管用户在在使用单页Web应用的期间不会重新加载页面，但是在现有的单页Web应用中无法由服务端完成页面数据静态化处理。作为RFC2616标准中定义的一种用户设备的客户端与服务端进行数据交互的网络协议，目前常用的HTTP请求包含获取网页内容的请求GET、在服务器上创建资源的请求(POST)、在服务器上修改资源的请求(PUT)以及在服务器上删除资源的请求(DELETE)等类型，其中GET类型的HTTP请求(后续称为GET请求)只查询数据，不会对数据进行写操作，而其他类型的HTTP请求仅对数据进行写操作。在单页Web应用中，由前端Web框架在网络层对HTTP请求进行拦截。

为了解决背景技术中所涉及的技术问题，本申请提出了一种单页web应用的页面数据处理方法，该方法可以应用在使用单页Web应用的用户设备中，具体可以为PC端的浏览器或是手机APP。当用户通过客户端第一次发起GET请求时，客户端将按照实际场景对服务端返回的数据进行本地缓存。这样当用户再次发起GET类型的HTTP请求时，根据请求中携带的URI查询是否存在相应的缓存以及缓存是否可用，如果是则直接返回缓存数据，以此减少网络资源消耗和服务器资源消耗。而当用户发起UPDATE、PUT、DELETE等写数据的HTTP请求时，则更新本地缓存。具体地，缓存则为一个Web资源(如html页面，图片，js，数据等)存在于Web服务器和客户端之间的副本，一般为数据缓存。

如图1所示，为本申请提出的一种单页web应用的页面数据处理方法的流程示意图，该方法应用于客户端中。在介绍详细流程之前，需要说明的是，本申请的预先在客户端中设置有用于存储缓存数据的缓存区间，该缓存区间可以为所述客户端的缓存层的内存区域；或是客户端通过存储接口提供的硬盘空间。在本申请的优选实施例中，缓存数据存储位置可采取以下两种方案：

(1)内存：通过在客户端的缓存层维护一块内存区域，用以为缓存数据提供存储空间。该方案的优点在于无需浏览器特殊支持，适用范围广。但由于需要维护额外内存空间，因此会使程序消耗内存空间稍有增加。

(2)Local Storage：通过客户端上应用浏览器提供的存储接口，将缓存数据存入作为Local Storage的硬盘空间内。该方案的优点在于无需占用程序自身内存空间，但同时可能会导致一定程度上的兼容性缺失，以及可能造成数据泄露。

在客户端中的缓存区间设置完毕之后，该方法包括以下步骤：

S101，所述客户端接收获取网页内容的超文本传输协议HTTP请求。

在本申请优选的实施例中，用于接收HTTP请求的设备可以设置于客户端的网络层，该设备将实时地获取从所述客户端发送至所述服务器的HTTP请求(HTTP请求中携带有统一资源标识符URL)以及所述HTTP请求的类型，由于URI能够用于标识某一互联网资源名称的字符串，因此本实施例利用请求中携带的URI作为不同缓存数据的标识。在客户端与服务器之间设置独立的网络层并拦截进出系统的所有HTTP请求之后，即对各HTTP请求的类型以及其中携带的URL进行获取。当用户在客户端屏幕上显示的页面中点击页面内容并发起HTTP请求时，客户端接收到用户发起的HTTP请求。当用户请求某个网页页面时，则发起的是获取网页内容的HTTP请求(GET请求)。

S102，查询所述缓存区间中是否存在可用的缓存数据。

基于S101中的说明，针对缓存区间中的众多缓存数据，该步骤首先获取HTTP请求中携带的URL，随后查询缓存空间中是否存在与URL对应的缓存数据，并在查询结果为存在时确定缓存数据是否可用。

由于本申请主要是为了避免重复或者无效的用于获取网页内容的请求耗费服务器的资源。因此在具体的应用场景中，HTTP请求的类型还可以为在服务器上创建资源的请求、在服务器上修改资源的请求或在服务器上删除资源的请求，向所述服务器发送所述HTTP请求。因此，若HTTP请求的类型为获取GET的话，即查询客户端的缓存空间中是否存在与所述URL对应的缓存数据，并在查询结果为存在时确定所述缓存数据是否可用。

而对于仅执行其他操作的HTTP请求，例如在服务器上创建资源的请求POST、在服务器上修改资源的请求PUT或在服务器上删除资源的请求DELETE等，如果HTTP请求的类型为POST、PUT或DELETE，该步骤将向所述服务器发送所述HTTP请求，并根据服务器返回的内容分别进行以下处理：

(1)接收所述服务器返回的响应结果，若所述服务器返回操作成功响应，将所述服务器中与所述URL对应的数据进行渲染，并在当所述客户端的更新状态标识为有效时，在所述缓存区间中更新与所述URL对应的缓存数据，所述更新标识为所述客户端在初始化后与所述服务器交互设置的。

为了保持缓存数据的可用性，本申请还设置了缓存更新机制，该机制由客户端在初始化后与所述服务器交互进行设置。在优选的实施例中，客户端的在其中的程序第一次载入时向服务器询问是否需要进行缓存更新，并根据服务器返回的结果设置自身的更新状态标识为有效或是无效。对于发起请求的客户端来说，在拦截写数据的HTTP请求且在请求成功后即可更新对应的缓存数据，而对于网络系统中的其他客户端来说，则是利用服务器推送技术，当某一用户通过POST、PUT或DELETE类型的HTTP请求对数据库中某一资源执行了写操作后，将向相同网络系统中的其他客户端广播更新事件，通知在线程序进行缓存更新。具体方式如下：

向所述网络系统中的其他客户端广播携带所述缓存数据及其对应的URL的更新事件，以使所述网络系统中的其他客户端根据所述更新事件对自身缓存区间中的缓存数据进行更新。

(2)若所述服务器返回操作失败响应，执行预设的错误处理流程。

当服务器返回操作失败响应的话，那么意味着本次请求有错误发生，在缓存层不做任何操作，在程序上将控制权交给正常的业务处理逻辑，使程序进入正常的错误处理流程。

S103，若所述缓存区间中存在缓存数据，且所述缓存数据可用，向所述客户端返回所述缓存数据。

如果缓存数据可用，那么该步骤直接使用该缓存数据并将缓存数据返回至客户端，不对服务器发起请求操作。

S104，否则，向所述服务器发送所述HTTP请求，接收所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

如果客户端的缓存空间中不存在与所述URL对应的缓存数据，那么同样需要向所述服务器发送所述HTTP请求，将所述服务器返回的数据作为与所述URL对应的缓存数据存储至所述缓存区间。

此外，如果缓存数据不可用，那么该步骤将向服务器发送该HTTP请求，获取可用的数据，并在服务器返回数据后使用以及保存该数据。在保存数据的同时将请求的URI作为该数据标识以进行缓存，以备下次请求使用。在本申请具体实施例中，执行过程如下：

将所述HTTP请求携带的URI作为所述服务器返回的数据的数据标识，并将所述数据标识和所述服务器返回的数据存储至所述缓存区间。

进一步地，为避免缓存数据无限消耗存储空间，可能需要引入定期缓存清理机制或者LRU等缓存淘汰机制，基于缓存区间的不同类型，具体处理方式如下：

(1)当所述缓存区间为所述客户端通过存储接口提供的硬盘空间时，根据预设的周期后对所述缓存区间中的缓存数据进行清理；

(2)当所述缓存区间为所述客户端的缓存层的内存区域时，根据预设的最近最少使用LRU机制对所述缓存区间中的缓存数据进行清理。

该方式中的LRU(Least recently used，最近最少使用)算法根据数据的历史访问记录来进行淘汰数据，因此当某个缓存数据最近被访问过的话，那么即可以判定其将来被访问的几率也更高，据此对缓存区间中不常被读取的缓存数据进行淘汰。

相应地，本申请还提出了一种单页web应用的页面数据处理设备，所述设备应用于包括客户端以及服务器的网络系统中，如图2所示，该客户端中设置有用于存储缓存数据的缓存区间210，所述设备包括：

接收模块220，用于接收获取网页内容的超文本传输协议HTTP请求；

查询模块230，用于查询所述缓存区间中是否存在可用的缓存数据；

处理模块240，用于在所述缓存区间中存在缓存数据且所述缓存数据可用时，利用所述缓存数据生成所述HTTP请求所请求的网页内容，否则通过发送模块向所述服务器发送所述HTTP请求，利用所述接收模块接收的所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

在具体的应用场景中，还包括：

存储模块，用于将所述HTTP请求携带的统一资源标识符URI作为所述服务器返回的数据的数据标识，并将所述数据标识和所述服务器返回的数据存储至所述缓存区间。

在具体的应用场景中，所述查询模块具体包括：

获取子模块，用于获取所述HTTP请求中携带的URL；

查找子模块，用于查询所述缓存空间中是否存在与所述URL对应的缓存数据，并在查询结果为存在时确定所述缓存数据是否可用。

在具体的应用场景中，所述接收模块接收的所述HTTP请求的类型为在服务器上创建资源的请求、在服务器上修改资源的请求或在服务器上删除资源的请求，所述处理模块通过所述发送模块向所述服务器发送所述HTTP请求，所述接收模块接收所述服务器返回的响应结果，

所述处理模块，用于在所述服务器返回操作成功响应时，将所述服务器中与所述URL对应的数据进行渲染，并在当所述客户端的更新状态标识为有效时，利用所述存储模块在所述缓存区间中更新与所述URL对应的缓存数据，所述更新标识为所述客户端在初始化后与所述服务器交互设置的；

所述装置还包括容错模块，用于在所述服务器返回操作失败响应时执行预设的错误处理流程。

在具体的应用场景中，还包括：

广播模块，用于向所述网络系统中的其他客户端广播携带所述缓存数据及其对应的URL的更新事件，以使所述网络系统中的其他客户端根据所述更新事件对自身缓存区间中的缓存数据进行更新。

在具体的应用场景中，所述缓存区间为所述客户端的缓存层的内存区域；或，所述缓存区间为所述客户端通过存储接口提供的硬盘空间。

在具体的应用场景中，还包括：

清理模块，用于在当所述缓存区间为所述客户端通过存储接口提供的硬盘空间时根据预设的周期后对所述缓存区间中的缓存数据进行清理；以及在当所述缓存区间为所述客户端的缓存层的内存区域时根据预设的最近最少使用LRU机制对所述缓存区间中的缓存数据进行清理。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景所述的方法。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。

本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。

以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

Claims (14)

1.一种单页web应用的页面数据处理方法，其特征在于，所述方法应用于客户端中，所述客户端中设置有用于存储缓存数据的缓存区间，所述方法包括：

所述客户端接收获取网页内容的超文本传输协议HTTP请求；

查询所述缓存区间中是否存在可用的缓存数据；

若所述缓存区间中存在缓存数据，且所述缓存数据可用，则利用所述缓存数据生成所述HTTP请求所请求的网页内容；

否则，向服务器发送所述HTTP请求，接收所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

2.如权利要求1所述的方法，其特征在于，在接收所述服务器返回的数据之后，还包括：

将所述HTTP请求携带的统一资源标识符URI作为所述服务器返回的数据的数据标识，并将所述数据标识和所述服务器返回的数据存储至所述缓存区间。

3.如权利要求2所述的方法，其特征在于，查询所述缓存区间中是否存在可用的缓存数据，具体包括：

获取所述HTTP请求中携带的URL；

查询所述缓存空间中是否存在与所述URL对应的缓存数据，并在查询结果为存在时确定所述缓存数据是否可用。

4.如权利要求2所述的方法，其特征在于，所述HTTP请求的类型为在服务器上创建资源的请求、在服务器上修改资源的请求或在服务器上删除资源的请求，向所述服务器发送所述HTTP请求；还包括：

接收所述服务器返回的响应结果，若所述服务器返回操作成功响应，将所述服务器中与所述URL对应的数据进行渲染，并在当所述客户端的更新状态标识为有效时，在所述缓存区间中更新与所述URL对应的缓存数据，所述更新标识为所述客户端在初始化后与所述服务器交互设置的；

若所述服务器返回操作失败响应，执行预设的错误处理流程。

5.如权利要求4所述的方法，其特征在于，在当所述客户端的更新状态标识为有效时，在所述缓存区间中更新与所述URL对应的缓存数据之后，还包括：

向所述网络系统中的其他客户端广播携带所述缓存数据及其对应的URL的更新事件，以使所述网络系统中的其他客户端根据所述更新事件对自身缓存区间中的缓存数据进行更新。

6.如权利要求1-5任一项所述的方法，其特征在于，

所述缓存区间为所述客户端的缓存层的内存区域；或，

所述缓存区间为所述客户端通过存储接口提供的硬盘空间。

7.如权利要求6所述的方法，其特征在于，

当所述缓存区间为所述客户端通过存储接口提供的硬盘空间时，根据预设的周期后对所述缓存区间中的缓存数据进行清理；

当所述缓存区间为所述客户端的缓存层的内存区域时，根据预设的最近最少使用LRU机制对所述缓存区间中的缓存数据进行清理。

8.一种单页web应用的页面数据处理设备，其特征在于，所述设备作为客户端且设置有用于存储缓存数据的缓存区间，所述设备包括：

接收模块，用于接收获取网页内容的超文本传输协议HTTP请求；

查询模块，用于查询所述缓存区间中是否存在可用的缓存数据；

处理模块，用于在所述缓存区间中存在缓存数据且所述缓存数据可用时，利用所述缓存数据生成所述HTTP请求所请求的网页内容，否则通过发送模块向所述服务器发送所述HTTP请求，利用所述接收模块接收的所述服务器返回的数据，生成所述HTTP请求所请求的网页内容。

9.如权利要求8所述的设备，其特征在于，还包括：

存储模块，用于将所述HTTP请求携带的统一资源标识符URI作为所述服务器返回的数据的数据标识，并将所述数据标识和所述服务器返回的数据存储至所述缓存区间。

10.如权利要求9所述的设备，其特征在于，所述查询模块具体包括：

获取子模块，用于获取所述HTTP请求中携带的URL；

查找子模块，用于查询所述缓存空间中是否存在与所述URL对应的缓存数据，并在查询结果为存在时确定所述缓存数据是否可用。

11.如权利要求9所述的设备，其特征在于，所述接收模块接收的所述HTTP请求的类型为在服务器上创建资源的请求、在服务器上修改资源的请求或在服务器上删除资源的请求，所述处理模块通过所述发送模块向所述服务器发送所述HTTP请求，所述接收模块接收所述服务器返回的响应结果，

所述处理模块，用于在所述服务器返回操作成功响应时，将所述服务器中与所述URL对应的数据进行渲染，并在当所述客户端的更新状态标识为有效时，利用所述存储模块在所述缓存区间中更新与所述URL对应的缓存数据，所述更新标识为所述客户端在初始化后与所述服务器交互设置的；

所述装置还包括：

容错模块，用于在所述服务器返回操作失败响应时执行预设的错误处理流程。

12.如权利要求11所述的设备，其特征在于，还包括：

广播模块，用于向所述网络系统中的其他客户端广播携带所述缓存数据及其对应的URL的更新事件，以使所述网络系统中的其他客户端根据所述更新事件对自身缓存区间中的缓存数据进行更新。

13.如权利要求8-12任一项所述的设备，其特征在于，

所述缓存区间为所述客户端的缓存层的内存区域；或，

所述缓存区间为所述客户端通过存储接口提供的硬盘空间。

14.如权利要求13所述的设备，其特征在于，还包括：

清理模块，用于在当所述缓存区间为所述客户端通过存储接口提供的硬盘空间时根据预设的周期后对所述缓存区间中的缓存数据进行清理；以及在当所述缓存区间为所述客户端的缓存层的内存区域时根据预设的最近最少使用LRU机制对所述缓存区间中的缓存数据进行清理。