DOM

DOM意思是文档对象模型（Dcoument Object Model），它是一个结构化文本的抽象

操作DOM

所以，只要我们想要动态修改网页的内容的时候，我们就修改DOM。

var item = document.getElementById("myLI");
item.parentNode.removeChild(item);

而getElementById，parentNode和emoveChild则是HTML DOM API中的方法。

Shadow DOM

Shadow DOM是浏览器提供的一个可以允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。

虚拟dom Virtual DOM

Virtual DOM 只是js模拟的DOM结构。虚拟DOM是HTML DOM的抽象。

虚拟DOM是由js实现的避免DOM树频繁更新，通过js的对象模拟DOM中的节点，然后通过特定的render方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：

1、虚拟DOM不会进行排版与重绘操作

2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

3、真实DOM频繁排版与重绘的效率是相当低的

4、虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）

使用虚拟DOM的损耗计算：

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘

直接使用真实DOM的损耗计算：

总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘

总结

一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作。虚拟DOM是由js实现的避免DOM树频繁更新，通过js的对象模拟DOM中的节点，然后通过特定的render方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新

虚拟DOM（Virtual DOM）和真实DOM（Real DOM）是前端开发中常用的两种概念，它们在工作方式和性能方面具有一些区别。

工作方式：
- 真实DOM：真实DOM 是浏览器中实际存在的文档对象模型，它由 HTML 元素组成，具有层次结构。操作真实DOM 需要直接访问浏览器 API，并且对真实DOM 进行操作会引起页面的重新渲染和重绘。
- 虚拟DOM：虚拟DOM 是一种用 JavaScript 对象模拟真实DOM 的抽象层。在修改页面时，会首先在内存中创建虚拟DOM 树，然后通过比较虚拟DOM 的差异来计算最小的修改量，并将修改后的虚拟DOM 映射到真实DOM。
性能：
- 真实DOM：由于真实DOM 需要直接操作浏览器 API，对大型的DOM 树进行频繁的操作和修改会导致性能下降，因为每次操作都会导致页面的重新渲染和重绘。
- 虚拟DOM：虚拟DOM 的操作发生在内存中，通过比较虚拟DOM 的差异并批量更新到真实DOM，可以减少对真实DOM 的频繁操作，从而提高性能。虚拟DOM 还可以进行优化，例如使用Diff算法来减少不必要的操作量。
可维护性和可重用性：
- 真实DOM：直接操作真实DOM 可能导致代码量增加，且难以维护和重用。因为在对真实DOM 进行操作时，需要考虑手动管理状态、事件绑定和样式更新等问题。
- 虚拟DOM：使用虚拟DOM 可以将视图的状态抽象成 JavaScript 对象，可以更方便地管理、更新和重用。通过虚拟DOM 框架（例如React、Vue等），可以使代码更具可维护性和可重用性。

总结：虚拟DOM 在一定程度上提高了页面的性能，同时也提高了代码的可维护性和可重用性。然而，虚拟DOM 的实现和使用也需要消耗一定的资源，适用于大型应用或需要频繁更新的场景。在小型应用或对性能要求不高的场景中，直接操作真实DOM 可能更简单和高效。

虚拟DOM和真实DOM的区别

DOM