需要注意的是虚拟DOM不一定比真实的DOM操作快，JavaScript引擎和DOM引擎使用的是同一个主线程，任何涉及到DOM的操作都需要先把JavaScript的数据结构转换为DOM的数据结构，再将JavaScript引擎挂起执行DOM引擎，执行完成后再切换执行JavaScript引擎，这种上下文的切换是很消耗性能的，所以解决DOM操作的性能问题的关键在于减少不必要的DOM操作。那么虚拟DOM没有带来任何的性能的优化吗？也不是这样！虚拟DOM能够实现最细粒度的更新你的DOM，对于DOM操作更新DOM的常见做法是使用innerHTML，但是innerHTML的JavaScript计算和DOM操作通常和你的界面数据大小挂钩，即innerHTML的时间复杂度O = JavaScript操作时间 + 重新创建所有DOM元素的时间；而虚拟DOM更新UI界面的时间复杂度O = 渲染虚拟DOM + diff + 必要的DOM更新，渲染虚拟DOM和diff操作都是JavaScript计算不会涉及到JavaScript引擎和DOM引擎的上下文切换。所以虚拟DOM不管每次的数据变化是怎样的，每次重绘的对于DOM的操作都是最小的。
虚拟DOM最大的好处在于抽象了渲染的过程，为应用带来了跨平台的能力，不再是仅仅局限于浏览器端。比如React-Native和WeeX可以运行在Android、IOS平台上。
网友评论