CN106202529A - 一种页面渲染方法及装置 - Google Patents

Abstract

本发明公开了一种页面渲染方法及装置。该方法包括以下步骤：预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；接收针对目标页面的页面节点的变更请求；根据变更请求，创建与目标页面的页面节点序列对应的第二虚拟节点序列；在缓存中，对第一虚拟节点序列与第二虚拟节点序列进行差异化比对；确定第一虚拟节点序列和第二虚拟节点序列中具有差异化的虚拟节点；根据第二虚拟节点序列中具有差异化的虚拟节点，更新目标页面中相应的页面节点。应用本发明实施例所提供的技术方案，在前端脚本语言和网络应用页面节点之间建立缓存，在缓存中进行虚拟节点的比对，达到快速更新页面节点的目的，提升了页面渲染速度。

Description

一种页面渲染方法及装置

技术领域

本发明涉及浏览器技术领域，特别是涉及一种页面渲染方法及装置。

背景技术

随着计算机技术以及浏览器技术的快速发展，互联网前端应用越发复杂与庞大，作为浏览器的评价指标之一的页面渲染速度，受到越来越多的关注。

一个页面通常存在庞大数量的页面节点。在现有技术中，当对某个页面节点的内容更改时，需要将原页面节点先做删除处理，然后统一更改所有的页面节点。比如，一个包含庞大的表格数据的页面，可以根据不同字段对表格数据进行升序或者降序排列展示，通过现有技术的方法，利用变量存储表格数据，循环依次渲染页面节点，当表格数据排序改变时，重新执行上一次渲染节点的操作以更新表格内容。

通过这种方法需要重新对所有的页面节点进行渲染，渲染效率低，而且，随着应用越来越复杂，重新添加的维护脚本会越来越臃肿，渲染页面节点的操作也会越来越繁杂，最终可能会导致难以对应用进行维护。

发明内容

为解决上述技术问题，本发明提供一种页面渲染方法及装置。

一种页面渲染方法，预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；所述方法包括：

接收针对所述目标页面的页面节点的变更请求；

根据所述变更请求，创建与所述目标页面的页面节点序列对应的第二虚拟节点序列；

在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对；

确定所述第一虚拟节点序列和所述第二虚拟节点序列中具有差异化的虚拟节点；

根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点。

在本发明的一种具体实施方式中，所述在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对，包括：

在所述缓存中，针对所述第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与所述第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

在本发明的一种具体实施方式中，通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对所述目标虚拟节点序列进行遍历，获得所述目标虚拟节点序列中每个虚拟节点的标识，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，通过以下步骤创建与所述目标页面的页面节点序列相对应的目标虚拟节点序列：

获得所述目标页面的页面节点序列；

通过脚本语言对象模拟所述页面节点序列的序列结构，获得相对应的目标虚拟节点序列，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，所述具有差异化的虚拟节点为子节点的差异，所述根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点，包括：

根据所述第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新所述目标页面相应的页面节点。

一种页面渲染装置，所述装置包括：

第一虚拟节点序列创建模块，用于预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；

变更请求接收模块，用于接收针对所述目标页面的页面节点的变更请求；

第二虚拟节点序列创建模块，用于根据所述变更请求，创建与所述目标页面的页面节点序列对应的第二虚拟节点序列；

差异化比对模块，用于在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对；

差异化虚拟节点确定模块，用于确定所述第一虚拟节点序列和所述第二虚拟节点序列中具有差异化的虚拟节点；

页面节点更新模块，用于根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点。

在本发明的一种具体实施方式中，所述差异化比对模块，具体用于：

在所述缓存中，针对所述第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与所述第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

在本发明的一种具体实施方式中，所述装置还包括：

标识获得模块，用于通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对所述目标虚拟节点序列进行遍历，获得所述目标虚拟节点序列中每个虚拟节点的标识，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，所述装置还包括：

目标虚拟节点序列创建模块，用于通过以下步骤创建与所述目标页面的页面节点序列相对应的目标虚拟节点序列：

获得所述目标页面的页面节点序列；

通过脚本语言对象模拟所述页面节点序列的序列结构，获得相对应的目标虚拟节点序列，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，所述具有差异化的虚拟节点为子节点的差异，所述页面节点更新模块，具体用于：

根据所述第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新所述目标页面相应的页面节点。

应用本发明实施例所提供的技术方案，在接收到针对目标页面的页面节点的变更请求时，在缓存中将更新前的第一虚拟节点序列与更新后的第二虚拟节点序列进行差异化比对，确定具有差异化的虚拟节点，根据该虚拟节点，更新目标页面中相应的页面节点。在前端脚本语言和网络应用页面节点之间建立缓存，在缓存中进行虚拟节点的比对，达到快速更新页面节点的目的，提升了页面渲染速度。

附图说明

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

图1为本发明实施例中一种页面渲染方法的实施流程图；

图2为本发明实施例中虚拟节点序列之间差异化比对示意图；

图3为本发明实施例中深度遍历确定虚拟节点标识示意图；

图4为本发明实施例中一种页面渲染装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参见图1所示，为本发明实施例所提供的一种页面渲染方法的实施流程图，该方法可以包括以下步骤：

S110：接收针对目标页面的页面节点的变更请求。

目标页面包含多个页面节点，构成页面节点序列。

在实际应用中，当用户有对目标页面的页面节点的变更需求时，可以向浏览器发出针对目标页面的页面节点的变更请求，该变更请求可以是对页面节点的替换请求，还可以是对页面节点的子节点的移动请求、删除请求或新增请求，还可以是对节点属性、节点内容的更新请求等。

浏览器接收到针对目标页面的页面节点的变更请求后，即可继续执行步骤S120的操作。

S120：根据变更请求，创建与目标页面的页面节点序列对应的第二虚拟节点序列。

浏览器接收到针对目标页面的页面节点的变更请求后，可以根据该变更请求，获得新的页面数据，创建与目标页面的页面节点序列对应的第二虚拟节点序列。

在本发明实施例中，可以预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列，使页面节点序列中的页面节点与第一虚拟节点序列中的虚拟节点一一对应。

具体的，可以通过以下步骤创建与目标页面的页面节点序列相对应的目标虚拟节点序列：

步骤一：获得目标页面的页面节点序列；

步骤二：通过脚本语言对象模拟页面节点序列的序列结构，获得相对应的目标虚拟节点序列，目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在实际应用中，通过页面数据即可获得目标页面的页面节点序列，该页面节点序列可以包括节点类型、节点属性及包含的子节点等信息。

通过脚本语言，如JavaScript对象可以模拟页面节点序列的序列结构，获得相对应的目标虚拟节点序列。

第一虚拟节点序列和第二虚拟节点序列均可根据上述方法创建。

S130：在缓存中，对第一虚拟节点序列与第二虚拟节点序列进行差异化比对。

在本发明实施例中，第一虚拟节点序列为接收到变更请求之前，即页面节点更新前对应的虚拟节点序列，第二虚拟节点序列为接收到变更请求之后，即页面节点更新后对应的虚拟节点序列。

在缓存中，可以对该第一虚拟节点序列与第二虚拟节点序列之间进行差异化比对，即逐一将第一虚拟节点序列中的虚拟节点与第二虚拟节点序列中的相应的虚拟节点进行比对。

在本发明的一种具体实施方式中，步骤S130可以包括以下步骤：

在缓存中，针对第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

在缓存中，保存有第一虚拟节点序列和第二虚拟节点序列。第一虚拟节点序列和第二虚拟节点序列中的虚拟节点均可以按照相同的规则确定其标识。针对第一虚拟节点序列中的每个虚拟节点，可以根据该虚拟节点的标识，将该虚拟节点与第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

在实际应用中，可以对两个虚拟节点序列中的虚拟节点进行同级比对，比对过程可以参见图2所示。

在本发明实施例中，可以通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对目标虚拟节点序列进行遍历，获得目标虚拟节点序列中每个虚拟节点的标识，目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

以图3所示的目标虚拟节点序列为例进行说明。通过深度优先规则，对该目标虚拟节点序列进行遍历，遍历的顺序为：节点0→节点1→节点2→节点3→节点4→节点5→节点6→节点7→节点8。通过遍历，可以获得该目标虚拟节点序列中每个虚拟节点的标识。如节点0的标识可以表示为0，节点1的标识可以表示为01，节点2的标识可以表示为012，……节点8的标识可以表示为012345678。这样，每个虚拟节点在目标虚拟节点序列中均具有唯一标识，即通过该标识，可以唯一确定一个虚拟节点。

第一虚拟节点序列和第二虚拟节点序列均可按照上述方法确定其虚拟节点的标识。

S140：确定第一虚拟节点序列和第二虚拟节点序列中具有差异化的虚拟节点。

通过步骤S130对第一虚拟节点序列与第二虚拟节点序列进行差异化比对之后，即可根据比对结果，确定第一虚拟节点序列和第二虚拟节点序列中具有差异化的虚拟节点。

S150：根据第二虚拟节点序列中具有差异化的虚拟节点，更新目标页面中相应的页面节点。

在步骤S140确定第一虚拟节点序列和第二虚拟节点序列中具有差异化的虚拟节点之后，可以将具有差异化的虚拟节点的相关信息反馈到相应的页面节点，更新目标页面中该相应页面节点，即将差异化内容映射到相应的页面节点，达到数据与页面节点同步的目的。

在本发明的一个实施例中，具有差异化的虚拟节点为子节点的差异，步骤S150可以包括以下步骤：

根据第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新目标页面相应的页面节点。

当需要对一个虚拟节点的子节点重新排序时，如果按照同层级进行虚拟节点的顺序比对，则所有的子节点都将被替换掉，将产生较大的开销。在本发明实施例中，可以根据第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离(Levenshtein Distance)算法更新目标页面相应的页面节点，这样，可以通过动态规划优化常见的移动场景，使得算法时间复杂度为线性趋势，即通过更新前后的顺序，求得最小的插入、删除操作。

需要说明的是，编辑距离算法为现有技术，本发明实施例对此不再赘述。

在实际应用中，还可以将存在差异的虚拟节点记录在缓存对象中，以便再次接收到针对页面节点的变更请求时进行新的比对。

应用本发明实施例所提供的方法，在接收到针对目标页面的页面节点的变更请求时，在缓存中将更新前的第一虚拟节点序列与更新后的第二虚拟节点序列进行差异化比对，确定具有差异化的虚拟节点，根据该虚拟节点，更新目标页面中相应的页面节点。在前端脚本语言和网络应用页面节点之间建立缓存，在缓存中进行虚拟节点的比对，达到快速更新页面节点的目的，提升了页面渲染速度。

相应于上面的方法实施例，本发明实施例还提供了一种页面渲染装置。

参见图4所示，该装置可以包括以下模块：

第一虚拟节点序列创建模块410，用于预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；

变更请求接收模块420，用于接收针对目标页面的页面节点的变更请求；

第二虚拟节点序列创建模块430，用于根据变更请求，创建与目标页面的页面节点序列对应的第二虚拟节点序列；

差异化比对模块440，用于在缓存中，对第一虚拟节点序列与第二虚拟节点序列进行差异化比对；

差异化虚拟节点确定模块450，用于确定第一虚拟节点序列和第二虚拟节点序列中具有差异化的虚拟节点；

页面节点更新模块460，用于根据第二虚拟节点序列中具有差异化的虚拟节点，更新目标页面中相应的页面节点。

应用本发明实施例所提供的装置，在接收到针对目标页面的页面节点的变更请求时，在缓存中将更新前的第一虚拟节点序列与更新后的第二虚拟节点序列进行差异化比对，确定具有差异化的虚拟节点，根据该虚拟节点，更新目标页面中相应的页面节点。在前端脚本语言和网络应用页面节点之间建立缓存，在缓存中进行虚拟节点的比对，达到快速更新页面节点的目的，提升了页面渲染速度。

在本发明的一种具体实施方式中，差异化比对模块440，具体用于：

在缓存中，针对第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

在本发明的一种具体实施方式中，装置还包括：

标识获得模块，用于通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对目标虚拟节点序列进行遍历，获得目标虚拟节点序列中每个虚拟节点的标识，目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，装置还包括：

目标虚拟节点序列创建模块，用于通过以下步骤创建与目标页面的页面节点序列相对应的目标虚拟节点序列：

获得目标页面的页面节点序列；

通过脚本语言对象模拟页面节点序列的序列结构，获得相对应的目标虚拟节点序列，目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

在本发明的一种具体实施方式中，具有差异化的虚拟节点为子节点的差异，页面节点更新模块460，具体用于：

根据第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新目标页面相应的页面节点。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本发明所提供的一种页面渲染方法及装置进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

Claims (10)

1.一种页面渲染方法，其特征在于，预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；所述方法包括：

接收针对所述目标页面的页面节点的变更请求；

根据所述变更请求，创建与所述目标页面的页面节点序列对应的第二虚拟节点序列；

在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对；

确定所述第一虚拟节点序列和所述第二虚拟节点序列中具有差异化的虚拟节点；

根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点。

2.根据权利要求1所述的方法，其特征在于，所述在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对，包括：

在所述缓存中，针对所述第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与所述第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

3.根据权利要求2所述的方法，其特征在于，通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对所述目标虚拟节点序列进行遍历，获得所述目标虚拟节点序列中每个虚拟节点的标识，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

4.根据权利要求1至3任一项所述的方法，其特征在于，通过以下步骤创建与所述目标页面的页面节点序列相对应的目标虚拟节点序列：

获得所述目标页面的页面节点序列；

通过脚本语言对象模拟所述页面节点序列的序列结构，获得相对应的目标虚拟节点序列，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

5.根据权利要求4所述的方法，其特征在于，所述具有差异化的虚拟节点为子节点的差异，所述根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点，包括：

根据所述第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新所述目标页面相应的页面节点。

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

第一虚拟节点序列创建模块，用于预先在缓存中创建与目标页面的页面节点序列相对应的第一虚拟节点序列；

变更请求接收模块，用于接收针对所述目标页面的页面节点的变更请求；

第二虚拟节点序列创建模块，用于根据所述变更请求，创建与所述目标页面的页面节点序列对应的第二虚拟节点序列；

差异化比对模块，用于在所述缓存中，对所述第一虚拟节点序列与所述第二虚拟节点序列进行差异化比对；

差异化虚拟节点确定模块，用于确定所述第一虚拟节点序列和所述第二虚拟节点序列中具有差异化的虚拟节点；

页面节点更新模块，用于根据所述第二虚拟节点序列中具有差异化的虚拟节点，更新所述目标页面中相应的页面节点。

7.根据权利要求6所述的装置，其特征在于，所述差异化比对模块，具体用于：

在所述缓存中，针对所述第一虚拟节点序列中的每个虚拟节点，根据该虚拟节点的标识，将该虚拟节点与所述第二虚拟节点序列中具有相同标识的虚拟节点进行差异化比对。

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

标识获得模块，用于通过以下步骤获得目标虚拟节点序列中每个虚拟节点的标识：

通过深度优先规则，对所述目标虚拟节点序列进行遍历，获得所述目标虚拟节点序列中每个虚拟节点的标识，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

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

目标虚拟节点序列创建模块，用于通过以下步骤创建与所述目标页面的页面节点序列相对应的目标虚拟节点序列：

获得所述目标页面的页面节点序列；

通过脚本语言对象模拟所述页面节点序列的序列结构，获得相对应的目标虚拟节点序列，所述目标虚拟节点序列为第一虚拟节点序列或者第二虚拟节点序列。

10.根据权利要求9所述的装置，其特征在于，所述具有差异化的虚拟节点为子节点的差异，所述页面节点更新模块，具体用于：

根据所述第二虚拟节点序列中具有差异化的虚拟节点，利用编辑距离算法更新所述目标页面相应的页面节点。