写代码啦
《虚拟 DOM 和 DOM diff》
回复数(0) 浏览数(16)
{{topic.upvote_count || 0}} 编辑 回复

虚拟 DOM

是什么

本质是JS对象,和原生的DOM有相同的结构并且能转化为原生DOM

虚拟 DOM 的优点

1)合并多次对DOM操作,应用diff算法(缩小实际需要更改的范围-->提高效率)提升大部分场景下的性能
2)本质为JS对象,易实现跨平台

虚拟 DOM 的缺点

依赖并且需要额外的构建

DOM diff

是什么

虚拟DOM的对比算法
DOM diff 大概逻辑
~~~
Tree diff

将新旧两棵树逐层对比,找出哪些节点需要更新
如果节点是组件就看Component diff
如果节点是便签就看 Element diff
~~~
~~~
Component diff

如果节点是组件,就先看组件类型
类型不同直接替换(删除旧的)
类型相同则只更新属性
然后深入组件做 Tree diff(递归)
~~~
~~~
Element diff

如果节点是原生标签,则看标签名
标签名不同直接替换,相同则只更新属性
然后进入标签后代做Tree diff(递归)
~~~

DOM diff 的优点

DOM diff算法可以排除多余的DOM操作。DOM diff会对比前后两次DOM树的区别,然后只更新有变化的DOM节点,优化操作。
####DOM diff 的问题(key)
同级节点对比存在bug,会出现识别错误的问题-->通过赋值id/key 告知diff算法

{{topic.upvote_count || 0}}

虚拟 DOM

是什么

本质是JS对象,和原生的DOM有相同的结构并且能转化为原生DOM

虚拟 DOM 的优点

1)合并多次对DOM操作,应用diff算法(缩小实际需要更改的范围-->提高效率)提升大部分场景下的性能
2)本质为JS对象,易实现跨平台

虚拟 DOM 的缺点

依赖并且需要额外的构建

DOM diff

是什么

虚拟DOM的对比算法
DOM diff 大概逻辑
~~~
Tree diff

将新旧两棵树逐层对比,找出哪些节点需要更新
如果节点是组件就看Component diff
如果节点是便签就看 Element diff
~~~
~~~
Component diff

如果节点是组件,就先看组件类型
类型不同直接替换(删除旧的)
类型相同则只更新属性
然后深入组件做 Tree diff(递归)
~~~
~~~
Element diff

如果节点是原生标签,则看标签名
标签名不同直接替换,相同则只更新属性
然后进入标签后代做Tree diff(递归)
~~~

DOM diff 的优点

DOM diff算法可以排除多余的DOM操作。DOM diff会对比前后两次DOM树的区别,然后只更新有变化的DOM节点,优化操作。
####DOM diff 的问题(key)
同级节点对比存在bug,会出现识别错误的问题-->通过赋值id/key 告知diff算法

16
回复 编辑