CN105677688A - 页面数据加载方法和系统 - Google Patents

Abstract

一种页面数据加载方法，所述方法包括：创建视图窗口，在所述视图窗口中载入页面；在所述页面中生成数据请求，所述数据请求为TCP请求；根据所述数据请求调用所述页面封装的JavaScript类库；通过所述JavaScript类库调用客户端的开放接口；通过所述客户端的开放接口调用所述数据请求，并通过所述客户端与服务器之间建立起的TCP长连接发送所述数据请求；接收服务器通过所述TCP长连接返回的与所述数据请求对应的数据；将接收到的数据加载至所述页面。采用该方法能够有效提高页面数据加载速度。此外还提供一种页面数据加载系统。

Description

页面数据加载方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种页面数据加载方法和系统

背景技术

HTTP协议(HyperTextTransferProtocol，超文本传输协议)是用于从WWW(WorldWideWeb，简称Web)服务器传输超文本到客户端本地浏览器的传送协议。HTTP协议是一个应用层协议，由请求和响应两部分构成。客户端与服务器建立连接后，在客户端的浏览器页面中输入一个URL时，浏览器会创建并发送HTTP请求，该HTTP请求包含所输入的URL以及与浏览器本身相关的信息。在发送HTTP请求之前，客户端与服务器通过三次TCP握手进行连接。当服务器收到这个请求时将返回一个响应，该响应包括与该请求对应的信息以及从指定URL处获取到的数据，客户端通过浏览器解析该响应并显示对应的内容。

传统的页面数据加载方式是通过客户端浏览器发送HTTP请求，将服务器响应HTTP请求返回的数据加载至页面。由于HTTP请求会导致DNS(DomainNameSystem，域名系统)请求和解析耗费较多时间，同时，HTTP请求会耗费服务器资源，特别是对于需要计算合并等操作的服务器，会耗费较多的CPU资源。由此延长了服务器响应HTTP请求返回数据的时间，导致客户端的页面中数据加载速度缓慢。

发明内容

基于此，有必要针对上述技术问题，提供一种能够有效提高页面中数据加载速度的页面数据加载方法和系统。

一种页面数据加载方法，所述方法包括：

创建视图窗口，在所述视图窗口中载入页面；

在所述页面中生成数据请求，所述数据请求为TCP请求；

根据所述数据请求调用所述页面封装的JavaScript类库；

通过所述JavaScript类库调用客户端的开放接口；

通过所述客户端的开放接口调用所述数据请求，并通过所述客户端与服务器之间建立起的TCP长连接发送所述数据请求；

接收服务器通过所述TCP长连接返回的与所述数据请求对应的数据；

将接收到的数据加载至所述页面。

一种页面数据加载系统，所述系统包括：

页面载入模块，用于创建视图窗口，在所述视图窗口中载入页面；

数据请求生成模块，用于在所述页面中生成数据请求，所述数据请求为TCP请求；

第一调用模块，用于根据所述数据请求调用所述页面封装的JavaScript类库；

第二调用模块，用于通过所述JavaScript类库调用客户端的开放接口；

数据请求发送模块，用于通过所述客户端的开放接口调用所述数据请求，并通过所述客户端与服务器之间建立起的TCP长连接发送所述数据请求；

第一数据接收模块，用于接收服务器通过所述TCP长连接返回的与所述数据请求对应的数据；

数据加载模块，用于将接收到的数据加载至所述页面。

上述页面数据加载方法和系统，通过客户端的视图窗口载入页面，在页面中发送数据请求后，调用页面封装的JavaScript类库，JavaScript类库调用客户端的开放接口，使得客户端开放接口调用该数据请求通过客户端与服务器之间的TCP长连接请求数据，并接收服务器通过该TCP长连接返回的与数据请求对应的数据。由于在页面发送的数据请求为TCP请求，克服了由于HTTP请求耗费资源的问题，同时客户端通过与服务器之间的TCP长连接发送该数据请求并接收与数据请求对应的数据，减少了在发送HTTP请求前进行的三次TCP握手，提高了数据传输速率，因此有效提高了页面数据加载速度。

附图说明

图1为一个实施例中页面数据加载方法的应用环境图；

图2为一个实施例中页面数据加载方法的流程图；

图3为一个实施例中资源请求的流程图；

图4为一个实施例中页面数据加载系统的结构示意图；

图5为一个实施例中数据加载模块的结构示意图；

图6为又一个实施例中页面数据加载系统的结构示意图；

图7为另一个实施例中页面数据加载系统的结构示意图；

图8为再一个实施例中页面数据加载系统的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供的页面数据加载方法可应用于如图1所示的环境中。客户端对应的客户机102与服务器104通过网络106建立TCP长连接。在客户端创建一个视图窗口，在视图窗口中载入页面，在页面中生成数据请求，该数据请求为TCP请求，通过TCP长连接将该数据请求发送至服务器104。服务器104响应该数据请求，并将与该数据请求对应的数据通过TCP长连接返回至客户端，客户端将接收到的数据加载至页面，在客户机102上进行展示。由于页面发送的数据请求为TCP请求，并通过TCP长连接发送数据请求并接收与数据请求对应的数据，有效提高了页面数据加载速度。进一步的，在视图窗口载入页面之后，还可以在页面生成资源请求，该资源请求为HTTP请求。拦截该资源请求后，在客户机102本地查询是否存储有与资源请求对应的资源，如果有，则直接将对应的资源加载至页面，否则，将资源请求发送至服务器104，服务器104可以是缓存服务器，将从服务器获取到的对应的资源下载到客户机102本地进行存储。若再次生成该资源请求，则直接从客户机102本地获取对应的资源加载至页面。由于将资源请求进行拦截，将从本地存储的对应的资源加载至网页，减少了HTTP请求，因此使得页面资源加载速度得到提高。

在一个实施例中，如图2所示，提供了一种页面数据加载方法，本实施例以该方法应用于客户端为例进行说明，具体包括：

步骤202，创建视图窗口，在视图窗口中载入页面。

在客户端创建一个视图窗口，具体的可以是在ios、android或者winphone操作系统中的底层创建视图窗口。页面是指web页面，页面中可以包括图形、文字、声音和视频等信息。在一个优选的实施例中，页面可以是根据H5开发的web页面，H5是HTML(HyperTextMarkupLanguage，超文本标记语言)第五次修改后的版本。

步骤204，在页面中生成数据请求，数据请求为TCP请求。

数据请求包括但不限于数据的获取、上传、删除和存储请求等。在页面中可以通过多种方式生成数据请求，可以在页面的搜索栏内输入关键字，点击搜索按键，生成数据请求；也可以点击页面展示的标题，如页面推送的新闻标题等，生成数据请求。在一个优选的实施例中，关闭页面中所有HTTP请求的对外接口，数据请求不再采用HTTP请求，在页面中生成的数据请求为TCP请求。TCP(TransmissionControlProtocol，传输控制协议)是一种面向连接的、可靠的、基于IP的传输层协议。在客户端与服务器建立TCP连接后，客户端可以向服务器发送TCP请求。

步骤206，根据数据请求调用页面封装的JavaScript类库。

JavaScript是一种脚本语言。类库是指类的集合，包括接口、抽象类和具体类。本实施例中，可以采用常见的JavaScript类库，如jQuery、prototype等。也可以将JavaScript文件通过JavaScript闭包封装机制封装成JavaScript类，然后将JavaScript类封装成JavaScript类库。客户端具有一个开放类，可以是采用Java语言描述的Java类。通过该开放类，可以调用页面封装的JavaScript类库。

步骤208，通过JavaScript类库调用客户端的开放接口。

客户端具有不同类型的开放接口，可以是ios、android或winphone等操作系统中的不同类型的多种开放接口。根据数据请求JavaScript类库发出调用对应的客户端的开放接口的信号，视图窗口监听到该信号之后，客户端的开放类就通过该信号调用与数据请求对应的客户端的开放接口。

步骤210，通过客户端的开放接口调用数据请求，并通过客户端与服务器之间建立起的TCP长连接发送数据请求。

长连接是指在TCP通讯中客户端与服务器直接一直保持连接，不管当前是否发送或者接收数据。如果在发送数据请求时客户端与服务器之间尚未建立长连接，则首先建立长连接，然后发送数据请求，如果长连接已经建立好，则可以直接通过该长连接发送数据请求。

在客户端的开放类接收到调用与数据请求对应的客户端的开放接口的信号之后，调用客户端的一个封装的TCP调用类，该TCP调用类可以调用多种TCP连接方法。将该TCP调用类和数据请求组成数据包，通过TCP长连接发送至服务器。

步骤212，接收服务器通过TCP长连接返回的与数据请求对应的数据。

服务器接收到包含数据请求的数据包之后，将该数据包发送至挂载在服务器下面的PHP应用程序，如php-cgi，进行对应的处理，PHP应用程序处理完毕后，将与该数据请求对应的数据传送至服务器。客户端通过TCP长连接接收服务器返回的与数据请求对应的数据。如果服务器未能获取到与数据请求对应的数据，则客户端接收服务器返回的数据请求失败的信息。

步骤214，将接收到的数据加载至页面。

将接收到的数据进行渲染后加载至页面，在页面上显示与数据请求对应的内容。如果未能接收到与数据请求对应的内容，则在页面中加载数据请求失败的信息。

本实施例中，通过客户端的视图窗口载入页面，在页面中发送数据请求后，调用页面封装的JavaScript类库，JavaScript类库调用客户端的开放接口，使得客户端开放接口调用该数据请求通过客户端与服务器之间的TCP长连接请求数据，并接收服务器通过该TCP长连接返回的与数据请求对应的数据。由于在页面发送的数据请求为TCP请求，克服了由于HTTP请求耗费资源的问题，同时客户端通过与服务器之间的TCP长连接发送该数据请求并接收与数据请求对应的数据，减少了在发送HTTP请求前进行的三次TCP握手，提高了数据传输速率，因此有效提高了页面数据加载速度。

在一个实施例中，将接收到的数据加载至页面的步骤包括：通过客户端的开放接口将接收到的与数据请求对应的数据返回至页面的JavaScript类库的开放接口；通过JavaScript类库的开放接口接收与数据请求对应的数据；通过JavaScript类库对接收到的与数据请求对应的数据进行渲染，并在页面中进行展示。

本实施例中，JavaScript类库的开放接口包括数据传送接口和数据渲染接口。客户端的开放接口将接收到的与数据请求对应的数据返回至页面的JavaScript类库的数据传送接口，通过该数据传送接口JavaScript类库接收与数据请求对应的数据，并通过数据渲染接口将接收到的数据进行渲染，渲染之后在页面中进行展示。

在一个实施例中，创建视图窗口，在视图窗口中载入页面的步骤之前，还包括：开启预设的数据出入接口，数据出入接口用于发送数据请求至服务器和用于接收从服务器返回的与数据请求对应的数据。

本实施例中，预设的数据出入接口，可以是预先设置的可以提供Socket代理服务的代理服务器，比如类似于Nginx的代理服务器，该代理服务器的代码可以采用C语言进行描述。客户端与该代理服务器建立TCP长连接，通过该代理服务器，客户端发送数据请求至服务器，以及接收从服务器返回的与数据请求对应的数据。由于通过客户端通过该预设的数据出入接口发送数据请求并接收与数据请求对应的数据，由此保证了客户端接收的数据的安全性。

在一个实施例中，如图3所示，创建视图窗口，在视图窗口中载入页面的步骤之后，还包括：

步骤302，在页面生成资源请求，资源请求为HTTP请求。

步骤304，拦截资源请求。

步骤306，查询本地是否存储有与资源请求对应的资源；若有，则进入步骤308，否则，进入步骤310。

步骤308，将与资源请求对应的资源加载至页面。

步骤310，向服务器发送资源请求。

本实施例中，资源的类型可以是图片、音频、视频、文字以及其他可以在页面中展示的内容。在视图窗口载入页面之后，可以在页面生成资源请求。由于资源文件的请求目前无法使用TCP请求，因此该资源请求为HTTP请求。资源请求生成后，拦截该资源请求，拦截的方式可以采用HTTP请求拦截工具，如Fiddler(HTTP协议调试代理工具)、HttpRequestInterceptor(HTTP请求拦截器)等；也可采用代理拦截技术，也就是可以通过上述实施例中提及的代理服务器进行拦截。如果查询到本地存储有与资源请求对应的资源，则直接将对应的资源加载至页面；否则，客户端向服务器发送资源请求。在一个优选的实施例中，服务器可以是缓存服务器，如CND(ContentDeliveryNetwork，内容分发网络)等。由于将资源请求拦截后将本地与资源请求对应的资源直接加载至页面，因此有效减少了HTTP请求，提高了页面资源加载速度。

可以理解，数据请求与资源请求可以是并行的，两者并不冲突。如果有数据请求则执行数据请求的步骤，如果有资源请求则执行资源请求的步骤。可以在资源加载的过程中发送数据请求，也可以在资源加载完毕后发送数据请求。

在一个实施例中，向服务器发送资源请求的步骤之后，还包括：接收服务器返回的与资源请求对应的资源；将接收到的与资源请求对应的资源存储在本地。

本实施例中，将接收到的与资源请求对应的资源存储在本地。在页面再次生成该资源请求时，将资源请求进行拦截，直接将存本地存储的资源加载至页面。由此进一步减少了HTTP请求，使得页面资源加载速度得到进一步提高。

在一个实施例中，如图4所示，提供了一种页面数据加载系统，该系统包括：页面载入模块402、数据请求生成模块404、第一调用模块406、第二调用模块408、数据请求发送模块410、第一数据接收模块412和数据加载模块414，其中：

页面载入模块402，用于创建视图窗口，在视图窗口中载入页面。

数据请求生成模块404，用于在页面中生成数据请求，数据请求为TCP请求。

第一调用模块406，用于根据数据请求调用页面封装的JavaScript类库。

第二调用模块408，用于通过JavaScript类库调用客户端的开放接口。

数据请求发送模块410，用于通过客户端的开放接口调用数据请求，并通过客户端与服务器之间建立起的TCP长连接发送数据请求。

第一数据接收模块412，用于接收服务器通过TCP长连接返回的与数据请求对应的数据。

数据加载模块414，用于将接收到的数据加载至页面。

在一个实施例中，如图5所示，数据加载模块414包括：数据返回模块414a、第二数据接收模块414b和数据渲染模块414c，其中：

数据返回模块414a，用于通过客户端的开放接口将接收到的与数据请求对应的数据返回至页面的JavaScript类库的开放接口。

第二数据接收模块414b，用于通过JavaScript类库的开放接口接收与数据请求对应的数据。

数据渲染模块414c，用于通过JavaScript类库对接收到的与数据请求对应的数据进行渲染，并在页面中进行展示。

在一个实施例中，如图6所示，该系统还包括：开启模块416，用于开启预设的数据出入接口，数据出入接口用于发送数据请求至服务器和用于接收从服务器返回的与数据请求对应的数据。

在一个实施例中，如图7所示，该系统还包括：资源请求生成模块418、拦截模块420、查询模块422、资源载入模块424和资源请求发送模块426，其中：

资源请求生成模块418，用于在页面生成资源请求，资源请求为HTTP请求。

拦截模块420，用于拦截资源请求。

查询模块422，用于查询本地是否存储有与资源请求对应的资源。

资源载入模块424，用于将本地存储的与资源请求对应的资源载入页面。

资源请求发送模块426，用于若本地未存储与资源请求对应的资源，则向服务器发送资源请求。

在一个实施例中，如图8所示，该系统还包括：资源接收模块428和存储模块430，其中：

资源接收模块428，用于接收服务器返回的与资源请求对应的资源。

存储模块430，用于将接收到的与资源请求对应的资源存储在本地。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面数据加载方法，所述方法包括：

创建视图窗口，在所述视图窗口中载入页面；

在所述页面中生成数据请求，所述数据请求为TCP请求；

根据所述数据请求调用所述页面封装的JavaScript类库；

通过所述JavaScript类库调用客户端的开放接口；

通过所述客户端的开放接口调用所述数据请求，并通过所述客户端与服务器之间建立起的TCP长连接发送所述数据请求；

接收服务器通过所述TCP长连接返回的与所述数据请求对应的数据；

将接收到的数据加载至所述页面。

2.根据权利要求1所述的方法，其特征在于，所述将接收到的数据加载至所述页面的步骤包括：

通过所述客户端的开放接口将接收到的与所述数据请求对应的数据返回至所述页面的JavaScript类库的开放接口；

通过所述JavaScript类库的开放接口接收所述与数据请求对应的数据；

通过JavaScript类库对接收到的所述与数据请求对应的数据进行渲染，并在所述页面中进行展示。

3.根据权利要求1所述的方法，其特征在于，所述创建视图窗口，在所述视图窗口中载入页面的步骤之前，还包括：

开启预设的数据出入接口，所述数据出入接口用于发送所述数据请求至服务器和用于接收从服务器返回的与所述数据请求对应的数据。

4.根据权利要求1所述的方法，其特征在于，所述创建视图窗口，在所述视图窗口中载入页面的步骤之后，还包括：

在所述页面生成资源请求，所述资源请求为HTTP请求；

拦截所述资源请求；

查询本地是否存储有与所述资源请求对应的资源；

若有，则将与所述资源请求对应的资源加载至所述页面；

否则，向服务器发送所述资源请求。

5.根据权利要求4所述的方法，其特征在于，所述向服务器发送所述资源请求的步骤之后，还包括：

接收服务器返回的与所述资源请求对应的资源；

将接收到的与所述资源请求对应的资源存储在本地。

6.一种页面数据加载系统，其特征在于，所述系统包括：

页面载入模块，用于创建视图窗口，在所述视图窗口中载入页面；

数据请求生成模块，用于在所述页面中生成数据请求，所述数据请求为TCP请求；

第一调用模块，用于根据所述数据请求调用所述页面封装的JavaScript类库；

第二调用模块，用于通过所述JavaScript类库调用客户端的开放接口；

数据请求发送模块，用于通过所述客户端的开放接口调用所述数据请求，并通过所述客户端与服务器之间建立起的TCP长连接发送所述数据请求；

第一数据接收模块，用于接收服务器通过所述TCP长连接返回的与所述数据请求对应的数据；

数据加载模块，用于将接收到的数据加载至所述页面。

7.根据权利要求6所述的系统，其特征在于，所述数据加载模块包括：

数据返回模块，用于通过所述客户端的开放接口将接收到的与所述数据请求对应的数据返回至所述页面的JavaScript类库的开放接口；

第二数据接收模块，用于通过所述JavaScript类库的开放接口接收所述与数据请求对应的数据；

数据渲染模块，用于通过JavaScript类库对接收到的所述与数据请求对应的数据进行渲染，并在所述页面中进行展示。

8.根据权利要求6所述的系统，其特征在于，所述系统还包括：

开启模块，用于开启预设的数据出入接口，所述数据出入接口用于发送所述数据请求至服务器和用于接收从服务器返回的与所述数据请求对应的数据。

9.根据权利要求6所述的系统，其特征在于，所述系统还包括：

资源请求生成模块，用于在所述页面生成资源请求，所述资源请求为HTTP请求；

拦截模块，用于拦截所述资源请求；

查询模块，用于查询本地是否存储有与所述资源请求对应的资源；

资源载入模块，用于将本地存储的与所述资源请求对应的资源载入所述页面；

资源请求发送模块，用于若本地未存储与所述资源请求对应的资源，则向服务器发送所述资源请求。

10.根据权利要求9所述的字体，其特征在于，所述系统还包括：

资源接收模块，用于接收服务器返回的与所述资源请求对应的资源；

存储模块，用于将接收到的与所述资源请求对应的资源存储在本地。