CN107688650B - 一种web页面生成方法和装置 - Google Patents

Abstract

本申请公开了一种web页面生成方法和装置。方法包括：在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；基于所述第一索引树和所述第二索引树更新所述web页面。本申请实施例通过先基于目标网页对应的离线网页生成web页面，然后基于服务器返回的网页数据对web页面进行更新，能有效提高网页页面的加载速度。

Description

一种web页面生成方法和装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种web页面生成方法和装置。

背景技术

目前浏览器访问网页的过程包括加载、解析和渲染三个方面。其中加载(包含DNS解析、域名解析与服务器连接等)和解析都比较耗时，而且在渲染时需要经过以下步骤：构建dom文档对象模型树、构建render渲染树、布局render树和绘制render树等。

为了加快网页的访问速度，现有技术一般是以优化资源加载及网页渲染速度为目标的，包括数据压缩等。但在网络条件较差时网页数据的请求操作都会不可避免地消耗很多时间，再加上页面渲染的时间会导致页面生成时间较长和页面卡顿的问题。

发明内容

本申请实施例提供一种web页面生成方法和装置，用以解决现有技术加载网页所需时间较长以及页面卡顿的问题。

本申请实施例提供一种web页面生成方法，包括：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

基于所述第一索引树和所述第二索引树更新所述web页面。

可选的，所述根据所述离线网页构建第一索引树包括：

提取所述离线网页中的页面标签；

调用浏览器内核对所述离线网页中的第一网页数据进行渲染，以构建渲染树；

基于所述页面标签和所述渲染树构建第一索引树。

可选的，所述基于所述页面标签和所述渲染树构建第一索引树包括：

基于页面标签对应的名称属性确定所述第一索引树中的节点以及节点对应的内容；

基于所述渲染树确认所述第一索引树中的节点对应的内容的绘制规则。

可选的，加载所述目标网页对应的第二索引树包括：

在构建所述第二索引树的过程中，若监听获知构建第二索引树的进度发生变化，则加载当前进度对应的第二索引树。

可选的，基于所述第一索引树和所述第二索引树更新所述web页面包括：

将所述第二索引树中的节点与所述第一索引树中的对应节点进行对比；

根据对比结果更新所述第一索引树，并根据更新后的第一索引树更新所述web页面。

可选的，根据对比结果更新所述第一索引树包括：

根据对比结果确定所述第一索引树和所述第二索引树中待更新节点的类别以及与所述待更新节点的类别对应的更新规则；

根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树。

可选的，所述待更新节点中包括第一类节点；

所述第一类节点为相对于所述第一索引树中的节点的内容，所述第二索引树中的内容发生变化的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

根据所述第一类节点的内容更新所述第一索引树中对应节点的内容。

可选的，所述待更新节点中包括第二类节点；

所述第二类节点为存在于所述第二索引树中且不存在于所述第一索引树中的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

在所述第一索引树中添加所述第二类节点。

可选的，所述待更新节点中包括第三类节点；

所述第三类节点为存在于所述第一索引树中且不存在于所述第二索引树中的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

将所述第一索引树中的第三类节点删除。

可选的，所述根据更新后的第一索引树更新所述web页面之前，还包括：

根据更新后的第一索引树中的节点的类别，将节点包含的标志位置为对应的参数值；

其中，所述根据更新后的第一索引树更新所述web页面包括：

基于标志位对应的参数值确定更新后的第一索引树中参与更新所述web页面的节点；

基于所述参与更新所述web页面的节点的内容更新所述web页面。

可选的，在加载所述目标网页对应的第二索引树之前，还包括：

加载服务器响应于所述请求返回的所述目标网页中的第二网页数据；

构建第二索引树，所述第二索引树用于描述所述第二网页数据。

本申请实施例还提供一种web页面生成方法，包括：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

加载服务器响应于所述请求返回的目标网页中的网页数据；

基于所述目标网页中的网页数据更新所述web页面。

本申请实施例还提供一种web页面生成装置，包括：

处理单元，用于在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

构建单元，用于根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载单元，用于加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

更新单元，用于基于所述第一索引树和所述第二索引树更新所述web页面。

本申请实施例还提供一种web页面生成装置，包括：

处理单元，用于在浏览器发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

加载单元，用于加载服务器响应于所述请求返回的目标网页中的网页数据；

更新单元，用于基于所述目标网页中的网页数据更新所述web页面。

本申请实施例还提供一种web页面生成装置，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

在发起访问目标网页的请求时，第二视图控件加载服务器响应于所述请求返回的所述目标网页中的第二网页数据；

构建第二索引树，所述第二索引树用于描述所述第二网页数据，以便第一视图控件基于第一索引树和所述第二索引树对响应于所述请求、基于与所述请求对应的离线网页生成web页面更新；

其中，所述离线网页为在先访问所述目标网页时保存的，所述第一索引树用于描述所述离线网页中的第一网页数据。

本申请实施例还提供一种web页面生成装置，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

加载服务器响应于所述请求返回的目标网页中的网页数据；

基于所述目标网页中的网页数据更新所述web页面。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

本申请实施例在发起访问目标网页的请求时，一方面，基于请求确定对应的离线网页，并基于离线网页快速生成web页面；另一方面，正常加载服务器响应于请求返回的网页数据，然后，基于正常加载到的网页数据对web网页进行更新。进而达到有效提高网页页面的加载速度的目的。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例的应用场景图；

图2为本申请实施例1提供的web页面生成方法的流程示意图；

图3为本申请实施例2提供的web页面生成方法的流程示意图；

图4为本申请实施例3提供的web页面生成方法的流程示意图；

图5为本申请实施例5提供的web页面生成方法的流程示意图；

图6为本申请实施例6提供的web页面生成装置的结构示意图；

图7为本申请实施例7提供的web页面生成装置的结构示意图；

图8为本申请实施例8提供的web页面生成装置的结构示意图；

图9为本申请实施例10提供的电子设备的结构示意图；

图10为本申请实施例12提供的电子设备的结构示意图；

图11为本申请实施例14提供的电子设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

参见图1，下面对本申请实施例的第一个应用场景进行示例性说明：

用户通过输入装置13向浏览器客户端输入目标网页的访问地址，由浏览器客户端向与浏览器客户端对应的服务器(浏览器服务器)基于访问地址向浏览器服务器发起访问目标网页的请求。

第一处理装置11在确定到发起访问目标网页的请求后，加载对应的离线网页，以生成web页面。

同步地，第二处理装置12加载浏览器服务器返回的目标网页的网页数据；

然后，第一处理装置11基于第二处理装置12加载的网页数据对生成的web页面中的内容进行更新，以展示最新版本或者用户需要的版本的目标网页。

其中，向浏览器服务器发起访问目标网页的请求可由第一处理装置11、第二处理装置12或者浏览器服务器中的其他处理装置来执行。

在本申请实施例的第二个应用场景中，浏览器客户端中可以包括第一处理装置11和第二处理装置12中的任意一个，以第一处理装置11为例，相应地：

基于用户通过输入装置13输入的目标网页的访问地址，向浏览器服务器发起访问目标网页的请求后，第一处理装置11执行第一个应用场景中第一处理装置11和第二处理装置12执行的步骤，以向用户展示对应的web页面。

在本申请实施例的第三个应用场景中，可包括两个浏览器客户端，其中，第一浏览器客户端用于接收用户输入的目标网页的访问地址，并由第二浏览器客户端向浏览器服务器发起访问目标网页的请求，然后，第二浏览器客户端记载浏览器服务器返回的网页数据，同步地，第一浏览器客户端加载对应的离线网页生成web页面，并基于第二浏览器客户端加载的网页数据对web页面进行更新。

其中，输入装置可以为鼠标、键盘等装置。

需要说明的是，为了方便理解，下文将上述处理装置，浏览器，或者其他可实现加载网页数据、构建web页面功能的主体具体示例为现有技术加载页面所使用的视图view控件。但不难理解的是，此处的view控件仅用于方便理解而非对本申请的限定。

另外，下文中出现的web页面为网页页面；第一view控件包括用于展示网页的前台和用于进行逻辑处理的后台；第二view控件为第二视图控件，包括用于进行逻辑处理的后台；render树为渲染树，用于描述网页的网页数据的绘制规则；URL为统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

以下结合附图，详细说明本申请各实施例提供的技术方案。

实施例1

图2为本申请实施例1提供的web页面生成方法的流程示意图，参见图2，该方法可由第一view控件来执行，具体可以包括如下步骤：

步骤22、在发起访问目标网页的请求时，第一view控件基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

结合图1对应的应用场景，本步骤中，发起访问目标网页的请求可举例性地由第二view控件执行，相应地，第一view控件可基于请求中携带的信息，例如：目标网页的URL，确定本地缓存的与URL对应的离线网页，然后，基于离线网页以生成web页面。

其中，加载离线网页生成web页面属于现有技术，故，此处不再赘述。

不难理解的是，在在先访问各网页时，第一view控件可将访问的网页离线缓存至本地，通过建立的缓存的离线网页与请求中携带的网页的URL，或者，其他标识信息之间的对应关系，第一view控件可迅速查找到与请求对应的离线网页。

可见，由于第一view控件是在本地查找离线网页并加装、生成web页面，而无需经过访问请求、服务器响应等过程，也不会受到网络的影响。因此，web页面的显示速度会非常快。

步骤24、根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；其中，第一网页数据包括HTML/XHTML、CSS、JavaScript文件等。

需要说明的是，本步骤的一个实现方式可以为：

提取所述离线网页中的页面标签title，title用于定义文档的标题，基于title对应的name属性确定键key值，建立key值与第一索引树中的节点及其内容的对应关系；

同步地，调用浏览器内核对所述离线网页中的第一网页数据进行渲染，以构建render树；

基于render树节点与第一索引树节点之间的对应关系，确定第一索引树节点的内容的绘制规则。

需要说明的是，render树是浏览器在构建dom树的同时构建的，两者之间存在对应关系。例如：在webkit中，render树是由DOM节点调用attach()方法创建的，attach()方法用于计算DOM节点的样式信息。同理，在构建第一索引树时，也可基于类似的对应关系建立第一索引树与render树之间的对应关系。

另外，由于render树由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。因此，基于第一索引树与render树之间的对应关系，可确定第一索引树中各节点的绘制规则，即：计算节点可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

步骤26、加载第二view控件构建的所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

步骤28、基于所述第一索引树和所述第二索引树更新所述web页面。

结合图1对应的应用场景，第一view控件监听第二view控件基于浏览器服务器返回的网页数据构建第二索引树的过程，相应地，本步骤的实现方式可以为：

若监听获知构建第二索引树的进度发生变化，则加载当前进度对应的第二索引树。

随着第二索引树进度的不断增加，动态对比第一索引树和第二索引树，并基于对比结果更新web页面。

或者，

监听到第二view控件完成构建第二索引树后，加载完整的第二索引树，对比完整的第二索引树和第一索引树，并基于对比结果更新web页面。

可见，本申请实施例在发起访问目标网页的请求时，一方面，基于请求确定对应的离线网页，并基于离线网页快速生成web页面；另一方面，正常加载服务器响应于请求返回的网页数据，然后，基于正常加载到的网页数据对web网页进行更新。进而达到有效提高网页页面的加载速度的目的。

实施例2

图3为本申请实施例2提供的web页面生成方法的流程示意图，参见图3，该方法可由第一view控件来执行，具体可以包括如下步骤：

步骤32、在发起访问目标网页的请求时，第一view控件基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

步骤34、根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

步骤36、加载所述第二view控件构建的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

其中，步骤32-步骤36与分别实施例1中的步骤22-步骤26相对应，故，此处不再对步骤32-步骤36进行说明，相似之处请参考实施例1中的相关描述。

步骤38、将所述第二索引树中的节点与所述第一索引树中的对应节点进行对比；

需要说明的是，步骤38的一种实施方式可以为：

基于节点与节点之间的对应关系，对比两个索引树中的节点，得到存在于所述第二索引树中且不存在于所述第一索引树中的节点，称之为第二类节点；以及存在于所述第一索引树中且不存在于所述第二索引树中的节点，称之为第三类节点。

然后，对第二类节点和第三类节点之外的节点进行节点内容的对比，得到相对于所述第一索引树中的节点的内容，第二索引树中的内容发生变化的节点，称之为第一类节点。

对于内容未发生变化的节点可称之为第四类节点。

步骤310、根据对比结果更新所述第一索引树，并根据更新后的第一索引树更新所述web页面。

其中，更新第一索引树的规则可以为：

根据对比结果确定所述第一索引树和所述第二索引树中待更新节点的类别以及与所述待更新节点的类别对应的更新规则；

根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树。

进一步地，基于待更新节点的类别及其对应的更新规则更新第一索引树的一种实现方式可以为：

基于步骤38得到的节点的种类，可选择性地执行如下步骤：

根据所述第二索引树中的第一类节点的内容更新所述第一索引树中对应节点的内容；

在所述第一索引树中添加所述第二类节点及其内容；

将所述第一索引树中的第三类节点删除；

忽略第四类节点。

然后，根据更新后的第一索引树中的节点的类别，将节点包含的标志位置为对应的参数值。

例如：第四类节点中包含的标志位置为4，第三类节点中包含的标志位置为3，第二类节点中包含的标志位置为2，第一类节点中包含的标志位置为1。

步骤310中更新web页面的的步骤可以在完成更新第一索引树的步骤之后进行，也可以与更新第一索引树的步骤同步进行，以前者为例说明如下：

基于标志位对应的参数值确定更新后的第一索引树中参与更新所述web页面的节点；基于所述参与更新所述web页面的节点的内容更新所述web页面。

例如：根据第一索引树中标志位为1的节点的内容更新web页面中对应的内容；在web页面中添加第一索引树中标志位为2的节点的内容；删除web页面中与第一索引树中标志位为3的节点对应的内容。

另外，在完成更新web页面的步骤后，还可缓存更新后的web页面，并将缓存的更新后的web页面作为所述目标网页的更新后的离线网页。

由此，在下一次访问目标网页时，第一view控件可从本地加载更新后的离线网页生成web页面。

可见，本申请实施例在实施例1的基础上，进一步限定对第一索引树和第二索引树之间的对比方案，基于此对比方案能较快的对第一索引树进行更新。而且，本申请实施例采用定点注入(确定参与更新的节点，选择性地进行更新)的方式更新web页面，防止页面卡顿抖动，确保网页访问的相对稳定。另外，本申请实施例还对离线网页进行更新，以使第一view加载的离线网页与实际的目标网页保持相对较高的统一性。

实施例3

图4为本申请实施例3提供的web页面生成方法的流程示意图，参见图4，本申请实施例在实施例1和2的基础上，进一步对构建第二索引树的步骤详细说明，具体可以包括如下步骤：

步骤42、在发起访问目标网页的请求时，加载浏览器服务器响应于所述请求返回的所述目标网页中的第二网页数据；

步骤44、构建第二索引树，所述第二索引树用于描述所述第二网页数据。

需要说明的是，用户通过输入装置13输入目标网页的访问地址后，可由第二view控件向浏览器服务器发起访问目标网页的请求。第二view控件加载浏览器服务器返回的第二网页数据，一方面，第二view一边加载第二网页数据一边提取其中的页面标签；另一方面，第二view还调用浏览器内核对第二网页数据进行渲染，以构建对应的渲染render树。然后，基于页面标签和render树构建第二索引树。

其中，构建render树的过程为现有技术，基于页面标签和render树构建第二索引树的过程与构建第一索引树的过程相似，故，此处不再对这两个步骤进行赘述。

可见，本申请实施例在发起访问目标网页的请求时，一方面，基于请求确定对应的离线网页，并基于离线网页快速生成web页面；另一方面，正常加载服务器响应于请求返回的网页数据，然后，基于正常加载到的网页数据对web网页进行更新。进而达到有效提高网页页面的加载速度的目的。

实施例4

下面基于实施例1-3，结合第一view控件和第二view控件两个主体本申请实施例进行详细说明：

步骤S1、浏览器根据用户的行为记录分析得到用户经常访问的网站，包括网站首页常驻的Topsite网站，并对经常访问的网站页面的离线缓存。其中，离线缓存有两种方式：一是直接保存HTML、CSS、JavaScript文件，另一种是利用HTML、CSS和JavaScript资源生成MHT文件保存。

步骤S2、对于步骤S1中缓存的网站资源，浏览器对其解析，进而解析成对应的render树，render树用于保存网页中的各个节点，以及各个节点的CSS定义以及他们的从属关系，进而可以很方便地计算出节点在屏幕中的位置。

步骤S3、基于步骤S1和步骤D2，当浏览器再次访问网页A时，浏览器页面即生成两层View，上层View会覆盖底层View。上层View对应的第一view控件用来加载离线保存的网页资源(即MHT文件)，从而使得用户最快的看到淘宝网的页面。然后，底层View对应的第二view控件同步访问网页A，以加载其网站的最新内容。

步骤S5、第二view控件根对请求回的资源进行分部分解析，从而得到render树，并不断完善补充此render树，根据render树同步转换成第二索引树，与上层的第一索引树相对应。

步骤S6、将底层的第二索引树与上层的第一索引树对比匹配，从而更新上层的第一索引树的内容。

步骤S7、在步骤S6完成之后，根据第一索引树的内容对上层View显示的内容进行定点地注入，从而保证了页面尽可能地不卡顿抖动。对于常用网页来说，其中大体框架基本不变，所变化的多是文字内容和图片，所以采用这种加载方式可保证整个页面从用户角度来看非常稳定。

步骤S8：在步骤S7完成后，浏览器自动的对网页最新的资源进行存储，从而更新离线网页的缓存。

本申请实施例在类似于实例中的框架布局大体不变的网页比较适用，由于其页面布局很少改变，所以在定点注入内容时对整个页面的影响相对较小，而且此种网站的访问次数较为频繁，所以用户使用时对于网页的页面响应速度有着比内容更大的需求。另外，也可以针对用户经常访问的网站和网站主页的Topsite网站和用户收藏的网页都比较适用。

实施例5

图5为本申请实施例5提供的web页面生成方法的流程示意图，参见图5，该方法可由本申请实施例第一view控件/第二view控件执行，具体可以包括如下步骤：

步骤52、在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

步骤54、加载浏览器服务器响应于所述请求返回的目标网页中的网页数据；

步骤56、基于所述目标网页中的网页数据更新所述web页面。

需要说明的是，本申请实施例基于一个view控件实现web页面加载的方式与上述实施例中两个view控件实现web页面加载的方式相似，故，此处不再对本申请实施例进行展开说明，具体请参见上述实施例中的相关记载。

本实施例与上述实施例相对应，故，此处对其描述较少，相似之处，请参见上述实施例中的相关记载。

可见，本申请实施例在加载网页时，先加载对应的离线网页，然后，基于正常访问加载的网页数据对离线网页中的内容进行更新。避免现有技术在加载网页时由于网络等因素的影响，导致的卡顿等问题。

对于上述方法实施方式，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施方式并不受所描述的动作顺序的限制，因为依据本发明实施方式，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施方式均属于优选实施方式，所涉及的动作并不一定是本发明实施方式所必须的。

实施例6

图6为本申请实施例6提供的web页面生成装置的结构示意图，参见图6，该装置可以为图1提供的应用场景中的第一view控件，包括：处理单元61、构建单元62、加载单元63以及更新单元64，其中：

处理单元61，用于在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

构建单元62，用于根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载单元63，用于加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

更新单元64，用于基于所述第一索引树和所述第二索引树更新所述web页面。

其中，构建单元62的工作原理可以为：

提取所述离线网页中的页面标签；调用浏览器内核对所述离线网页中的第一网页数据进行渲染，以构建渲染render树；基于页面标签对应的name属性确定所述第一索引树中的节点以及节点对应的内容；基于所述render树确认所述第一索引树中的节点对应的内容的绘制规则。

加载单元63的工作原理可以为：

在所述第二view控件构建所述第二索引树的过程中，若监听获知构建第二索引树的进度发生变化，则加载当前进度对应的第二索引树。

更新单元64的工作原理可以为：

将所述第二索引树中的节点与所述第一索引树中的对应节点进行对比；

根据对比结果更新所述第一索引树，并根据更新后的第一索引树更新所述web页面。

可见，本申请实施例通过双层view来加载web页面，在发起访问目标网页的请求时，一方面，上层的第一view控件通过加载缓存的目标网页的离线网页，以快速生成web页面；另一方面，底层的第二view控件正常加载服务器响应于请求返回的网页数据，然后，由第一view控件基于正常加载到的网页数据对web网页进行更新，进而达到有效提高网页页面的加载速度的目的。

实施例7

图7为本申请实施例7提供的web页面生成装置的结构示意图，参见图7，该装置可以为图1提供的应用场景中的第二view控件，包括：加载单元71和构建单元72，其中：

加载单元71，用于在发起访问目标网页的请求时，加载浏览器服务器响应于所述请求返回的所述目标网页中的第二网页数据；

构建单元72，用于构建所述目标网页对应的第二索引树，所述第二索引树用于描述所述第二网页数据，以便第一view控件基于第一索引树和所述第二索引树对响应于所述请求、基于与所述请求对应的离线网页生成web页面更新；

其中，所述离线网页为在先访问所述目标网页时保存的，所述第一索引树用于描述所述离线网页中的第一网页数据。

可见，本申请实施例通过双层view来加载web页面，在发起访问目标网页的请求时，一方面，上层的第一view控件通过加载缓存的目标网页的离线网页，以快速生成web页面；另一方面，底层的第二view控件正常加载服务器响应于请求返回的网页数据，然后，由第一view控件基于正常加载到的网页数据对web网页进行更新，进而达到有效提高网页页面的加载速度的目的。

实施例8

图8为本申请实施例8提供的web页面生成装置的结构示意图，参见图8，该装置包括：处理单元81、加载单元82和更新单元83，其中：

处理单元81，用于在浏览器发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

加载单元82，用于加载浏览器服务器响应于所述请求返回的目标网页中的网页数据；

更新单元83，用于基于所述目标网页中的网页数据更新所述web页面。

可见，本申请实施例通过双层view来加载web页面，在发起访问目标网页的请求时，一方面，上层的第一view控件通过加载缓存的目标网页的离线网页，以快速生成web页面；另一方面，底层的第二view控件正常加载服务器响应于请求返回的网页数据，然后，由第一view控件基于正常加载到的网页数据对web网页进行更新，进而达到有效提高网页页面的加载速度的目的。

实施例9

基于相同的发明创造，本申请实施例提供了一种系统包括：第一view控件和第二view控件，其中：

结合图1，第二view控件在发起访问目标网页的请求时，加载浏览器服务器响应于所述请求返回的所述目标网页中的网页数据；

第一view控件，用于在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，基于所述网页数据更新所述web页面；

其中，所述离线网页为在先访问所述目标网页时保存的。

可见，本申请实施例通过双层view来加载web页面，在发起访问目标网页的请求时，一方面，上层的第一view控件通过加载缓存的目标网页的离线网页，以快速生成web页面；另一方面，底层的第二view控件正常加载服务器响应于请求返回的网页数据，然后，由第一view控件基于第二view控件正常加载到的网页数据对web网页进行更新，进而达到有效提高网页页面的加载速度的目的。

对于上述装置实施方式而言，由于其与方法实施方式基本相似，所以描述的比较简单，相关之处参见方法实施方式的部分说明即可。应当注意的是，在本发明的装置的各个部件中，根据其要实现的功能而对其中的部件进行了逻辑划分，但是，本发明不受限于此，可以根据需要对各个部件进行重新划分或者组合。

实施例10

图9为本申请实施例10提供的电子设备的结构示意图，参见图9，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成web页面生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

网络接口、处理器和存储器可以通过总线系统相互连接。总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据。存储器可能包含高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器。

处理器，用于执行所述存储器存放的程序，并具体执行：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

基于所述第一索引树和所述第二索引树更新所述web页面。

上述如本申请图2、3和图6所示实施例揭示的web页面生成装置或管理者(Master)节点执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

web页面生成装置还可执行图2或3的方法，并实现管理者节点执行的方法。

实施例11

基于相同的发明创造，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行实施例1和2提供的web页面生成方法。

实施例12

图10为本申请实施例12提供的电子设备的结构示意图，参见图10，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成web页面生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

网络接口、处理器和存储器可以通过总线系统相互连接。总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据。存储器可能包含高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器。

处理器，用于执行所述存储器存放的程序，并具体执行：

在发起访问目标网页的请求时，加载浏览器服务器响应于所述请求返回的所述目标网页中的第二网页数据；

构建第二索引树，所述第二索引树用于描述所述第二网页数据，以便第一view控件基于第一索引树和所述第二索引树对响应于所述请求、基于与所述请求对应的离线网页生成web页面更新；

其中，所述离线网页为在先访问所述目标网页时保存的，所述第一索引树用于描述所述离线网页中的第一网页数据。

上述如本申请图4和图7所示实施例揭示的web页面生成装置或管理者(Master)节点执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

web页面生成装置还可执行图4的方法，并实现管理者节点执行的方法。

实施例13

基于相同的发明创造，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行实施例3提供的web页面生成方法。

实施例14

图11为本申请实施例14提供的电子设备的结构示意图，参见图11，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成web页面生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

网络接口、处理器和存储器可以通过总线系统相互连接。总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据。存储器可能包含高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器。

处理器，用于执行所述存储器存放的程序，并具体执行：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

加载浏览器服务器响应于所述请求返回的目标网页中的网页数据；

基于所述目标网页中的网页数据更新所述web页面。

上述如本申请图5和图8所示实施例揭示的web页面生成装置或管理者(Master)节点执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

web页面生成装置还可执行图5的方法，并实现管理者节点执行的方法。

实施例15

基于相同的发明创造，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行实施例5提供的web页面生成方法。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (12)

1.一种web页面生成方法，其特征在于，包括：

在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

基于所述第一索引树和所述第二索引树更新所述web页面；

缓存更新后的所述web页面，并将缓存的更新后的所述web页面确定为所述目标网页的更新后的离线网页；在所述目标网页被再次访问时，从本地加载所述更新后的离线网页，根据所述更新后的离线网页生成所述web页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述离线网页构建第一索引树包括：

提取所述离线网页中的页面标签；

调用浏览器内核对所述离线网页中的第一网页数据进行渲染，以构建渲染树；

基于所述页面标签和所述渲染树构建第一索引树。

3.根据权利要求2所述的方法，其特征在于，所述基于所述页面标签和所述渲染树构建第一索引树包括：

基于页面标签对应的名称属性确定所述第一索引树中的节点以及节点对应的内容；

基于所述渲染树确认所述第一索引树中的节点对应的内容的绘制规则。

4.根据权利要求1所述的方法，其特征在于，加载所述目标网页对应的第二索引树包括：

在构建所述第二索引树的过程中，若监听获知构建第二索引树的进度发生变化，则加载当前进度对应的第二索引树。

5.根据权利要求1或4所述的方法，其特征在于，基于所述第一索引树和所述第二索引树更新所述web页面包括：

将所述第二索引树中的节点与所述第一索引树中的对应节点进行对比；

根据对比结果更新所述第一索引树，并根据更新后的第一索引树更新所述web页面。

6.根据权利要求5所述的方法，其特征在于，根据对比结果更新所述第一索引树包括：

根据对比结果确定所述第一索引树和所述第二索引树中待更新节点的类别以及与所述待更新节点的类别对应的更新规则；

根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树。

7.根据权利要求6所述的方法，其特征在于，所述待更新节点中包括第一类节点；

所述第一类节点为相对于所述第一索引树中的节点的内容，所述第二索引树中的内容发生变化的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

根据所述第一类节点的内容更新所述第一索引树中对应节点的内容。

8.根据权利要求6所述的方法，其特征在于，所述待更新节点中包括第二类节点；

所述第二类节点为存在于所述第二索引树中且不存在于所述第一索引树中的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

在所述第一索引树中添加所述第二类节点。

9.根据权利要求6所述的方法，其特征在于，所述待更新节点中包括第三类节点；

所述第三类节点为存在于所述第一索引树中且不存在于所述第二索引树中的节点；

其中，根据待更新节点的类别以及与所述待更新节点的类别对应的更新规则，更新所述第一索引树包括：

将所述第一索引树中的第三类节点删除。

10.根据权利要求7-9任一项所述的方法，其特征在于，所述根据更新后的第一索引树更新所述web页面之前，还包括：

根据更新后的第一索引树中的节点的类别，将节点包含的标志位置为对应的参数值；

其中，所述根据更新后的第一索引树更新所述web页面包括：

基于标志位对应的参数值确定更新后的第一索引树中参与更新所述web页面的节点；

基于所述参与更新所述web页面的节点的内容更新所述web页面。

11.根据权利要求1所述的方法，其特征在于，在加载所述目标网页对应的第二索引树之前，还包括：

加载服务器响应于所述请求返回的所述目标网页中的第二网页数据；

构建第二索引树，所述第二索引树用于描述所述第二网页数据。

12.一种web页面生成装置，其特征在于，包括：

处理单元，用于在发起访问目标网页的请求时，基于与所述请求对应的离线网页生成web页面，所述离线网页为在先访问所述目标网页时保存的；

构建单元，用于根据所述离线网页构建第一索引树，所述第一索引树用于描述所述离线网页中的第一网页数据；

加载单元，用于加载所述目标网页对应的第二索引树，所述第二索引树用于描述服务器响应于所述请求返回的所述目标网页中的第二网页数据；

更新单元，用于基于所述第一索引树和所述第二索引树更新所述web页面；

缓存更新后的所述web页面，并将缓存的更新后的所述web页面确定为所述目标网页的更新后的离线网页；在所述目标网页被再次访问时，从本地加载所述更新后的离线网页，根据所述更新后的离线网页生成所述web页面。

Images