虚拟DOM的个人理解

虚拟DOM (虚拟DOM就是真实的JS对象，操作内存中的JS对象比操作真实的DOM速度要快)
真实DOM的浏览器渲染引擎工作流程大致分为5步：创建DOM树--创建stylerules--创建render树--布局--绘制
js操作真实DOM的代价：
举一个例子：在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

虚拟DOM就是为了解决浏览器性能问题而被设计出来的
如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
实现虚拟DOM：将一个真实的DOM对象用js来模拟DOM节点来实现虚拟DOM
1.将真实DOM用JS对象来表示
2.将得到的JS对象映射成真实的DOM
3.用Diff算法将所有的更新反应到虚拟DOM上
4.深度遍历DOM将Diff的内容更新进去