虚拟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：父节点相同，对比节点的属性、文本，进行替换或者删除