Readl DOM (真实DOM) 和 Virtual DOM (虚拟DOM)之间的区别，以及优缺点

一、Readl DOM (真实DOM) 和 Virtual DOM (虚拟DOM)之间的区别？

两者之间的区别：
1、真实DOM：

• 真实DOM是浏览器中的实际DOM结构，是由浏览器根据HTML解析而来的，包含了虽有的HTML元素和属性。
• 当页面中数据发生变化时，真实DON需要重新计算页面的布局和重渲染页面，这个过程时相对耗时的。
• 真实DOM会频繁的重排与重绘。它的总消耗是“真是DOM完全增删改+排版与重绘”。

2、虚拟DOM

• 虚拟DOM是一个存在于内存中的虚拟DOM树，是通过JavaScript对象来模拟页面的DOM结构。
• 当页面中数据发生变化时，虚拟DON会通过diff算法比较新旧两棵虚拟DON树的差异，然后只更新需要变化的部分到真实DON中，而不是重新渲染整个页面。这个过程相比于直接操作真实DON，效率更高。
• 虚拟DOM不会进行排版与重绘操作，它的总消耗是“虚拟DON增删改+真是DOM差异增删改+排版与重绘”，

二、优点缺点

1.优点

真实DOM：

• 易用
• 更直观：真实DOM是浏览器原生提供的，可以直接操作DOM元素，更容易理解和调试。
• 更稳定：真实DOM可以实时更新页面，保证页面与数据的同步性。

虚拟DOM：

• 性能较好：虚拟DOM通过虚拟的DOM树来表示页面结构，可以在内存中进行计算和比较，减少了对真实DOM的操作次数，提高了性能。
• 简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难。
• 批量更新：虚拟DOM可以批量更新多个变化，然后一次性更新到真实DOM中，减少了重绘的次数，提高了性能。
• 更好的跨平台支持：虚拟DOM可以在不同平台上运行，适用于web、移动端和PC端的开发。

2.缺点

真实DOM：

• 性能较差：当数据发生变化时，真实DOM需要重新计算整个DOM树的结构，并重新渲染，消耗大量的时间和资源。
• 重绘频繁：由于真实DOM的更新是同步的，频繁的数据变化会导致频繁的重绘，印象用户体验。
• 难以维护：当页面结构复杂时，操作真实DOM的代码会变得冗长和难以维护。
  效率低，解析速度慢，内存占用量过高。

虚拟DOM：

• 在一些性能要求极高的应用中虚拟DOM无法进行针对性的机制优化。
• 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常的稍慢。
• 学习成本较高：使用虚拟DOM需要学习和理解其工作原理和使用方式。
• 需要额外的库支持：使用虚拟DOM需要引入额外的库，增加了项目的体积和复杂度。
• 可能引入新的问题：由于虚拟DOM的更新是异步的，可能会引发一些新的问题，如数据不一致、事件处理等。