# 什么是 virtual DOM,它的引入带了什么好处
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 70 (opens new window)
Author
虚拟 DOM 最大的优势在于抽象了原本的渲染过程,实现了跨平台的能力,而不仅仅局限于浏览器的 DOM,可以是安卓和 IOS 的原生组件,可以是近期很火热的小程序,也可以是各种 GUI。
vdom 把渲染过程抽象化了,从而使得组件的抽象能力也得到提升,并且可以适配 DOM 以外的渲染目标。
Virtual DOM 在牺牲(牺牲很关键)部分性能的前提下,增加了可维护性,这也是很多框架的通性。 实现了对 DOM 的集中化操作,在数据改变时先对虚拟 DOM 进行修改,再反映到真实的 DOM 中,用最小的代价来更新 DOM,提高效率(提升效率要想想是跟哪个阶段比提升了效率,别只记住了这一条)。
打开了函数式 UI 编程的大门。
可以渲染到 DOM 以外的端,使得框架跨平台,比如 ReactNative,React VR 等。
可以更好的实现 SSR,同构渲染等。这条其实是跟上面一条差不多的。
组件的高度抽象化。
虚拟 DOM 的缺点
- 首次渲染大量 DOM 时,由于多了一层虚拟 DOM 的计算,会比 innerHTML 插入慢。
- 虚拟 DOM 需要在内存中的维护一份 DOM 的副本(更上面一条其实也差不多,上面一条是从速度上,这条是空间上)。
- 如果虚拟 DOM 大量更改,这是合适的。但是单一的,频繁的更新的话,虚拟 DOM 将会花费更多的时间处理计算的工作。所以,如果你有一个 DOM 节点相对较少页面,用虚拟 DOM,它实际上有可能会更慢。但对于大多数单页面应用,这应该都会更快。
Author
同意楼上
Author
react 初次 render 或协调后所生成的一个对象,react16 前是通过组件递归遍历而来,react16 是以 fiber 为节点构建成的单链表结构树,其作为真实 dom 的映射。 优点:大大地提高了开发效率,解放生产力,通过计算这两棵树之间的差别来判断如何有效率的更新。 缺点:初次需要构建遍历深层次的组件树,耗费性能,所以有普遍首屏渲染慢的问题。