虚拟DOM和DIFF算法

一、真实DOM的解析流程

第一步、用HTML分析器，分析HTML元素，构建一棵DOM树(标记化和树构建)。

第二步、用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步、将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步、当有了Render树之后，浏览器将根据节点，生成精准坐标，为生存页面元素而准备

第五步、Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来

二、真实DOM的麻烦之处

在操作真实DOM的时候，原生JS和JQ都会重新加载渲染一遍，所以操作真实DOM是昂贵的，因此要尽量减少真实DOM的操作，所以就有了虚拟DOM操作

三、什么叫虚拟DOM

用一个对象来描述dom结构，这个对象就是虚拟dom

四、diff算法

利用的就是虚拟DOM和真实DOM的对比,而对比的方法就是diff算法。

那对比是怎么对比的呢

同层比较

同层比较.png

举个例子

我们可能期望把直接移到

后边，这是最优操作，
但实际diff算法的操作为，

1.移除p标签里面的span
2.在创建一个新的 插到

的后边。
因为新加的在层级2，旧的在层级3,属于不同层级的比较。（如果发现新旧两个节点类型不同时，Diff算法会直接删除旧的节点及其子节点并插入新的节点，这是由于前面提出的不同组件产生的DOM结构一般是不同的，所以可以不用浪费时间去比较。注意的是，删除节点意味着彻底销毁该节点，并不会将该节点去与后面的节点相比较）

为什么要虚拟DOM？

若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

虚拟DOM怎么比对（2）

1、如果type、key不一样:->直接replaceChild新节点替换掉老节点。
2、type、key一样，都是文本类型:->直接修改textContent。
3、type、key一样，都是节点类型:->比对props,根据新节点的属性更新老节点的属性 。

对比Children
1、老节点有，新节点没有->删除老节点的innerHtml;
2、老节点没有，新节点有->给新节点的添加子节点；
3、老节点有，新节点有->updataChildren(标记新老节点的开始和结束指针，分5种情况:新头节点-老头结点比、 新尾结点-老尾结点比、 新头结点-老尾结点比、 新尾结点-老头结点比，暴力对比（根据map结构，看老节点中是否有某个子节点，有的话，移动，没有的话添加。）