虚拟DOM Vitural DOM Tree
![](http://upload-images.jianshu.io/upload_images/2463290-d65ff116e7bbeccf..png?imageMogr2/auto-orient/strip|imageView2/2/w/606/format/webp)
提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快。那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM。
一、什么DOM?
所谓DOM,就是HTML、XML、XHTML的一种抽象描述,它会把这些文档抽象成树类型的数据结构,即DOM tree。树的每一个节点,即一个DOM节点。浏览器提供了众多的DOM API,让它拥有了DOM操作的神奇魔力。
![](http://upload-images.jianshu.io/upload_images/2463290-e3447c8f896cd456..png?imageMogr2/auto-orient/strip|imageView2/2/w/583/format/webp)
dom操作.png
二、Virtual DOM出现的背景
由于SPA类型项目的出现,DOM tree的结构变得越来越复杂,它的改变也变得越来越频繁,大量的DOM操作产生了,对DOM节点的增删改,还有许多的事件监听、事件回调、事件销毁需要处理。由于DOM tree结构的频繁变化,会导致大量的reflow从而影响性能。于是Virtual DOM就出现了。
三、什么是Virtual DOM?
DOM结构是一系列的属性和方法的集合。所谓Virtual DOM,就是用轻量级的JavaScript对象来代替庞杂的DOM结构。下面代码就展示了HTML结构和Virtual DOM之间的关系。
![](http://upload-images.jianshu.io/upload_images/2463290-04718b2168122a8e..png?imageMogr2/auto-orient/strip|imageView2/2/w/347/format/webp)
真实DOM结构
![](http://upload-images.jianshu.io/upload_images/2463290-0e51d35ccd5d41d6..png?imageMogr2/auto-orient/strip|imageView2/2/w/683/format/webp)
虚拟DOM结构