虚拟DOM和diff算法

115 阅读1分钟

image.png

image.png

image.png

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

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

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

【传统DOM操作(eg:innerHtml)】:render html+重建所有DOM元素

【虚拟DOM】:render 虚拟DOM + diff算法+更新必要的DOM元素

虚拟DOM :

JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。

image.png

diff算法

diff算法是在两个虚拟DOM之间计算的,新虚拟DOM和老虚拟DOM进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的DOM上。

image.png