虚拟DOM与DOM diff
@ EatFog · Wednesday, Dec 2, 2020 · 1 分钟阅读 · 更新于 Dec 2, 2020

今天我们来学习虚拟DOM与DOM diff的知识

虚拟 DOM 是什么?

虚拟 DOM是一个可以代表DOM树的对象,其通常有标签名,标签属性,事件监听和子元素。

虚拟 DOM 的优点

虚拟DOM可以减少DOM的操作,把多次操作合并成一次操作,或者把多于重复的操作省掉。
虚拟DOM的本质是JS对象,因此可以把虚拟DOM的元素转化成小程序,iOS应用,安卓应用的元素,有跨平台的功能。

虚拟 DOM 的缺点

需要额外的创建函数或者用JSX或者Vue-Loader转译,而且严重依赖打包工具

DOM diff 是什么

DOM diff是一个函数,输入一个和旧节点一个新节点,就会返回一个DOM操作的对象。
DOM diff会对新旧两个DOM树的root节点使用Tree diff来进行逐层对比,Tree diff会选择地对子节点使用Component diff或者Element diff,来寻找哪个节点要更新。
如果子节点是是组件(可能是Vue特有的?)则使用Component diff,如果组件的类型不同就直接替换,相同则指更改属性。
如果子节点是原生标签则使用element diff,标签名不同就替换,相同就更新属性。
对子节点使用完Element diff和Component diff以后,就对该节点继续进行Tree diff

DOM diff 的优点

通过DOM diff的算法可以有效的减少DOM的操作,当然,如果是超大批量的节点变更(几十万),可以使用原生DOM。

DOM diff 的问题(key)

同级节点的对比存在BUG,比如[1,2,3]这些节点,去除2以后成为[1,3],DOM diff会认为是把2改成3,再去掉3而不是直接去掉2

自我介绍

Hi!我是蒋俊杰

你也可以叫我EatFog

这是我的第一个blog

社交链接