虚拟DOM相关整理

虚拟DOM相关整理

• • 1.什么是虚拟DOM操作，优缺点什么
  • • 1.1虚拟DOM优点：
    • 1.2虚拟DOM缺点：
  • 2.什么是DOM diff

本章内容，是看过B站视频 面试大厂必问：虚拟DOM与DOM Diff 的原理之后自己整理的，只用于自己知识的补充。
通常说的，DOM操作慢，是对比于JS原生API，如数组操作。

1.什么是虚拟DOM操作，优缺点什么

虚拟DOM是一个能代表DOM树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性。

1.1虚拟DOM优点：

虚拟DOM优点：减少DOM操作，跨平台

1.1.1 减少DOM操作

1）虚拟DOM可以将多次操作合并为一次操作，比如：你添加1000个节点，js原生是一个一个添加的，而虚拟DOM是一次性添加到页面上，本质减少DOM操作的次数；
2)虚拟DOM借助DOM diff可以把多余的操作省掉，比如你添加1000个节点，其中只有10个是新增的，通过diff算法发现其中990个是之前页面就有的，只有10个是新增的，那么就只会新增10个，本质减少了dom操作的范围。

1.1.2 跨平台

虚拟DOM 不仅可以应用于浏览器，小程序，安卓应用，IOS应用都可以使用，虚拟DOM本质上是一个JS对象。

1.2虚拟DOM缺点：

需要额外的创建函数，react(creatElement) vue(h),但可以通过JSX/vue-loader 进行转义成XML写法。(缺点:过分依赖打包工具)

2.什么是DOM diff

就是一个函数，称之为patch

const patches = patch(oldVnode,newVnode) 

patches 就是要运行的DOM操作，插入，修改内容，更新属性等。

DOM diff主要逻辑：
Tree diff
将新旧两棵树进行逐层对比，找出哪些节点需要更新；
如果节点是组件就看 Component diff;
如果节点是标签就看Element diff;
Component diff
如果节点是组件，就先看组件类型；
如果类型不同直接替换,类型相同则只更新属性；
然后深入组件做Tree diff ;
Element diff
如果节点是原生标签，则看标签名；
标签名不同则直接替换，相同则只更新属性；
然后进入标签做Tree diff.