DOM总结

虚拟DOM是什么

一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其它属性

虚拟DOM有什么优点

1.能减少不必要的DOM操作（减少操作次数和减少操作范围）

① 虚拟DOM可以将多次操作合并为一次操作，比如你有1000个节点，用JS需要操作 1000次，而用虚拟DOM是你往数组里面放1000个节点，我一次性把1000个节点放

在页面上（只操作了一次）;

② 虚拟DOM借助DOM diff把多余的操作省掉，比如我之前页面有1000个节点，现在需

要操作1010个，那么多增加了10个，用虚拟DOM可以把之前操作的1000次记录下

来，只取出来新增的10个节点操作即可

2.能跨平台渲染

虚拟DOM不仅可以变成DOM,还可以变成小程序、IOS应用、安卓应用，因为虚拟DOM本质上只是一个对象

虚拟DOM有什么缺点

需要额外的创建函数，如cerateElement 或 h ，但可以通过JSX来简化XML写法

简化前写法

DOM diff 是什么

就是一个函数，我们称为patch

changed = patch(oldVNode,newVNode)

**********************不重要************************

changed就在要运行的DOM操作，可能长这样：

[

{type: 'INSERT',vNode : ...},

{type: 'text',vNode : ...},

{type: 'PROPS',propsPatch :[...]},

]

DOM diff的大概逻辑

Tree diff

            将新旧两棵树逐层对比，找出哪些节点需要更新

            如果节点是组件就看Component diff

            如果节点是标签就看Element diff

Component diff

            如果节点是组件，就先看组件类型

            类型不同直接替换（删除旧的）

            类型相同则只更新属性

            然后深入组件做Tree diff(递归)

Element diff

            如果节点是原生标签，则看标签名

            标签名不同直接替换，相同则只更新属性

            然后进入标签后代做Tree diff(递归)