任务四:Virtual DOM实现原理

202 阅读2分钟

1、什么是虚拟DOM

虚拟DOM是一个普通的JS对象,用来描述真实的DOM,创建虚拟DOM比创建真是DOM开销小很多。
vue内部的虚拟DOM是改造了一个开源库,叫做Snabbdom

2、为什么要使用虚拟DOM

为了解决状态变化就有了虚拟DOM,虚拟DOM好处就是当DOM状态改变,不需要立即更新DOM,只需要创建一个虚拟DOM树,用于描述真实的DOM树,如何有效的更新真实DOM,内部使用diff算法找到状态的差异,只更新发生改变的部分。

image.png

3、Virtual DOM的作用和库

虚拟DOM不是所有情况下都会提升性能,就跟vue的vueX一样,适合使用在复杂的情况下。
虚拟DOM最大的好处是跨平台,实现SSR(服务端渲染),服务端渲染框架Vue(Nuxt)、React(Next)
服务端渲染就是把虚拟DOM转换成普通的HTML字符串,还可以把虚拟DOM转换成原生应用    

image.png

image.png

4、removeVnodes和addVnodes

removeVnodes是用来从DOM树上批量删除Vnodes对应的Dom元素
addVnodes是用来批量添加DOM元素到DOM树

5、patchVnode

对比新旧两个Vnode节点,找到他们之间的差异,然后更新到真实DOM上

6、updateChildren整体分析

当新旧节点都有子节点,且子节点不相同的时候,会调用uodateChildren对比子节点的差异,
并更新真实DOM,这个方法也是diff算法的核心。

7、diff算法

dom操作会引起浏览器的重排和重绘,也就是浏览器重新渲染页面,重新绘制整个页面是非常耗费
性能的,diff的核心是,当数据变化后,不直接操作DOM,而是用JS对象来描述DOM,当数据变化
后,会先比较JS对象是否发生变换,找到所有变化后的位置,最后只去最小化的更新变化的位置,
从而提高性能。

diff是一种算法,类似于一种排序算法

image.png

8、设置Key的意义

用来比较Vnode是不是相同节点,如果不设置key会最大程度重用当前dom元素,但有可能会渲染
错误。给每个节点设置唯一key的意义是,给所有具有相同父元素的子元素设置具有唯一值的key,
否则的会有可能会造成渲染错误。