CN110209985A - 一种更新dom树的方法 - Google Patents

Abstract

本发明公开了一种更新DOM树的方法，包括：根据真实DOM树生成虚拟DOM树；在虚拟DOM树的一个旧节点oldVnode的数据改变后，生成一个新节点Vnode；比较旧节点oldVnode和新节点Vnode，将新节点Vnode相对于旧节点oldVnode的不同之处直接修改在真实DOM树上。本发明只需要更新修改的小块dom而不要更新整个dom。

Description

一种更新DOM树的方法

技术领域

本发明涉及更新DOM树的方法。

背景技术

随着互联网的快速发展，越来越多的业务办理，需求开发都转移到网上办理，所以各个网站的响应速度成为重中之重。一个Web页面可以看作是一个DOM树(文档对象模型)，每一个节点位置的改变，就会导致整颗树的改变。目前浏览器渲染真实DOM的开销非常大，如果需要修改某个数据，如直接渲染到真实DOM上会引起整个DOM树的重绘和重排。

发明内容

本发明的目的在于提供一种更新DOM树的方法，只需要更新修改的小块dom而不要更新整个dom。

实现上述目的的技术方案是：

一种更新DOM树的方法，包括：

一、根据真实DOM树生成虚拟DOM树；

二、在虚拟DOM树的一个旧节点oldVnode的数据改变后，生成一个新节点Vnode；

三、比较旧节点oldVnode和新节点Vnode，将新节点Vnode相对于旧节点oldVnode的不同之处直接修改在真实DOM树上。

优选的，将真实DOM树的数据抽取出来，以节点的形式模拟树形结构，形成虚拟DOM树。

优选的，在生成虚拟DOM树之后，通过数据劫持结合发布者-订阅者模式的方式进行数据双向绑定。

优选的，所述的步骤三，包括：

在旧节点oldVnode的数据改变时，调用Dep.notify通知所有订阅者；

订阅者调用patch函数接收旧节点oldVnode和新节点Vnode的参数，判断旧节点oldVnode和新节点Vnode是否值得比较，若否，用新节点Vnode替换旧节点oldVnode修改在真实DOM树上；若是，执行patchVnode函数比较旧节点oldVnode和新节点Vnode的子节点，根据结果修改真实DOM树。

优选的，所述的执行patchVnode函数，包括：

判断旧节点oldVnode和新节点Vnode是否同一个节点，若是，结束，若否，进行如下操作：

如果旧节点oldVnode和新节点Vnode都有文本节点并且不相等，将真实DOM树中旧节点oldVnode的文本节点设置为Vnode的文本节点；

如果旧节点oldVnode有子节点而新节点Vnode没有子节点，则删除真实DOM树中旧节点oldVnode的子节点；

如果旧节点oldVnode没有子节点而新节点Vnode有子节点，则创建新节点Vnode的子节点dom树，并添加到真实DOM树的旧节点oldVnode中；

如果旧节点oldVnode和新节点Vnode都有子节点，则执行updateChildren函数以比较子节点。

优选的，所述的执行updateChildren函数，包括：

提取旧节点oldVnode的各个子节点oldch和新节点Vnode的各个子节点VCh；

将头尾的子节点Vch和头尾的子节点oldCh两两比较，在某两个子节点相等时，将真实DOM树中相应的子节点移动到相等的子节点VCh的位置；

去除相等的两个子节点，重新定义头尾的子节点Vch和头尾的子节点oldCh，继续两两比较，直至各子节点Vch或者各子节点oldCh遍历完成；

各子节点oldCh遍历完成，将剩余的子节点Vch插入真实DOM树中其所在位置；

各子节点Vch遍历完成，将剩余的子节点oldCh从真实DOM树中删除。

本发明的有益效果是：本发明通过根据真实DOM树生成虚拟DOM，将新节点Vnode和旧节点oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM树上，最后快速的更新完成新的dom树，完成页面的渲染。

附图说明

图1是本发明中更新DOM树的流程图；

图2是本发明中数据双向绑定的原理图；

图3是本发明中旧节点和新节点各自子节点的示意图；

图4是本发明中更新子节点的dom树的示意图。

具体实施方式

下面将结合附图对本发明作进一步说明。

本发明的更新DOM树的方法，包括下列步骤：

一、根据真实DOM树生成虚拟DOM树。即：将真实DOM树的数据抽取出来，以节点的形式模拟树形结构，形成虚拟DOM树。在生成虚拟DOM树之后，通过数据劫持结合发布者-订阅者模式的方式进行数据双向绑定。具体地，数据双向绑定的实现过程如图2所示，包括：

1)实现一个监听器(Observer)，用来劫持并监听节点对象上所有属性，其实现核心方法就是Object.defineProperty()(对象定义新属性或修改原有的属性)，如果有变动的，就通过订阅器去通知订阅者。

2)实现一个订阅者(Watcher)，可以收到属性的变化通知并执行相应的get函数(get函数执行了添加订阅者Wather的操作的，所以我们只要在订阅者初始化的时候出发对应的get函数去执行添加订阅者操作即可，只要获取对应的属性值就可以触发get的函数)，从而更新浏览器视图。

3)实现一个解析器(Compile)，可以扫描和解析每个dom树对象节点的相关指令，并根据初始化模板数据更新视图以及将模板指令对应的节点绑定对应的更新函数，通过订阅者初始化相应的订阅器。订阅器(Dep)主要负责收集订阅者，然后在属性变化的时候执行对应订阅者的更新函数(订阅者会因为属性的变化而改变，这里这个更新方法是用来更新了订阅者)，view就是浏览器视图。

二、在虚拟DOM树的一个旧节点oldVnode的数据改变后，生成一个新节点Vnode。

三、比较旧节点oldVnode和新节点Vnode，将新节点Vnode相对于旧节点oldVnode的不同之处直接修改在真实DOM树上。具体地，如图1所示，包括下列步骤：

1)在旧节点oldVnode的数据改变时，set方法(通过Object.defineProperty()对属性设置一个set函数，当数据改变了就会来触发这个函数)会让订阅器调用Dep.notify(订阅器的通知方法)通知所有订阅者；

2)订阅者调用patch函数(补丁函数)接收旧节点oldVnode和新节点Vnode的参数，判断旧节点oldVnode和新节点Vnode是否值得比较(两个节点标签名、属性都一致时则值得比较)，若否，用新节点Vnode替换旧节点oldVnode修改在真实DOM树上。如果两个节点不一样那就说明Vnode完全被改变了，就可以直接替换oldVnode，虽然这两个节点不一样但是他们的子节点一样那也不会深入比较，因为该方法是逐层比较的，如果第一层不一样那么就不会继续深入比较第二层了。若是，执行patchVnode函数(补丁节点函数)进行比较旧节点oldVnode和新节点Vnode的子节点(通过循环逐层比较子节点下的子节点)，根据结果修改真实DOM树。具体地，执行patchVnode函数，包括下列步骤：

判断旧节点oldVnode和新节点Vnode是否同一个节点，若是，结束，若否，进行如下操作：

如果旧节点oldVnode和新节点Vnode都有文本节点并且不相等，将真实DOM树中旧节点oldVnode的文本节点设置为Vnode的文本节点。

如果旧节点oldVnode有子节点而新节点Vnode没有子节点，则删除真实DOM树中旧节点oldVnode的子节点。

如果旧节点oldVnode没有子节点而新节点Vnode有子节点，则创建新节点Vnode的子节点dom树，并添加到真实DOM树的旧节点oldVnode中。

如果旧节点oldVnode和新节点Vnode都有子节点，则执行updateChildren函数以比较子节点。具体地，执行updateChildren函数(更新子节点的dom树)，包括下列步骤：

将旧节点oldVnode的各个子节点oldch和新节点Vnode的各个子节点VCh提取出来；

将头尾的子节点Vch和头尾的子节点oldCh两两比较，在某两个子节点相等时，将真实DOM树中相应的子节点移动到相等的子节点VCh的位置；

去除相等的两个子节点，重新定义头尾的子节点Vch和头尾的子节点oldCh，继续两两比较，直至各子节点Vch或者各子节点oldCh遍历完成；

各子节点oldCh遍历完成，将剩余的子节点Vch插入真实DOM树中其所在位置；

各子节点Vch遍历完成，将剩余的子节点oldCh从真实DOM树中删除、

结合附图3、4，将头尾的子节点oldCh定义为：oldStartIdx和oldEndIdx；将头尾的子节点Vch定义为：StartIdx和EndIdx。进行举例说明：

1)oldStartIdx＝A,oldEndIdx＝D；StartIdx＝A,EndIdx＝B；

oldStartIdx和StartIdx匹配，则将真实dom中的A节点放到第一个，已经是第一个了就不管了，此时dom的位置为：A B D。

2)oldStartIdx＝B,oldEndIdx＝D；StartIdx＝C,EndIdx＝B；

oldStartIdx和EndIdx匹配，就将原本的B节点移动到最后，因为EndIdx是最后一个节点，他们位置要一致，这就是上面说的：在某两个子节点相等时，将真实DOM树中相应的子节点移动到相等的子节点VCh的位置，此时dom的位置为：A DB。

3)oldStartIdx＝D,oldEndIdx＝D；StartIdx＝C,EndIdx＝D；

oldEndIdx和EndIdx匹配，位置不变此时dom的位置为：A D B。

4)oldStartIdx++；oldEndIdx--；oldStartIdx>oldEndIdx；

遍历结束，说明oldCh先遍历完。就将剩余的vCh节点插入到真实dom中去，此时dom位置为：A C D B。

以上实施例仅供说明本发明之用，而非对本发明的限制，有关技术领域的技术人员，在不脱离本发明的精神和范围的情况下，还可以作出各种变换或变型，因此所有等同的技术方案也应该属于本发明的范畴，应由各权利要求所限定。

Claims (6)

1.一种更新DOM树的方法，其特征在于，包括：

一、根据真实DOM树生成虚拟DOM树；

二、在虚拟DOM树的一个旧节点oldVnode的数据改变后，生成一个新节点Vnode；

三、比较旧节点oldVnode和新节点Vnode，将新节点Vnode相对于旧节点oldVnode的不同之处直接修改在真实DOM树上。

2.根据权利要求1所述的更新DOM树的方法，其特征在于，将真实DOM树的数据抽取出来，以节点的形式模拟树形结构，形成虚拟DOM树。

3.根据权利要求1所述的更新DOM树的方法，其特征在于，在生成虚拟DOM树之后，通过数据劫持结合发布者-订阅者模式的方式进行数据双向绑定。

4.根据权利要求3所述的更新DOM树的方法，其特征在于，所述的步骤三，包括：

在旧节点oldVnode的数据改变时，调用Dep.notify通知所有订阅者；

订阅者调用patch函数接收旧节点oldVnode和新节点Vnode的参数，判断旧节点oldVnode和新节点Vnode是否值得比较，若否，用新节点Vnode替换旧节点oldVnode修改在真实DOM树上；若是，执行patchVnode函数比较旧节点oldVnode和新节点Vnode的子节点，根据结果修改真实DOM树。

5.根据权利要求4所述的更新DOM树的方法，其特征在于，所述的执行patchVnode函数，包括：

判断旧节点oldVnode和新节点Vnode是否同一个节点，若是，结束，若否，进行如下操作：

如果旧节点oldVnode和新节点Vnode都有文本节点并且不相等，将真实DOM树中旧节点oldVnode的文本节点设置为Vnode的文本节点；

如果旧节点oldVnode有子节点而新节点Vnode没有子节点，则删除真实DOM树中旧节点oldVnode的子节点；

如果旧节点oldVnode没有子节点而新节点Vnode有子节点，则创建新节点Vnode的子节点dom树，并添加到真实DOM树的旧节点oldVnode中；

如果旧节点oldVnode和新节点Vnode都有子节点，则执行updateChildren函数以比较子节点。

6.根据权利要求5所述的更新DOM树的方法，其特征在于，所述的执行updateChildren函数，包括：

提取旧节点oldVnode的各个子节点oldch和新节点Vnode的各个子节点VCh；

将头尾的子节点Vch和头尾的子节点oldCh两两比较，在某两个子节点相等时，将真实DOM树中相应的子节点移动到相等的子节点VCh的位置；

去除相等的两个子节点，重新定义头尾的子节点Vch和头尾的子节点oldCh，继续两两比较，直至各子节点Vch或者各子节点oldCh遍历完成；

各子节点oldCh遍历完成，将剩余的子节点Vch插入真实DOM树中其所在位置；

各子节点Vch遍历完成，将剩余的子节点oldCh从真实DOM树中删除。