加载页面的方法、装置和系统与流程

本申请涉及计算机应用领域，特别是涉及加载页面的方法、装置和系统。

背景技术：

在网页页面中通常会存在多个独立的区块，而这种区块也可以称为组件。当加载页面时，针对页面中的多个组件，浏览器需要从不同的组件数据服务器中为不同的组件获取组件数据，然后将多个组件的组件数据同时渲染在页面上。

在现有技术中，受到自身处理能力的限制，浏览器是采用单线程的方式从不同的组件数据服务器获取为不同的组件获取各自的组件数据的。例如，如图1所示，假设在某一个待加载的页面中包含四个组件，浏览器需要先逐个地为四个组件建立与相应的组件数据服务器的连接，即，只有当一个连接建立完后，浏览器才能建立下一个连接。所有连接建立完毕后，同样的，浏览器还需要逐个地为四个组件向相应的组件数据服务器发送请求，以获取组件数据，即，只有当一个请求发送出去后，浏览器才能发送下一个请求。

在实现本申请的过程中，本申请的发明人发现现有技术中至少存在如下问题：由于浏览器是以单线程的方式为页面中多个组件获取各自的组件数据的，因此，这种单线程的处理方式会导致浏览器获取组件数据的速度较慢，进而影响了页面的加载速度。

技术实现要素：

为了解决上述技术问题，本申请实施例提供了加载页面的方法、装置和系统，以使得浏览器可以更快速地为页面中的多个组件获取到各自的组件数据，进而提高页面的加载速度。

本申请实施例公开了如下技术方案：

一种加载页面的方法，包括：

中间层服务器接收浏览器发送的一个网络请求，所述网络请求用于请求 获取多个组件的组件数据，所述多个组件位于待加载页面中；

响应于所述网络请求，中间层服务器并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

优选的，所述网络请求是由多个子请求合并而成的，其中，一个子请求用于请求获取一个组件的组件数据。

优选的，在所述网络请求中携带有所述多个组件的组件数据的获取信息，所述获取信息包括：组件的名称、组件数据服务器的链接地址以及组件数据的获取参数。

优选的，所述响应于所述网络请求，中间层服务器并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器，包括：

响应于所述网络请求，中间层服务器从所述网络请求中解析出所述多个组件的组件数据的获取信息；

中间层服务器根据所述多个组件的组件数据的获取信息，并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

优选的，所述中间层服务器通过如下方式将所述多个组件的组件数据返回给所述浏览器：

中间层服务器在接收到浏览器发送的一个网络请求后，保持所述网络请求的网络连接；

中间层服务器在所述网络请求的网络连接上将所述多个组件的组件数据返回给所述浏览器。

优选的，所述中间层服务器与所述组件数据服务器位于同一个局域网内。

优选的，所述中间层服务器采用自定义的协议与所述组件数据服务器进行通信。

优选的，所述响应于所述网络请求，中间层服务器并发地从组件数据服务器中获取所述多个组件的组件数据并发送给所述浏览器具体为：

响应于所述网络请求，中间层服务器采用多线程技术或者异步IO技术实现并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

优选的，所述方法还包括：

每当所述中间层服务器返回一个组件的组件数据时，所述浏览器根据接收的一个组件的组件数据对待加载页面进行页面渲染。

一种加载页面的装置，位于中间层服务器上，所述装置包括：

接收单元，用于接收浏览器发送的一个网络请求，所述网络请求用于请求获取多个组件的组件数据，所述多个组件位于待加载页面中；

响应单元，用于响应于所述网络请求，并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

优选的，所述网络请求是由多个子请求合并而成的，其中，一个子请求用于请求获取一个组件的组件数据。

优选的，在所述网络请求中携带有所述多个组件的组件数据的获取信息，所述获取信息包括：组件的名称、组件数据服务器的链接地址以及组件数据的获取参数。

优选的，所述响应单元包括：

解析子单元，用于响应于所述网络请求，从所述网络请求中解析出所述多个组件的组件数据的获取信息；

响应执行子单元，用于根据所述多个组件的组件数据的获取信息，并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

优选的，所述响应单元包括：

连接保持子单元，用于在接收到浏览器发送的一个网络请求后，保持所述网络请求的网络连接；

数据返回子单元，用于在所述网络请求的网络连接上将所述多个组件的组件数据返回给所述浏览器。

优选的，所述中间层服务器与所述组件数据服务器位于同一个局域网内。

优选的，所述中间层服务器采用自定义的协议与所述组件数据服务器进行通信。

优选的，所述响应单元具体用于，响应于所述网络请求，采用多线程技术或者异步IO技术实现并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

一种加载页面的系统，包括前述的加载页面的装置以及浏览器；

所述浏览器用于，每当所述装置返回一个组件的组件数据时，根据接收的所述一个组件的组件数据对待加载页面进行页面渲染。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

本申请提出了一个中间层服务器，将获取组件数据的服务放到这个中间层服务器上。浏览器发送一次网络请求，就可以一次性将获取多个组件的组件数据所需的信息发送到该中间层服务器，中间层服务器可以并发地到组件数据服务器中获取组件数据，然后通过原有的连接将组件数据返回给浏览器。在本申请的方案，由于中间层服务器是并发地获取多个组件的组件数据的，因此，加速了组件数据的获取，提高了页面的加载速度。另外，也减少了浏览器发送网络请求的次数，进而减少了建立网络连接的开销以及传输网络消息的时间。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示意性地示出了现有技术中浏览器获取组件数据的原理示意图；

图2示意性地示出了本申请的实施方式可以在其中实施的示例性应用场景；

图3示意性地示出了根据本申请的实施例的一种加载页面的方法的流程图；

图4示意性地示出了根据本申请实施例的一种加载页面的总体时序图；

图5示意性地示出了根据本申请实施例的一种加载页面的装置的结构框图；

图6示意性地示出了根据本申请实施例的一种响应单元的结构框图；

图7示意性地示出了根据本申请实施例的一种加载页面的系统的结构框图。

具体实施方式

首先参考图2，图2示意性地示出了本申请的实施方式可以在其中实施的示例性应用场景。其中，在该应用场景中除了有浏览器10以及组件数据服务器30之外，还增加了中间层服务器20。当浏览器10加载网页A时，为了方便描述，假设在网页A中包含有三个组件，分别为A1、A2和A3。为了实现加载网页A，浏览器10需要先获取到组件A1、A2和A3的组件数据，因此，浏览器10向中间层服务器20发送网络请求11，以请求获取组件A1、A2和A3的组件数据，作为响应，中间层服务器20从组件数据服务器30中获取到组件A1、A2和A3的组件数据，每当获取到一个组件的组件数据之后，中间层服务器20就向浏览器10返回该组件的组件数据。浏览器10先将组件A1、A2和A3的组件数据作为页面元素渲染到网页A上，最后将渲染后的网页A显示给用户。其中，中间层服务器20以及组件数据服务器30可以是Web服务器，也可以是其他类型的服务器，例如APP服务器。本领域技术人员可以理解，图2所示的示意图仅是本发明的实施方式可以在其中得以实现的一个示例。本发明实施方式的应用范围不受到该框架任何方面的限制。例如，组件A1、A2和A3的组件数据可以位于同一个组件数据服务器30上，也可以位于不同的组件数据服务器上。

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图对本申请实施例进行详细描述。

方法实施例

请参阅图3，图3示意性地示出了根据本申请实施例的一种加载网页的方法的流程图，例如，该方法可以由中间层服务器20执行，该方法例如包括以下步骤：

步骤301：接收浏览器发送的一个网络请求，所述网络请求用于请求获取多个组件的组件数据，所述多个组件位于加载页面中。

在现有技术中，针对每一个组件，浏览器需要发送与该组件对应的网络请求，即，一个网络请求只能用于请求一个组件的组件数据，网络请求的个数与组件的个数是相同的。因此，如果加载页面包含多个组件，浏览器就需 要对外发送多个网络请求，以获取多个组件的组件数据。

但是，与现有技术不同的是，在本申请中，浏览器只需要发送一个网络请求，因为该网络请求可以用于请求获取多个组件的组件数据，而不是仅一个组件的组件数据。

在本申请的一个优选实施方式中，该网络请求可以由多个子请求合并而成，而一个子请求用于请求获取一个组件的组件数据。也就是说，子请求就是现有技术中浏览器对外发送的网络请求，其只能请求获取一个组件的组件数据。在本申请中，浏览器将多个子请求合并成了一个网络请求，以使得合并后的该网络请求可以同时请求获取多个组件的组件数据。

其中，在现有技术中，由于一个网络请求只携带有一个组件的组件数据的获取信息，因此，一个网络请求只能用于请求获取一个组件的组件数据。而在本申请的一个优选实施方式中，一个网络请求可以携带有多个组件的组件数据的获取信息，从而使得一个网络请求可以用于获取多个组件的组件数据。其中，获取信息包括：组件的名称、组件数据服务器的链接地址以及组件数据的获取参数。

例如，可以为网络请求定义一个数组形式的参数格式，并且该数组中的每一个元素即为一个组件的组件数据的获取信息：

[{组件的名称、组件数据服务器的URL、组件数据的获取参数},…]

也就是说，在该网络请求中，将多个组件的组件数据的获取信息合并在了一个数组中，从而使该网络请求可以请求多个组件的组件数据。

可以理解的，浏览器只需发送一个网络请求，就可以一次性将获取多个组件的组件数据所需要的信息发送到中间层服务器，与现有技术相比，减少了浏览器发送网络请求的次数，进而也就减少了建立网络连接的开销以及传输网络消息的时间。例如，针对n个组件，在现有技术中，浏览器需要发送n个网络请求，以获取n个组件的组件数据；而在本申请中，浏览器只需要发送1个网络请求，就可以获取n个组件的组件数据，减少了建立n-1个网络连接的开销以及传输n-1个网络消息的时间。

在本申请中，该网络请求可以是一个http请求，即，浏览器与中间层服务器之间需要建立一个http连接。并且，浏览器可以使用ajax技术将该http 请求在建立好的http连接上发送给中间层服务器。

步骤302：响应于所述网络请求，中间层服务器并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

在本申请中，将组件数据的真正获取过程从浏览器转移到了中间层服务器，与浏览器的单进程获取方式不同，由于中间层服务器可以利用node.js或者java等服务端语言，因此，基于这种语言特性，中间层服务器就可以并发地获取组件数据。当然，中间层服务器也可以采用其他的服务端语言，本申请对中间层服务器采用何种服务端语言并不做限定。

在本申请的一个优选实施方式中，在接收到浏览器发送的网络请求后，中间层服务器可以先从该网络请求中解析出多个组件的组件数据的获取信息，然后再根据多个组件的组件数据的获取信息，并发地从组件数据服务器中获取多个组件的组件数据。

其中，在本申请的另一个优选实施方式中，中间层服务器可以利用异步IO技术或者多线程技术并发地从组件数据服务器中获取组件数据。

当中间层服务器采用node.js服务端语言时，就可以利用异步IO技术实现并发地获取组件数据；当中间层服务器采用其它的服务端语言时，就可以利用多线程技术实现并发地获取组件数据。

例如，如果采用多线程技术，中间层服务器可以先建立一个线程池，将每一个组件的组件数据获取服务封装成一个任务，并放入该线程池中。当该线程池中的任意一个任务被执行时，通过rpc调用从组件数据服务器获取组件数据，并将组件数据直接在原有的连接上返回给浏览器。

如果采用异步IO技术，中间层服务器为每一个组件的组件数据获取服务设置一个回调函数，通过异步IO中的async库对多个组件的组件数据获取服务进行并行处理。当每一个组件的组件数据获取服务被执行时，通过rpc调用从组件数据服务器获取组件数据。当每一个回调函数被执行时，就将组件数据直接在原有的连接上返回给浏览器。

“原有的连接”就是指浏览器发送网络请求时与中间层服务器之间保持的连接。在本申请中，中间层服务器在接收到浏览器发送的一个网络请求之后，可以保持该网络请求的网络连接，以便于中间层服务器可以在该网络连 接上将获取的多个组件的组件数据返回给浏览器。当然，在所有组件的组件数据都已经返回给浏览器之后，中间层服务器可以断开该网络连接。

其中，组件数据服务器对外提供组件数据的rpc服务，中间层服务器可以通过rcp调用从组件数据服务器获取到其期望得到的组件数据。另外，采用node.js或者其它的服务端语言，可以使中间层服务器保持住与浏览器之间的连接，如，http连接，多个组件的组件数据可以多次地从一个连接中发送给浏览器。

请参阅图4，图4示意性地示出了根据本申请实施例的一种加载页面的总体时序图。

在本申请的一个优选实施方式中，每当所述中间层服务器返回一个组件的组件数据时，所述浏览器就可以根据接收的一个组件的组件数据对加载页面进行渲染，而无需等到所有的组件数据都接收到后再同时对加载页面进行渲染。

例如，浏览器可以监听readystate为3的数据传输状态，一旦监听到，就可以将接收到的组件数据渲染到待加载页面上。

另外，为了进一步节约传输链路，减少传输耗时，在本申请的另一个优选实施方式中，中间层服务器与组件数据服务器可以位于同一个局域网内。

并且，在本申请的另一个优选实施方式中，中间层服务器可以采用自定义的协议与所述组件数据服务器进行通信。与http协议相比，采用自定义的协议传输信令可以更快速以及稳定。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

本申请提出了一个中间层服务器，将获取组件数据的服务放到这个中间层服务器上。浏览器发送一次网络请求，就可以一次性将获取多个组件的组件数据所需的信息发送到该中间层服务器，中间层服务器可以并发地到组件数据服务器中获取组件数据，然后通过原有的连接将组件数据返回给浏览器。在本申请的方案，由于中间层服务器是并发地获取多个组件的组件数据的，因此，加速了组件数据的获取，提高了页面的加载速度。另外，也减少了浏览器发送网络请求的次数，进而减少了建立网络连接的开销以及传输网络消息的时间。

装置实施例

与上述加载页面的方法相对应，本申请实施例还提供了加载页面的装置。请参阅图5，图5示意性地示出了根据本申请实施例的一种加载页面的装置的结构框图，该装置位于中间层服务器20上，该装置例如可以包括接收单元501和响应单元502。下面结合该装置的工作原理进一步介绍其内部结构以及连接关系。

接收单元501，用于接收浏览器发送的一个网络请求，所述网络请求用于请求获取多个组件的组件数据，所述多个组件位于待加载页面中；

响应单元502，用于响应于所述网络请求，并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

在本申请的一个优选实施方式中，所述网络请求是由多个子请求合并而成的，其中，一个子请求用于请求获取一个组件的组件数据。

在本申请的一个优选实施方式中，在所述网络请求中携带有所述多个组件的组件数据的获取信息，所述获取信息包括：组件的名称、组件数据服务器的链接地址以及组件数据的获取参数。

在本申请的另一个优选实施方式中，如图6所示，响应单元502包括：

解析子单元5021，用于响应于所述网络请求，从所述网络请求中解析出所述多个组件的组件数据的获取信息；

响应执行子单元5022，用于根据所述多个组件的组件数据的获取信息，并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

在本申请的另一个优选实施方式中，响应单元502包括：

连接保持子单元，用于在接收到浏览器发送的一个网络请求后，保持所述网络请求的网络连接；

数据返回子单元，用于在所述网络请求的网络连接上将所述多个组件的组件数据返回给所述浏览器。

在本申请的另一个优选实施方式中，所述中间层服务器与所述组件数据服务器位于同一个局域网内。

在本申请的另一个优选实施方式中，所述中间层服务器采用自定义的协 议与所述组件数据服务器进行通信。

在本申请的另一个优选实施方式中，所述响应单元具体用于，响应于所述网络请求，采用多线程技术或者异步IO技术实现并发地从组件数据服务器中获取所述多个组件的组件数据并返回给所述浏览器。

本申请实施例还提供了加载页面的系统。请参阅图7，图7示意性地示出了根据本申请实施例的一种加载页面的系统的结构框图，该系统包括上述任意一种加载页面的装置71以及浏览器72；其中，

浏览器72用于，每当所述装置返回一个组件的组件数据时，根据接收的所述一个组件的组件数据对待加载页面进行页面渲染。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

本申请提出了一个中间层服务器，将获取组件数据的服务放到这个中间层服务器上。浏览器发送一次网络请求，就可以一次性将获取多个组件的组件数据所需的信息发送到该中间层服务器，中间层服务器可以并发地到组件数据服务器中获取组件数据，然后通过原有的连接将组件数据返回给浏览器。在本申请的方案，由于中间层服务器是并发地获取多个组件的组件数据的，因此，加速了组件数据的获取，提高了页面的加载速度。另外，也减少了浏览器发送网络请求的次数，进而减少了建立网络连接的开销以及传输网络消息的时间。

所述领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述到的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合 或通信连接，可以是电性、机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，可以采用软件功能单元的形式实现。

需要说明的是，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上对本申请所提供的加载页面的方法、装置和系统进行了详细介绍，本文中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。