CN106294594A - 页面渲染方法及装置 - Google Patents

Abstract

本公开是关于一种页面渲染方法及装置。所述方法包括：浏览器向服务器发送页面渲染请求；所述浏览器接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。如此，既节省了服务器的处理资源，又合理利用了浏览器的闲置资源，使资源利用率最大化，有助于提高页面渲染速度。

Description

页面渲染方法及装置

技术领域

本公开涉及数据处理领域，具体地，涉及一种页面渲染方法及装置。

背景技术

客户端用户通过浏览器访问网页时，可以通过页面渲染将用户请求的网页呈现给用户。

具体地，浏览器解析用户输入的URL地址，向服务器发出页面渲染请求后，服务器可以根据用户权限，获取页面展示所需的页面元素及数据，并将数据填充到对应的页面元素处，生成html文件，发送至浏览器，由浏览器根据html文件完成页面渲染。

由上文所做介绍可知，页面渲染过程中涉及的计算大多由服务器完成，例如，权限控制、准备页面元素、获取数据、填充数据等均由服务器完成，致使服务器的处理资源被大量消耗，给服务器造成较大的负担，若服务器发生阻塞，还会影响浏览器的渲染效果。在高并发情况下，上述问题显得尤为突出。

发明内容

本公开的目的是提供一种页面渲染方法及装置，用以充分利用服务器和浏览器的处理资源，提高页面渲染速度。

本公开实施例提供了一种页面渲染方法，所述方法包括：浏览器向服务器发送页面渲染请求；所述浏览器接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

可选地，所述页面渲染请求包括用户身份信息，则所述页面元素由所述服务器根据用户权限信息选取，所述用户权限信息为所述服务器根据所述用户身份信息确定。

可选地，所述页面渲染请求包括用户身份信息，所述页面渲染响应包括用户权限信息，所述用户权限信息为所述服务器根据所述用户身份信息确定，则在所述浏览器接收所述服务器返回的页面渲染响应之后，所述方法还包括：所述浏览器根据所述用户权限信息，从所述页面元素中选取待展示页面元素。

可选地，所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染的步骤包括：

每个所述页面元素根据所述对应关系，获取各自对应的所述页面数据；

每个所述页面元素将各自对应的所述页面数据填充到该页面元素自身所在的位置，完成页面渲染。

可选地，所述方法还包括：所述浏览器在本地缓存所述页面结构。

可选地，所述装置还包括：在所述用户身份信息、所述用户权限信息和所述对应关系中的至少一者发生变更时，所述浏览器向所述服务器发送请求，用以更新本地缓存的页面结构。

本公开实施例提供了一种页面渲染装置，所述装置包括：

请求发送单元，用于向服务器发送页面渲染请求；

响应接收单元，用于接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；

数据填充单元，用于根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

可选地，所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，则所述页面元素由所述服务器根据用户权限信息选取，所述用户权限信息为所述服务器根据所述用户身份信息确定。

可选地，所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，所述页面渲染响应包括用户权限信息，所述用户权限信息为所述服务器根据所述用户身份信息确定，则所述装置还包括：选取单元，用于在所述响应接收单元接收所述页面渲染响应之后，根据所述用户权限信息，从所述页面元素中选取待展示页面元素。

可选地，所述数据填充单元包括：

获取子模块，用于由每个所述页面元素根据所述对应关系，获取各自对应的所述页面数据；

数据填充子模块，用于由每个所述页面元素将各自对应的所述页面数据填充到该页面元素自身所在的位置，完成页面渲染。

可选地，所述装置还包括：缓存单元，用于在本地缓存所述页面结构。

可选地，所述装置还包括：更新单元，用于在所述用户身份信息、所述用户权限信息和所述对应关系中的至少一者发生变更时，向所述服务器发送请求，用以更新本地缓存的页面结构。

本公开技术方案，将页面渲染过程划分为两个阶段：服务器页面渲染阶段和浏览器页面渲染阶段。服务器页面渲染阶段，服务器只需要建立页面元素与页面数据的对应关系，并将页面元素和对应关系封装为页面结构，将页面数据和页面结构发送至浏览器。浏览器页面渲染阶段，浏览器接收到页面数据和页面结构后，解析页面结构获得对应关系，进而根据对应关系将页面数据填充到页面元素表示的位置。如此，既节省了服务器的处理资源，又合理利用了浏览器的闲置资源，使资源利用率最大化，有助于提高页面渲染速度。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是本公开页面渲染方法的流程图；

图2是本公开页面渲染装置的结构示意图。

具体实施方式

以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。

参见图1，示出了本公开页面渲染方法的流程图，可以包括：

S101，浏览器向服务器发送页面渲染请求。

S102，所述浏览器接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系。

S103，所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

发明人在研发过程中发现，现有的页面渲染技术将大量计算放置在服务器中执行，致使服务器处理资源紧张，浏览器处理资源闲置，出现资源利用不均衡现象。为了缓解服务器压力，本公开方案将页面渲染过程分为服务器页面渲染阶段和浏览器页面渲染阶段，两个阶段相互配合，充分利用服务器和浏览器的处理资源，有效降低服务器和浏览器单一方面的负荷，并减少浏览器的页面渲染时间。

本公开方案中，浏览器解析用户输入的URL地址，向服务器发送页面渲染请求后，进入服务器页面渲染阶段。本阶段服务器需要获取以下两方面信息：

1.页面数据。以表单为例，页面数据可以体现为表单数据。

2.页面结构，具体包括两部分：页面元素；页面元素与页面数据的对应关系。可以理解的，本公开的对应关系指的是页面元素的身份标识与页面数据的身份标识之间的对应关系。

也就是说，服务器只需要建立页面元素与页面数据的对应关系即可，不需要一一完成数据填充，服务器可以将页面数据和页面结构发送至浏览器，由浏览器分担数据填充这部分工作。如此，既节省了服务器的处理资源，又合理利用了浏览器的闲置资源，使资源利用率最大化，有助于提高页面渲染速度。

需要说明的是，服务器可以同时将页面数据、页面结构返回至浏览器；或者，服务器也可以先将页面结构返回至浏览器，并在浏览器解析页面结构进行数据填充时，再向服务器请求页面数据，本公开实施例对此可不做限定，具体可结合实际应用而定。

本公开方案中，浏览器接收到服务器返回的页面结构和页面数据，即可被触发进入浏览器渲染阶段。本阶段浏览器可以执行如下操作：

1.解析页面结构，获得页面元素，以及页面元素的对应关系。

2.根据对应关系查找页面数据，将页面数据填充到与之对应的页面元素所表示的位置，完成页面渲染。

需要说明的是，在进行页面数据填充时，如果无顺序要求，可以依次读取并填充；如果有顺序要求，浏览器和服务器可以预先约定数据填充顺序，例如，针对表单数据，可以约定在前的为表单行，在后的为表单列，如此，浏览器解析到页面元素对应的表单数据后，将先读取到的数据作为行数据，后读取到的数据作为列数据，完成数据填充。

另外，可选地，在进行数据填充时，可以由各个页面元素自身来完成。具体地，浏览器在接收到服务器返回的页面结构和页面数据后，首先通过解析页面结构，获得页面元素，以及页面元素的对应关系。

之后，每个页面元素可以根据该对应关系，获取各自对应的页面数据。接下来，每个页面元素将各自对应的页面数据填充到该页面元素自身所在的位置，完成页面渲染。

通过将数据填充的工作分配到由各个页面元素自身来完成，可以提供总体的页面渲染速度及效率。

作为一种示例，本公开的页面结构可以是个性化的页面结构。也就是说，浏览器向服务器发送的页面渲染请求中可以包括用户身份信息，服务器可以先根据用户身份信息确定用户权限信息，进而根据用户权限信息选取该用户可以访问的页面所包含的页面元素。也就是说，针对不同权限的用户，服务器返回的页面结构可能会有所不同。

作为一种示例，本公开的页面结构可以是通用的页面结构。也就是说，针对不同权限的用户，服务器可以返回相同的页面结构，然后再由浏览器根据用户权限信息，从服务器返回的页面结构中选取待展示页面元素，该待展示页面元素针对当前用户。需要说明的是，用户权限信息可以配置于浏览器运行的客户端；或者用户权限信息还可以是服务器根据用户身份信息确定后，返回给浏览器，本公开实施例对此可不做限定，具体可结合实际应用而定。

作为一种示例，浏览器接收到服务器返回的页面结构后，可以将页面结构缓存在客户端本地。如此，当浏览器再次请求对同一URL进行页面渲染时，服务器可以只向浏览器返回页面数据，以此保证数据展示的准确性。

作为一种示例，浏览器和/或服务器可以监控以下三方面信息，并在其中至少一项信息发生变更时，浏览器可以向服务器发送请求，用以更新本地缓存的页面结构，以此保证页面展示的准确性。本公开所说三方面信息指的是用户身份信息、用户权限信息、对应关系。

与图1所示方法相对应，本公开实施例还提供一种页面渲染装置200，参见图2所示示意图，所述装置200包括：

请求发送单元201，用于向服务器发送页面渲染请求；

响应接收单元202，用于接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；

数据填充单元203，用于根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

可选地，所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，则所述页面元素由所述服务器根据用户权限信息选取，所述用户权限信息为所述服务器根据所述用户身份信息确定。

可选地，所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，所述页面渲染响应包括用户权限信息，所述用户权限信息为所述服务器根据所述用户身份信息确定，则所述装置还包括：

选取单元，用于在所述响应接收单元接收所述页面渲染响应之后，根据所述用户权限信息，从所述页面元素中选取待展示页面元素。

可选地，所述数据填充单元包括：

获取子模块，用于由每个所述页面元素根据所述对应关系，获取各自对应的所述页面数据；

数据填充子模块，用于由每个所述页面元素将各自对应的所述页面数据填充到该页面元素自身所在的位置，完成页面渲染。

可选地，所述装置200还包括：缓存单元，用于在本地缓存所述页面结构。

可选地，所述装置200还包括：更新单元，用于在所述用户身份信息、所述用户权限信息和所述对应关系中的至少一者发生变更时，向所述服务器发送请求，用以更新本地缓存的页面结构。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本公开对各种可能的组合方式不再另行说明。

此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。

Claims (10)

1.一种页面渲染方法，其特征在于，所述方法包括：

浏览器向服务器发送页面渲染请求；

所述浏览器接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；

所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

2.根据权利要求1所述的方法，其特征在于，所述页面渲染请求包括用户身份信息，则

所述页面元素由所述服务器根据用户权限信息选取，所述用户权限信息为所述服务器根据所述用户身份信息确定。

3.根据权利要求1所述的方法，其特征在于，所述页面渲染请求包括用户身份信息，所述页面渲染响应包括用户权限信息，所述用户权限信息为所述服务器根据所述用户身份信息确定，则在所述浏览器接收所述服务器返回的页面渲染响应之后，所述方法还包括：

所述浏览器根据所述用户权限信息，从所述页面元素中选取待展示页面元素。

4.根据权利要求1所述的方法，其特征在于，所述浏览器根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染的步骤包括：

每个所述页面元素根据所述对应关系，获取各自对应的所述页面数据；

每个所述页面元素将各自对应的所述页面数据填充到该页面元素自身所在的位置，完成页面渲染。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：

所述浏览器在本地缓存所述页面结构。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

在所述用户身份信息、所述用户权限信息和所述对应关系中的至少一者发生变更时，所述浏览器向所述服务器发送请求，用以更新本地缓存的页面结构。

7.一种页面渲染装置，其特征在于，所述装置包括：

请求发送单元，用于向服务器发送页面渲染请求；

响应接收单元，用于接收所述服务器返回的页面渲染响应，所述页面渲染响应包括页面结构和页面数据，所述页面结构包括页面元素、以及所述页面元素与所述页面数据的对应关系；

数据填充单元，用于根据所述对应关系，将所述页面数据填充到对应的页面元素所在的位置，完成页面渲染。

8.根据权利要求7所述的装置，其特征在于，

所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，则

所述页面元素由所述服务器根据用户权限信息选取，所述用户权限信息为所述服务器根据所述用户身份信息确定。

9.根据权利要求7所述的装置，其特征在于，

所述请求发送单元，用于向服务器发送页面渲染请求，所述页面渲染请求包括用户身份信息，所述页面渲染响应包括用户权限信息，所述用户权限信息为所述服务器根据所述用户身份信息确定，则所述装置还包括：

选取单元，用于在所述响应接收单元接收所述页面渲染响应之后，根据所述用户权限信息，从所述页面元素中选取待展示页面元素。

10.根据权利要求7至9任一项所述的装置，其特征在于，所述装置还包括：

缓存单元，用于在本地缓存所述页面结构。