DOM
- DOM: Document Object Model, 即文档对象模型，通过在内存中表示文档的结构--例如代表网页的HTML--将网页与脚本或编程语言连接起来。通常，这意味着JavaScript，尽管将HTML、SVG或XML文档建模为对象并不是JavaScript核心语言的一部分。
- DOM用一棵逻辑树来表示一个文档。树的每个分支都以节点结束，每个节点都包含对象。DOM方法允许对树进行编程访问。通过它们，你可以改变文档的结构、样式或内容。
- 节点也可以有事件处理程序连接到它们。一旦一个事件被触发，事件处理程序就会被执行。
虚拟 DOM
一个能代表 DOM 树的对象，通常含有标签名、标签上的属性、事件监听和子元素，以及其他属性
1. 虚拟 DOM 的优点
- 在某些情况下，虚拟 DOM 比真实 DOM 快，因为虚拟 DOM 能减少不必要的 DOM 操作
- 虚拟 DOM 可以减少 DOM 操作：将多次操作合并一次操作，比如在页面里添加1000个div，DOM可能要操作1000次，但是虚拟DOM只需要操作一次（把数据添加到一个数组里然后操作）；
- 还可以减少DOM操作的范围：虚拟DOM借助DOM diff可以把多余的操作省掉，比如添加1000个div，通过对比区分出哪些是新增的、哪些是重复的，如果只有10个是新增的就只渲染这10个。
- 虚拟DOM可以跨平台渲染
- 虚拟DOM不仅可以变成DOM，还可以变成小程序、IOS或者安卓应用，虚拟DOM本质上 只是一个JS对象
2. 虚拟 DOM 的缺点
- 需要额外的创建函数来创建虚拟DOM，但是可以通过JSX语法来简化成XML写法，但是这也有缺点，就是严重依赖打包工具，要添加额外的构建过程
- 当数据规模不大（比如有几千个节点的时候），虚拟DOM的确更快，但是如果规模达到一定程度（十万+）的话，虚拟DOM的稳定性不如原生DOM。不过一般也达不到这个规模，所以多数情况下不必考虑。
DOM diff
- DOM diff是一个函数，称之为 patch
patches = patch(oldVNode, newVNode)- patches 就是要运行的DOM操作
1. DOM diff 的优点
DOM diff算法可以排除多余的DOM操作。
DOM diff会对比前后两次DOM树的区别，然后只更新有变化的DOM节点，优化操作。
2. DOM diff 的问题（key）
同级比较会出现bug。
diff算法是从左往右进行同层级对比的，如果发现元素相同但是内容不相同，会直接修改内容。这会导致有时删除了一个节点，结果却是另外一个节点被删除了。
这个问题可以通过给每一个列表指定key值来解决，注意这里的key值不能指定为index，否则无效。
Reference List:
方应杭 -《虚拟 DOM 与 DOM diff》
ygman -《非常简单易懂的DOM diff算法简析》
MDN文档: Document Object Model (DOM)
