虚拟DOM

传统的 DOM 操作是直接在 DOM 上操作，当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。如果需要操作的DOM元素过多，则成本太高，而采用 Virtual DOM 则会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分。

引入虚拟DOM优缺点：

• 尺寸

更多的功能意味着更多的代码。

• 内存

虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

• 不是适合所有情况

如果虚拟DOM大量更改，这是合适的。但是单一的，频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。所以，如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢。但对于大多数单页面应用，这应该都会更快

react虚拟dom：

依据diff算法，React把js和html混写在一起来

前端：更新状态、更新视图；所以前端页面的性能问题主要是由Dom操作引起的。因为Dom渲染慢，而JS解析编译相对非常非常非常快！js更容易表示节点

<ul id='app'>

<li>app1</li>

<li>app2</li>

</ul>

var domNode = {

tag: 'ul'

attributes: {

id: 'myId'

}

children: [ //这里是 li ]

};

只操作JavaScript对象

diff算法是虚拟dom核心：

传统的diff算法复杂度是次方级别增长，而react用的优化过的diff算法：

过程：1.节点比较（属性、文本）；2.记录差别（编号）；3.增删改查（js）；

优化点：

1：老的父节点和新的父节点只要不一样，ok，断臂！即使孩子节点一模一样，都要删除，渲染新的节点；

2：父节点相同，对比节点的属性、文本，进行替换或者删除