局部页面动态渲染方法及装置制造方法及图纸

本说明书实施例提供了一种局部页面动态渲染方法，在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，然后按虚拟索引位置依次进行对比，根据对比结果，按真实索引位置依次对真实DOM树中对应节点进行渲染操作，直至对比至最后一个虚拟索引位置。由于预先构建了相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，包含了页面渲染时所有的状态变更关系，预先配置了与每一种状态变更关系对应的预设渲染操作。在每次比对时，根据相邻节点的状态变更关系，确定对应的预设渲染操作，按该预设渲染操作进行页面渲染，实现页面无标签包裹的局部动态渲染。

Dynamic Rendering Method and Device for Local Pages

【技术实现步骤摘要】
局部页面动态渲染方法及装置
本说明书实施例涉及互联网
，尤其涉及一种局部页面动态渲染方法及装置。
技术介绍
现有技术中的应用程序为了给用户提供优质的体验，涉及需要功能页面，页面中的某些元素需要进行局部更新，比如：时间元素、天气元素等。针对页面中局部元素的更新，可采用MVVM框架方案中的React系列方法，使用了基于JSX语法的DOMDiff方案，其将数据和视图进行绑定，当数据变更时生成新视图和老视图对比，进行局部更新。React系方法中，因实际Diff方法过程需要，所有可变数据在DOM中以SPAN标签包裹(老版)或注释标签包裹(新版)，这会对原有DOM造成侵入、多余数据、多余变更侦听的缺点。
技术实现思路
本说明书实施例提供及一种局部页面动态渲染方法及装置。第一方面，本说明书实施例提供一种局部页面动态渲染方法，包括：在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，其中，针对所述虚拟DOM树和所述第二虚拟DOM树创建有同一虚拟索引，针对真实DOM树创建有真实索引；按虚拟索引顺序依次对所述第一虚拟DOM树中节点与所述第二虚拟DOM树中的节点进行对比，确定所述第一虚拟DOM树和所述第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及确定所述第一虚拟DOM树和所述第二虚拟DOM树中在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。第二方面，本说明书实施例提供一种局部页面动态渲染装置，包括：获取单元，用于在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，其中，针对所述虚拟DOM树和所述第二虚拟DOM树创建有同一虚拟索引，针对真实DOM树创建有真实索引；渲染单元，用于按虚拟索引顺序依次对所述第一虚拟DOM树中节点与所述第二虚拟DOM树中的节点进行对比，确定所述第一虚拟DOM树和所述第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及确定所述第一虚拟DOM树和所述第二虚拟DOM树中在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。第三方面，本说明书实施例提供一种局部页面动态渲染装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一项所述局部页面动态渲染方法的步骤。第四方面，本说明书实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述局部页面动态渲染方法的步骤。本说明书实施例有益效果如下：本说明书实施例中，首先，在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树。然后，按虚拟索引顺序依次对第一虚拟DOM树中节点与第二虚拟DOM树中的节点进行对比，确定第一虚拟DOM树和第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与第二变更状态至第一变更状态对应的目标预设渲染操作，按目标预设渲染操作对真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。使得文本数据不再需要被SPAN或注释等其它标签包裹，从而达到无侵入原有DOM结构、不增加多余数据、不触发多余变更事件的效果。附图说明图1为本说明书实施例第一方面局部页面动态渲染方法流程图；图2为本说明书实施例第一方面实施例中的预设状态转移图；图3为本说明书实施例第二方面局部页面动态渲染装置结构示意图；图4为本说明书实施例第三方面局部页面动态渲染装置结构示意图。具体实施方式为了更好的理解上述技术方案，下面通过附图以及具体实施例对本说明书实施例的技术方案做详细的说明，应当理解本说明书实施例以及实施例中的具体特征是对本说明书实施例技术方案的详细的说明，而不是对本说明书技术方案的限定，在不冲突的情况下，本说明书实施例以及实施例中的技术特征可以相互组合。第一方面，本说明书实施例提供一种局部页面动态渲染方法，请参考图1，包括步骤S101-S102。S101：在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，其中，针对所述虚拟DOM树和所述第二虚拟DOM树创建有同一虚拟索引，针对真实DOM树创建有真实索引；S102：按虚拟索引顺序依次对所述第一虚拟DOM树中节点与所述第二虚拟DOM树中的节点进行对比，确定所述第一虚拟DOM树和所述第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及确定所述第一虚拟DOM树和所述第二虚拟DOM树中在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。具体的，本实施例中的局部页面动态渲染方法主要应用于前端展示的应用程序，如：浏览器。在现有的前端展示解决方案中，应用较为普遍包括MVVM框架，MVVM为前端时下流行的最新框架方案统称，是对传统的MVC(数据、视图、控制)的改进，M(数据)V(视图)VM(视图数据绑定)。由于页面通常是由对象组成的，这些对象被组织在一个树形结构中，另外，页面中的对象通常是以模型的形式表示的，用来表示上述对象所在树形结构的标准模型称为DOM(DocumentObjectModel，文档对象模型)。在进行页面渲染时，页面更新是前端基于待更新到页面的数据更新页面的过程，即基于待更新到页面的数据，更新真实DOM。如果直接对真实DOM进行操作，会非常复杂且低效。相较于真实DOM，原生的JavaScript对象处理起来更快，而且更简单。DOM树上的结构、属性信息都可以很容易地用JavaScript对象表示出来。所以，在MVVM框架下，React系列使用了基于JSX语法的DOMDiff方案，其将数据和视图进行绑定，当数据变更时生成新视图和老视图对比，进行局部更新。其中，JSX是facebook专利技术的一种语法规范，继承原有js语法扩充了主表达式，使得html的DOM能够成为一个变量，并称之为虚拟DOM(VirtualDOM)，VirtualDOM对应真实DOM的js变量，一本文档来自技高网...

【技术保护点】
1.一种局部页面动态渲染方法，包括：在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，其中，针对所述虚拟DOM树和所述第二虚拟DOM树创建有同一虚拟索引，针对真实DOM树创建有真实索引；按虚拟索引顺序依次对所述第一虚拟DOM树中节点与所述第二虚拟DOM树中的节点进行对比，确定所述第一虚拟DOM树和所述第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及确定所述第一虚拟DOM树和所述第二虚拟DOM树中在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。

【技术特征摘要】
1.一种局部页面动态渲染方法，包括：在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，其中，针对所述虚拟DOM树和所述第二虚拟DOM树创建有同一虚拟索引，针对真实DOM树创建有真实索引；按虚拟索引顺序依次对所述第一虚拟DOM树中节点与所述第二虚拟DOM树中的节点进行对比，确定所述第一虚拟DOM树和所述第二虚拟DOM树中在当前虚拟索引位置处的节点的第一变更状态，以及确定所述第一虚拟DOM树和所述第二虚拟DOM树中在前一虚拟索引位置处的节点的第二变更状态，根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，直至完成最后一个虚拟索引位置所对应的真实索引位置处的节点的渲染。2.根据权利要求1所述的方法，所述方法还包括：在对所述目标页面初始化渲染后，获得初始页面的初始虚拟DOM树；遍历所述初始虚拟DOM树，确定所述初始虚拟DOM树中所包含的空白变量；在每个所述空白变量位置处插入空文本节点。3.根据权利要求2所述的方法，所述空白变量包括空字符串、null字段、空数组和undefined字段中的任意一种。4.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述初始状态跳转至所述文本节点至文本节点变更状态或所述DOM节点至DOM节点变更状态跳转至所述文本节点至文本节点变更状态，创建索引记录，所述索引记录中记录有虚拟索引内容，虚拟索引内容为所述第二虚拟DOM树中当前虚拟索引位置处的文本内容，如果所述第二虚拟DOM树中当前虚拟索引位置处的文本内容与所述第一虚拟DOM树中当前虚拟索引位置处的文本内容不一致，标记所述真实DOM树中当前真实索引位置的内容需要更新。5.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至文本节点变更状态跳转至所述文本节点至文本节点变更状态，创建索引记录，所述索引记录中记录的虚拟索引内容为在所述第二虚拟DOM树中当前虚拟索引位置处的文本节点的内容与相邻的上一个文本节点对应的索引记录中的虚拟索引内容的第一合并内容，确定在所述第一虚拟DOM树中包括所述当前虚拟索引位置处的节点在内的前面连续的文本节点对应的第二合并内容，如果所述第一合并内容和所述第二合并内容不一致，标记所述真实DOM树当前真实索引位置的内容需要更新。6.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至文本节点变更状态跳转至所述文本节点至DOM节点变更状态，获得所述当前虚拟索引位置的前一个虚拟索引位置对应的索引记录，如果所述索引记录中标记所述真实DOM树当前真实索引位置的内容需要更新，则将所述真实DOM树中当前真实索引位置处的文本节点内容变更为所述索引记录中的虚拟索引内容，将所述真实DOM树的当前真实索引位置加1，将所述第二虚拟DOM树中的所述当前虚拟索引位置处的DOM节点插入所述真实DOM树的当前真实索引位置，将所述真实DOM树的当前真实索引位置加1。7.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至文本节点变更状态跳转至所述DOM节点至文本节点变更状态，获得所述当前虚拟索引位置的前一虚拟索引位置对应的索引记录，如果所述索引记录中标记所述真实DOM树当前真实索引位置的内容需要更新，则将所述真实DOM树中当前真实索引位置处的文本节点的内容变更为所述索引记录中的虚拟索引内容，移除所述真实DOM树的当前真实索引位置加1处的节点。8.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至文本节点变更状态跳转至所述DOM节点至DOM节点变更状态或所述DOM节点至文本节点变更状态跳转至所述DOM节点至文本节点变更状态，将所述真实DOM树的当前真实索引位置加1，如果所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点与所述第一虚拟DOM树中当前虚拟索引位置处的DOM节点不一致，将所述真实DOM树的当前真实索引位置处的DOM节点更新为所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点，将所述真实DOM树的当前真实索引位置加1。9.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述初始状态跳转至所述文本节点至DOM节点变更状态或所述DOM节点至DOM节点变更状态跳转至所述文本节点至DOM节点变更状态，将所述真实DOM树中当前真实索引位置对应的文本节点变更为所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点，将所述真实DOM树的当前真实索引位置加1。10.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至DOM节点变更状态跳转至所述文本节点至DOM节点变更状态，在所述真实DOM树的当前真实索引位置处插入所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点，将所述真实DOM树的当前真实索引位置加1。11.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至DOM节点变更状态跳转至所述文本节点至文本节点变更状态，在所述真实DOM树的当前真实索引位置处插入所述第二虚拟DOM树中当前虚拟索引位置处的文本节点，创建索引记录，所述索引记录中的虚拟索引内容记录为第二虚拟DOM树中当前虚拟索引位置处的文本节点的内容，如果所述第二虚拟DOM树中当前虚拟索引位置处的文本内容与所述第一虚拟DOM树中当前虚拟索引位置处的文本内容不一致，标记所述真实DOM树中当前真实索引位置的内容需要更新。12.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至DOM节点变更状态跳转至所述DOM节点至文本节点变更状态或所述第二变更状态至所述第一变更状态为所述初始状态变更状态跳转至所述DOM节点至文本节点变更状态或所述DOM节点至DOM节点变更状态跳转至所述DOM节点至文本节点变更状态，将所述真实DOM树中当前真实索引位置对应的DOM节点变更为所述第二虚拟DOM树中当前虚拟索引位置处的文本节点，创建索引记录，所述索引记录中的虚拟索引内容记录为所述第二虚拟DOM树中当前虚拟索引位置处的文本节点的内容。13.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至DOM节点变更状态跳转至所述DOM节点至DOM节点变更状态或所述初始状态跳转至所述DOM节点至DOM节点变更状态或所述DOM节点至DOM节点变更状态跳转至所述DOM节点至DOM节点变更状态，如果所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点与所述第一虚拟DOM树中当前虚拟索引位置处DOM节点不一致，将所述真实DOM树中当前真实索引位置对应的DOM节点变更为所述第二虚拟DOM树中当前虚拟索引位置处的DOM节点，将所述真实DOM树的当前真实索引位置加1。14.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操作对所述真实DOM树中对应真实索引位置处的节点进行渲染，包括：如果所述第二变更状态至所述第一变更状态为所述文本节点至DOM节点变更状态跳转至所述DOM节点至文本节点变更状态，获得所述当前虚拟索引位置的前一个虚拟索引位置对应的索引记录，如果所述索引记录中标记所述真实DOM树当前真实索引位置的内容需要更新，则将所述真实DOM树中当前真实索引位置更新为所述索引记录中的虚拟索引内容，移除所述真实DOM树的当前真实索引位置加1处的节点。15.根据权利要求1所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间...

【专利技术属性】
技术研发人员：郝立鑫，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY