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,是性能与可维护性两者之间妥协后,相对目前的技术水平下可接受的一种方案。