dom跟虚拟DOM
DOM是什么
在MDN里面有一段描述 文档对象模型
文档对象模型（Document Object Model，DOM）是一种用于表示任何基于 HTML 或 XML 的标记语言文档并能与之交互的 API。它是加载在浏览器中的文档模型，可以将文档表示为节点树，或称 DOM 树，其中每个节点代表文档的一部分（例如，元素、文本字符串或注释）。
DOM 是 Web 上最常用的 API 之一，因为它允许在浏览器中运行的代码访问文档中的每个节点并与之交互。可以创建、移动和更改节点，还可以将事件监听器添加到节点，并在特定事件发生时触发。
文档对象模型（DOM）通过将文档的结构（例如表示网页的 HTML）以对象的形式存储在内存中，将网页与脚本或编程语言连接起来。尽管将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 核心语言的一部分，但它通常与 JavaScript 相关。
DOM 使用逻辑树的形式来表示文档。树的每个分支末端都是一个节点，每个节点都包含对象。DOM 方法允许以编程方式来访问树。借助这些方法，你可以改变文档的结构、样式或内容。
总结一下：
- DOM是一种编程规范
- DOM是一种对象化描述，用于描述文档结构以对象的形式存储在内存中。
DOM里面有什么
我们通过谷歌开发控制台输入
const div = document.createElement('div')
console.dir(div)
可以看出div自身属性非常多，offsetHeight、styles等等，也有很多调用的方法，以及它的继承关系非常长，消耗内存非常大。
DOM缺点
DOM（文档对象模型）是HTML和CSS技术的核心，它定义了如何将HTML和CSS代码转换为网页上可交互的对象。尽管DOM极大地简化了与网页内容进行交互的方式，但它也存在一些缺点
- 性能问题：
- 内存占用：DOM的节点树结构可能导致内存占用较大，特别是在大型网页或复杂的交互场景中，上面提到过一个div就有很多自身属性跟函数，那一整条的节点树下来，内存更是倍增消耗。
- 更新效率：当DOM结构发生变化时，浏览器需要重新计算布局和渲染，这可能导致性能问题，尤其是在移动设备上。
- 兼容问题
- 不同的浏览器可能对DOM的实现细节有所不同，导致跨浏览器的一致性问题
- 旧版本的浏览器可能不支持某些DOM API或实现，需要使用特定的兼容性代码
- 复杂性
- DOM的API相对复杂，学习和使用成本较高。
- 频繁的DOM操作（如添加、删除和修改节点）可能会使代码难以维护和理解。
- 用户体验问题
- 由于性能问题，频繁的DOM操作可能会导致页面响应缓慢，影响用户体验。
- 复杂的DOM结构可能会导致布局问题，如FOUC（Flash of Unstyled Content），即样式更新时的闪烁。
虚拟dom
描述DOM对象的对象，拗口吗？既然DOM对象已经是对页面文档的描述了，为何还要一层虚拟DOM对象来再包装描述？
- 从上面文章性能部分可以看到，DOM对象中含有非常多的属性以及方法，其中大多数这些属性跟方法在我们操作DOM对象是没什么用的，正常使用情况下一般只会用到样式、尺寸、交互事件，等一些接口。
- 如果直接操作DOM对象，假如一个页面A效果变成页面B，那么需要怎么做？可能最简单的方式是把页面A内的元素全部删除，然后重新创建页面B的元素吧，这感觉还可以吧，但是是想一下，如果更加复杂的交互以及变化的时间要求越来越短呢？这是不是有压力了？那使用虚拟DOM的好处是，可以基于页面A跟页面B结果对比，计算出页面需要变化的地方，然后只通过操作DOM改需要改的地方即可，这样效率提升了。也免去了中间可能过程中一些临时的过渡效果。
- 因为虚拟DOM的内存降低了，但同时也存在一份多余的内存内存映射，在结果上肯定是会比正常DOM使用的内存更高，这是缺点。也就是利用空间换事件。更换了变换过程的计算逻辑，提高了处理速度。
