局部页面动态渲染方法及装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN110245311A(43)申请公布日2019.09.17(21)申请号201910308902.4(22)申请日2019.04.17(71)申请人阿里巴巴集团控股有限公司地址英属开曼群岛大开曼资本大厦一座四层847号邮箱(72)发明人郝立鑫(74)专利代理机构北京众达德权知识产权代理有限公司11570代理人刘杰(51)Int.Cl.G06F16/958(2019.01)权利要求书7页说明书14页附图2页(54)发明名称局部页面动态渲染方法及装置(57)摘要本说明书实施例提供了一种局部页面动态渲染方法，在检测到目标页面中存在数据变更情况下，获得与变更前的视图页面的第一虚拟DOM树以及变更后的视图页面的第二虚拟DOM树，然后按虚拟索引位置依次进行对比，根据对比结果，按真实索引位置依次对真实DOM树中对应节点进行渲染操作，直至对比至最后一个虚拟索引位置。由于预先构建了相邻两个虚拟索引位置处节点的变更状态与预设渲染操作间预设的对应关系，包含了页面渲染时所有的状态变更关系，预先配置了与每一种状态变更关系对应的预设渲染操作。在每次比对时，根据相邻节点的状态变更关系，确定对应的预设渲染操作，按该预设渲染操作进行页面渲染，实现页面无标签包裹的局部动态渲染。CN110245311ACN110245311A权利要求书1/7页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所述的方法，所述根据相邻两个虚拟索引位置处节点的变更状态与2CN110245311A权利要求书2/7页预设渲染操作间预设的对应关系，确定与所述第二变更状态至所述第一变更状态对应的目标预设渲染操作，按所述目标预设渲染操