1. 虚拟DOM

1.1 虚拟DOM是什么

对原生DOM对象封装的对象, 虚拟DOM和原生DOM有对应关系, 最大的区别虚拟DOM封装了DOM diff 算法, 能避免不必要的页面更新.

1.2 虚拟DOM的优点

虚拟Dom优点:

减少Dom操作
跨平台: 小程序, ios之类也能用

1.3 虚拟DOM的缺点

缺点:

需要额外的创建函数, 例如 createElement
当节点数量及其恐怖的时候, 虚拟DOM diff算法反而会更慢 js很快, 但是浏览器渲染很慢, 渲染期间浏览器无法交互. 1000个节点React更快, 10万个节点React超级慢. 规模没有达到恐怖级别, React更快vue在10万基本, 接近原生

2. DOM diff

2.1 DOM diff 是什么

虚拟 DOM 就是用来模拟 DOM 的一个对象，这个对象拥有一些重要属性，并且更新 UI 主要就是通过对比（DIFF）旧的虚拟 DOM 树和新的虚拟 DOM 树的区别完成的浏览器会将html css 解析合并成一个html, css树, React diff 也就是比较两颗树. 两颗树的比较有深度优先遍历和广度优先遍历.

2.2 DOM diff 的优点

优点:能够避免不必要的更新,加快渲染速度, 节省电脑资源

2.3 DOM diff的问题:(key)

具体请看: www.zhihu.com/question/61…

看看这两个数组：[1,2,3]和[1,3] 人类会说，这不就是少了个2吗？但是计算机会怎么对比数组？遍历！首先对比1和1,发现[1没变];然后对比2和3,发现[2变成了3];最后对比undefined 和3,发现[3被删除了]。所以计算机的结论是：[2变成了3]以及[3被删除了],有毛病吗？没毛病。 ·既然[1没变],那么就地复用之前的1和三角形就好了。 ·既然[2变成了3],那么正方形左边的2,当然要改成3。里面的正方形就地复用（正方形没有被删除）。因为你只是把2变成3而已，Vue凭什么要修改其他地方？ ·既然[3被删除了],之前的[圆形]当然应该被删掉，里面的子元素也要删除。

虚拟 DOM 和 DOM diff