CN106599016A - 一种基于虚拟dom的前端元素维护方法 - Google Patents

Abstract

本发明公开了一种基于虚拟DOM的前端元素维护方法。它包括以下步骤：1)扫描初始DOM树，生成初始虚拟DOM树。2)当DOM树改变后，生成新的虚拟DOM树。3)对于同属一个父元素的虚拟DOM节点的变化，通过列表对比算法求取操作量最小的操作顺序，并将目标操作记录在差异对象patch中，并将差异对象添加到差异数组patches中。4)对于新老虚拟DOM树上对应的同一个虚拟DOM节点，比较其节点类型差异，并将目标修改方法记录在差异对象中返回，并将差异对象patch添加到差异数组patches中。5)重新对旧的DOM树进行深度优先遍历，对原有界面元素进行修改。本发明能够通过虚拟DOM对象的差异比较，自动找到操作量最小的DOM操作步骤，并根据记录的差异对象，实现对DOM的自动操作。

Description

一种基于虚拟DOM的前端元素维护方法

技术领域

本发明涉及复杂web应用中大量前端元素数据、业务逻辑以及界面之间的管理，尤其涉及一种双向数据绑定的特性。它能够确保当界面内容变化时，绑定的数据随之变化；而数据变化时，界面内容也同时发生变化，从而实现对web应用中数据、界面以及它们之间复杂相互依赖关系的管理。它利用先进的前端工程技术，简化了前端开发人员的工作，提高了前端开发和前端维护的效率。

背景技术

伴随着“web3.0”的浪潮，facebook、微博等各类大型web应用走向成熟，其程序的框架插件众多、体系繁复，复杂度达到了一个新的水准，往往让开发维护无所适从。在众多的前端操作中，DOM操作是最消耗浏览器资源的一项。在大型复杂web应用中，随着数据的变化和业务过程的推进，大量无法避免的DOM操作随之产生。不恰当的DOM操作容易造成界面频繁且无意义的重排重绘，造成计算资源的极大损耗与浪费。MVVM框架实现了数据和界面的双向绑定，DOM操作虽然实现了自动化，但是其操作数并没有减少，仍存在大量无意义且重复的DOM操作。如何优化DOM操作，得到总体操作数最少，浏览器绘制效率最高的DOM操作，是亟需解决的问题。

本发明中涉及到的名词解释。

web应用：Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。

DOM操作：DOM对象是指对界面中html标签在浏览器内的保存形式，是对界面对象的第一层抽象。

发明内容

本发明的目的是克服现有技术的不足，提供一种计算最佳DOM操作步骤的方法。

本发明的目的是通过以下技术方案来实现的：

基于虚拟DOM的前端元素维护方法，包括如下步骤：

1)扫描初始DOM树，根据DOM树生成初始虚拟DOM树；

2)当DOM树改变后，根据改变后的DOM树生成新的虚拟DOM树；

3)对于同属一个父元素的虚拟DOM节点的移动、删除和新增变化，通过列表对比算法求取操作量最小的移动、插入、删除操作顺序，并将目标操作记录在差异对象patch中，并将差异对象添加到差异数组patches中；

4)对于新老虚拟DOM树上对应的同一个虚拟DOM节点，比较其节点类型替换、属性变化、文本变化这三类差异，并将目标修改方法记录在差异对象中返回，并将差异对象patch添加到差异数组patches中；

5)重新对旧的DOM树进行深度优先遍历，遍历时根据具体的差异对象对原有界面元素进行修改。

上述方案中，各步骤可采用如下具体方法：

步骤1)和步骤2)具体如下：(1)获取需要进行维护的DOM树根节点，作为扫描起点；(2)利用深度遍历算法扫描DOM树；(3)对于每次扫描到的DOM节点，创建js对象，并记录该DOM节点的节点类型，属性以及子节点，作为该js对象的属性；该js对象为一个虚拟DOM节点；(4)对于每次扫描到的DOM节点，记录其节点位置并进行编号，该编号也作为虚拟DOM节点的一个属性。

步骤3)具体包括：

(1)将两组同属一个父元素的虚拟DOM节点线性排布，并新建差异数组patches；

(2)采用解决字符串最小编辑距离问题的levenshtein distance算法进行动态规划求解，计算出操作量最小的，对该父节点下所有虚拟DOM进行移动、插入、删除修改操作的操作步骤；

(3)新建差异对象patch，记录差异类型编号为1；

(4)新建remove数组，将具体的修改操作按顺序插入remove数组，并将remove数组其作为该差异对象的属性；remove数组中如果有记录新插入节点的操作，则该节点也用虚拟DOM的形式记录；

(5)将其父元素的编号作为差异对象的编号，并将该差异对象插入差异数组patches中。

步骤4)，具体包括：

(1)比较相同位置节点的节点类型，如果节点类型不同，则视为发生替换差异；

(2)依次比较相同位置节点的节点属性，如果节点属性发生变化，则视为发生属性变化差异，属性变化差异分为属性新增、属性删除和属性修改；

(3)比较相同位置节点的文本内容，如果文本内容不同，则视为发生文本变化差异；

(4)判断该节点是否已经存在对应的差异对象patch，如果存在，说明其已经在步骤3)中被创建；如果不存在，则新建差异对象；

(5)根据前三种差异类型，分别记录差异类型编号为2、3、4；将差异内容分别记录为newNode对象、prop对象、content对象，这三个对象分别保存新的虚拟DOM节点，新属性列表以及新的文本内容；再将这三个对象作为差异对象的属性；

(6)将该元素本身的编号作为该差异对象的编号，并将该差异对象插入差异数组patches中。

步骤5)具体包括：

(1)再次对旧虚拟DOM树进行深度优先遍历；

(2)对于每次遍历到的节点，通过其节点编号，从差异数组patches中调出对应的差异对象；

(3)根据差异对象中记录的虚拟DOM节点，创建实际DOM对象；

(4)根据差异对象中描述的差异类型和修改方法，对界面中的相应DOM对象进行正式的修改：如果差异类型编号为1，则对该元素执行添加、删除和移动子元素的操作；如果差异类型为编号为2，则用新的元素来替换该元素；如果差异类型编号为3，则重新设置该节点上的属性；如果差异类型编号为4，则重新设置该属性的文本；以上操作中所有设计的新增DOM都通过步骤(3)生成。

本发明与现有技术相比具有的有益成果是：

1)DOM对象包含大量W3C标准要求的属性和事件挂载，操作效率很低，但是单纯js对象的操作效率则很高。本发明利用单纯js对象作为虚拟DOM对象，以对虚拟DOM对象的计算和操作取代对DOM的直接操作，提高了计算效率。在界面分成了20个逻辑区域，每个区域50个元素DOM对象，一次更新20个逻辑区域的测试条件下，本发明的方法比操作传统DOM对象的方法节省了约50％的操作时间。传统DOM对象和虚拟DOM对象的比较如表1所示。

表1 DOM对象和虚拟DOM对象比较表

2)直接的DOM操作具有一定的盲目性，譬如直接用旧的视图更换掉旧的视图，就容易造成无谓的页面重排重绘，耗费浏览器资源。本发明通过虚拟DOM对象这一桥梁计算出最佳的DOM操作步骤，实现浏览器负载最小的DOM操作方案。

附图说明

图1是一种实现本发明的流程图。

图2为新老虚拟DOM树上对应的同一个虚拟DOM节点的差异比较示意图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步详细说明。

本发明提出的基于虚拟DOM的前端元素维护方法，具体步骤如下：

1)扫描初始DOM树，根据DOM树生成初始虚拟DOM树。

2)当DOM树改变后，根据改变后的DOM树生成新的虚拟DOM树。

3)对于同属一个父元素的虚拟DOM节点的移动、删除和新增变化，通过列表对比算法求取操作量最小的移动、插入、删除操作顺序，并将目标操作记录在差异对象patch中，并将差异对象添加到差异数组patches中。

4)对于新老虚拟DOM树上对应的同一个虚拟DOM节点，比较其节点类型替换、属性变化、文本变化这三类差异，并将目标修改方法记录在差异对象中返回，并将差异对象patch添加到差异数组patches中。

5)重新对旧的DOM树进行深度优先遍历，遍历时根据具体的差异对象对原有界面元素进行修改。

各步骤的具体实现如下：

所述的步骤1)和步骤2)包括：

(1)获取需要进行维护的DOM树根节点，作为扫描起点。(2)利用深度遍历算法扫描DOM树。(3)对于每次扫描到的DOM节点，创建js对象，并记录该DOM节点的节点类型(如div、p、h等)，属性(class、id、name等)以及子节点(如为文本节点，则直接记录文本)，作为该js对象的属性。该js对象就是一个虚拟DOM节点(4)对于每次扫描到的DOM节点，记录其节点位置并进行编号，该编号也作为虚拟DOM节点的一个属性。

所述的步骤3)包括：

(1)将两组同属一个父元素的虚拟DOM节点线性排布，并新建差异数组patches。

(2)采用解决字符串最小编辑距离(字符串相似度)问题的算法：levenshteindistance算法进行动态规划求解，计算出操作量最小的，对该父节点下所有虚拟DOM进行移动、插入、删除等修改操作的操作步骤。

(3)新建差异对象patch，记录差异类型编号为1(reorder)。

(4)新建remove数组，将具体的修改操作按顺序插入remove数组，并将remove数组其作为该差异对象的属性。remove数组中如果有记录新插入节点的操作，则该节点也用虚拟DOM的形式记录。

(5)将其父元素的编号作为差异对象的编号，并将该差异对象插入差异数组patches中。

所述的步骤4)包括：

(1)比较相同位置节点的节点类型，如果节点类型不同，则视为发生了节点替换差异。

(2)依次比较相同位置节点的节点属性，如果节点属性发生了变化，则视为发生了属性变化差异，属性变化差异又细分为属性新增、属性删除和属性修改。

(3)比较相同位置节点的文本内容，如果文本内容不同，则视为发生了文本变化差异。

(4)判断该节点是否已经存在对应的差异对象patch，如果存在，说明其已经在步骤3)中被创建。如果不存在，则新建差异对象。

(5)根据前三种差异类型，分别记录差异类型编号为2(replace)、3(prop)、4(text)。将差异内容分别记录为newNode对象、prop对象、content对象(键名)，这三个对象分别保存新的虚拟DOM节点，新属性列表以及新的文本内容。将这三个对象作为差异对象的属性。

(6)将该元素本身的编号作为该差异对象的编号，并将该差异对象插入差异数组patches中。

所述的步骤5)包括：

(1)再次对旧虚拟DOM树进行深度优先遍历。

(2)对于每次遍历到的节点，通过其节点编号，从差异数组patches中调出对应的差异对象。

(3)根据差异对象中记录的虚拟DOM节点，创建实际DOM对象。

(4)根据差异对象中描述的差异类型和修改方法，对界面中的相应DOM对象进行正式的修改。如果差异类型编号为1，则对该元素执行添加、删除和移动子元素的操作。如果差异类型为编号为2，则用新的元素来替换该元素。如果差异类型编号为3，则重新设置该节点上的属性。如果差异类型编号为4，则重新设置该属性的文本。以上操作中所有设计的新增DOM都通过步骤(3)生成。

基于上述方法，进一步通过实施例对其进行说明，各步骤中部分参数及结果如下：

第一步，扫描初始DOM树，根据DOM树生成初始虚拟DOM树。

第二步，当DOM树改变后，根据改变后的DOM树生成新的虚拟DOM树。前两步代码如下：

第三步，对于同属一个父元素的虚拟DOM节点的移动、删除和新增变化，通过列表对比算法求取操作量最小的移动、插入、删除操作顺序，并将目标操作记录在差异对象patch中，并将差异对象添加到差异数组patches中。

第四步，对于新老虚拟DOM树上对应的同一个虚拟DOM节点，比较其节点类型替换、属性变化、文本变化这三类差异，并将目标修改方法记录在差异对象中返回，并将差异对象patch添加到差异数组patches中。其比较过程如图2所示。根据三种情况，其主要代码为：

所有差异类型及其代码如表2所示：

表2差异类型表

第五步，重新对旧的DOM树进行深度优先遍历，遍历时根据具体的差异对象对原有界面元素进行修改。主要方法为：

由此，该方法通过虚拟DOM对象的差异比较，自动找到操作量最小的DOM操作步骤，并根据记录的差异对象，实现对DOM的自动操作。和基于数据双向绑定的MVVM框架结合，能够实现前端的自动化架构和维护。

Claims (5)

1.一种基于虚拟DOM的前端元素维护方法，其特征在于，包括如下步骤：

1)扫描初始DOM树，根据DOM树生成初始虚拟DOM树；

2)当DOM树改变后，根据改变后的DOM树生成新的虚拟DOM树；

3)对于同属一个父元素的虚拟DOM节点的移动、删除和新增变化，通过列表对比算法求取操作量最小的移动、插入、删除操作顺序，并将目标操作记录在差异对象patch中，并将差异对象添加到差异数组patches中；

4)对于新老虚拟DOM树上对应的同一个虚拟DOM节点，比较其节点类型替换、属性变化、文本变化这三类差异，并将目标修改方法记录在差异对象中返回，并将差异对象patch添加到差异数组patches中；

5)重新对旧的DOM树进行深度优先遍历，遍历时根据具体的差异对象对原有界面元素进行修改。

2.根据权利要求1所述的方法，其特征在于所述的步骤1)和步骤2)，具体如下：(1)获取需要进行维护的DOM树根节点，作为扫描起点；(2)利用深度遍历算法扫描DOM树；(3)对于每次扫描到的DOM节点，创建js对象，并记录该DOM节点的节点类型，属性以及子节点，作为该js对象的属性；该js对象为一个虚拟DOM节点；(4)对于每次扫描到的DOM节点，记录其节点位置并进行编号，该编号也作为虚拟DOM节点的一个属性。

3.根据权利要求1所述的方法，其特征在于步骤3)具体包括：

(1)将两组同属一个父元素的虚拟DOM节点线性排布，并新建差异数组patches；

(2)采用解决字符串最小编辑距离问题的levenshtein distance算法进行动态规划求解，计算出操作量最小的，对该父节点下所有虚拟DOM进行移动、插入、删除修改操作的操作步骤；

(3)新建差异对象patch，记录差异类型编号为1；

(4)新建remove数组，将具体的修改操作按顺序插入remove数组，并将remove数组其作为该差异对象的属性；remove数组中如果有记录新插入节点的操作，则该节点也用虚拟DOM的形式记录；

(5)将其父元素的编号作为差异对象的编号，并将该差异对象插入差异数组patches中。

4.根据权利要求1所述的方法，其特征在于步骤4)，具体包括：

(1)比较相同位置节点的节点类型，如果节点类型不同，则视为发生替换差异；

(2)依次比较相同位置节点的节点属性，如果节点属性发生变化，则视为发生属性变化差异，属性变化差异分为属性新增、属性删除和属性修改；

(3)比较相同位置节点的文本内容，如果文本内容不同，则视为发生文本变化差异；

(4)判断该节点是否已经存在对应的差异对象patch，如果存在，说明其已经在步骤3)中被创建；如果不存在，则新建差异对象；

(5)根据前三种差异类型，分别记录差异类型编号为2、3、4；将差异内容分别记录为newNode对象、prop对象、content对象，这三个对象分别保存新的虚拟DOM节点，新属性列表以及新的文本内容；再将这三个对象作为差异对象的属性；

(6)将该元素本身的编号作为该差异对象的编号，并将该差异对象插入差异数组patches中。

5.根据权利要求1所述的方法，其特征在于步骤5)具体包括：

(1)再次对旧虚拟DOM树进行深度优先遍历；

(2)对于每次遍历到的节点，通过其节点编号，从差异数组patches中调出对应的差异对象；

(3)根据差异对象中记录的虚拟DOM节点，创建实际DOM对象；

(4)根据差异对象中描述的差异类型和修改方法，对界面中的相应DOM对象进行正式的修改：如果差异类型编号为1，则对该元素执行添加、删除和移动子元素的操作；如果差异类型为编号为2，则用新的元素来替换该元素；如果差异类型编号为3，则重新设置该节点上的属性；如果差异类型编号为4，则重新设置该属性的文本；以上操作中所有设计的新增DOM都通过步骤(3)生成。