DOM: 浏览器中提供的概念，用JS对象表示页面上的元素，并提供了操作元素的API;
虚拟DOM: 是框架中的概念;是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;
DOM树的概念：
一个网页呈现的过程：
1.浏览器请求服务器获取页面HTML代码
2.浏览器要先在内存中,解析DOM结构,并在浏览器内存中,渲染出一棵DOM树;
3.浏览器把DOM树,呈现到页面上;
虚拟DOM:
需求:单击列头，实现对应表格数据的排序
1.表格中的数据从哪儿来：从数据库查询回来的
2.这些查询到的数据，存放到哪儿了：
这些数据在浏览器的内存中存放着，而且是以对象数组的形式来表示的；
3.这些数据，是怎么渲染到页面上的？
方案1:手动for循环整个数组，然后手动拼接字符串 str+=’’
方案2:使用模板引擎,art-template
4.思考：上述的方案，有没有性能上的问题？
5.如果用户点击了[时间],想按照时间从大到小排序：
(1)触发 点击事件，在事件中，把内存中的对象数组重新排序
(2)当排序完之后，页面时旧的;但内存中的对象数组是新的
(3)想办法，把最新的数组，重新渲染到页面上(有无性能问题)
6.分析与总结：上述方法，只是实现了把数据渲染到页面上的能力；但是并没有吧性能做到最优。
7.性能最优:按需渲染页面(只重新渲染更新的数据所对应的页面元素)
8.按需更新的实现：获取内存中的新旧两棵DOM树,进行对比，得到需要被按需更新的DOM元素;
9.获取新旧DOM树并对比:
分析:浏览器中，并没有直接提供获取DOM树的API;因此，我们无法拿到浏览器内存中的DOM树;
10.程序员可以手动模拟一个 新旧两棵DOM树
11.程序员手动模拟DOM树
目标DOM树:
通过对象手动模拟DOM树:
var div = { tagName:'div', attrs:{ id:'mydiv', title:'标题', 'data-index':'0', }, childrens:[ '泥猴哇', { tagName:'p', attrs:{}, chilrens:[ "哈哈哈" ] } ] }12.程序员手动模拟的这两棵新旧DOM树，就是React中虚拟DOM的概念;
总结：
虚拟DOM，就是用JS对象的形式，来模拟页面上DOM嵌套关系;(虚拟DOM是以JS对象的形式存在的)
本质：用JS对象，来模拟DOM元素和嵌套关系;
目的：实现页面元素的高效更新;