- 减少了JavaScript操作真实DOM的带来的性能消耗,保证了性能下限。
我们对比修改DOM时对真实DOM操作和对虚拟DOM的过程,来看一下它们重绘重排的性能消耗:
真实DOM:生成HTML字符串 + 重建所有的DOM元素。
虚拟DOM:生成vNode + DOMDiff + 必要的DOM更新。
虚拟DOM的更新DOM的准备工作耗费更多的时间,也就是JS层面,相比于更多的DOM操作它的消费是极其便宜的。尤雨溪在社区论坛中说道:框架给你的保证是,你不需要手动优化的情况下,依然可以给你提供过得去的性能。
eg:
真实的DOM节点,哪怕一个最简单的<div>也包含着很多属性,其元素非常庞大,导致手动DOM操作缓慢,可能出现页面卡顿,影响用户体验。当你用传统的原生API或者jQuery去手动操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。如果你在一次操作中需要更新10个DOM节点,浏览器在收到第一个更新DOM请求后,并不知道后续还有9次更新操作,它会马上执行这次流程,最终执行10次。而通过VNode,同样更新10个DOM节点,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,避免大量的无谓计算。
- 实现了跨平台。
虚拟DOM本质上是JavaScript对象,它可以很方便的跨平台操作,从而使它而不再局限于浏览器的DOM,也可以是Android和IOS的原生组件,也可以是近期很火热的小程序,也可以是各种GUI。