虚拟DOM
2022-04-29 08:03:26
## 虚拟DOM
virtual DOM ，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
一、虚拟DOM要解决的问题 ：
1.在react，vue等技术出现之前：
要改变页面展示的内容，只能通过遍历查询 dom 树的方式找到需要修改的 dom ，
然后修改样式行为或者结构，来达到更新 ui 的目的
相当消耗计算资源（每次查询 dom 几乎都需要遍历整颗 dom 树）
2.使用虚拟DOM（ js 对象）：每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化，要比查询 dom 树的性能开销小。
**拟DOM就是为了 解决浏览器性能问题 而被设计出来的。**
二、前端 - 从接收html 到 体现在页面上的流程：
1.创建DOM树（分析HTML元素，构建一颗DOM树）
2.创建StyleRules（分析CSS文件和元素上的inline样式，生成页面的样式表）
3.创建Render树（将DOM树和样式表，关联起来）
4.布局Layout（浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标）
5.绘制Painting（调用每个节点paint方法，把它们绘制出来）
三、什么是DOM：
Document Object Model(文档对象模型)，是为HTML和XML提供的API；
按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。
Javascript可以通过DOM直接访问和操作网页文档的内容，连接js和html结构的接口就是DOM。
四、为什么操作 dom 性能开销大 ：
并不是查询 dom 树性能开销大，
原因：
1. dom树的实现模块 和 js 模块 是分开的，这些跨模块的通讯增加了成本。
2. dom 操作引起的浏览器的回流和重绘，使得性能开销巨大。
备注：在 pc 端是没有性能问题的（因为 pc 的计算能力强），但随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能参差不齐，会有性能问题。
五、对比一下，为什么要用虚拟 dom ：
举个例子：
在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。
而虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。
六、虚拟dom的意义 ：
1.vdom 的真正意义是为了实现跨平台，服务端渲染（从而诞生了react native等）；
2.提供一个性能还算不错 Dom 更新策略；
vdom 让整个 mvvm 框架灵活了起来。
什么是MVVM: https://blog.csdn.net/chengqiuming/article/details/106794252
七、虚拟DOM的实现流程：
我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。
原文链接：https://blog.csdn.net/weixin_44439675/article/details/116461376