Ant Design Pro V5精讲（基础篇一）：Virtual DOM技术的出现

1.DOM是什么？

DOM,是Document Object Model，翻译过来叫文档对象模型，简称DOM，W3C组织定义的一个抽象化的结构性文本，在开发者眼里它就是HTML Code，通俗叫为HTML DOM(其实也还有XML的内容），HTML中的元素叫elements，对应DOM中的节点叫Nodes。

更通俗的理解就是：DOM是HTML在内存中的表现形式，他们均是树型结构，通常使用JavaScript来操作DOM对象。

2.Virtual DOM是什么？

Virtaul DOM，翻译过来它相对于原生真实的DOM来说叫“虚拟DOM”，简称VDOM,它是一种编程上的概念，它是由FaceBook团队提出来的，最早运用在React上。设计思想就是把真实的DOM以理想化（或叫虚拟化）的形式保存在内存中，等同于DOM对象的一个轻量级的副本，从而让程序不每次直接更改浏览器屏幕上的UI内容（即真实的DOM)，因为这样效率太低（即速度慢），而是让它先操作更新Virtual DOM。FaceBook团队给React内置了一套Diff算法：每个Virtual DOM均有两个DOM Tree，一个新的，一个原来的。当Virtual DOM更新后，React算法就会将这次更新后的VDOM与更新前的VDOM进行比较，从而获取到差异化内容对象，最终React才直接在真实的DOM上更新这些差异化内容对象，并且只更新差异化的对象。大大提升了原生真实DOM任何操作整体内容更新慢的缺陷。

简单理解：Virtual DOM本质上就是一个在缓存中的树型结构JS对象，这个JS对象包含了整个原生DOM结构的信息,最终由JS操作Virtual DOM,最后React配合一套Diff算法（减少回流和重绘），把变更的内容写入到原生DOM。

3.原生DOM操作与Virtual DOM之间的比较

Virtual DOM的模式是在性能与可维护性上面的取舍最终结果，当你的一次更新需要重建所有DOM元素对象时，这时候Virtual DOM优势体现不出来，有了Virtual DOM可能更慢，因为毕竟加了它一层的运算。但当你的DOM更新，只是必要的一小部分时，这时候Virtual DOM的优势就体现出来了，有了React的框架技术，这种差异化的内容自动更新，实现了真正意义上对原生DOM操作上的优化。

一句话： Virtual DOM，是性能与可维护性两者之间妥协后，相对目前的技术水平下可接受的一种方案。