虚拟DOM diff算法

webkit引擎的处理流程 传统DOM操作 虚拟DOM

虚拟DOM是在DOM的基础上在内存建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中

render执行的结果得到的并不是真正的DOM节点，而仅仅是javascript对象，称之为虚拟DOM

虚拟DOM具有批处理和高效的Diff算法，可以无需担心性能问题而随时‘刷新’整个页面，因为虚拟DOM能保证对界面上真正变化的部分进行实际的DOM操作

【传统DOM操作(eg:innerHtml)】：render html+重建所有DOM元素
【虚拟DOM】：render 虚拟DOM + diff算法+更新必要的DOM元素

diff算法

优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页性能

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点

虚拟DOM的理解误区
对虚拟DOM的理解往往停留在：通过JavaScript对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。然而，虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象），这在浏览器中使用 React时不是特别明显，因为写的DOM标签跟原生的没有区别，并且最终都被渲染成了DOM，在React Native中将会有很好的说明。

赞赞哇.png