虚拟DOM和真实的DOM区别

概念

• 虚拟DOM是对象，用js对象来模拟DOM结构
• 真实DOM是通过js获取到的html标签元素

在双方都足够复杂的情况下，虚拟DOM的耗时操作是远超真实DOM的（注意前提是初始渲染

当DOM更新时，虚拟dom可以帮助我们去进行计算，从而减少DOM的更新频率和更新数量，所以可以提升性能。

区别

虚拟DOM（Virtual DOM）和真实的DOM（Actual DOM）是Web开发中两个非常重要的概念，它们在React等现代前端框架中扮演着关键角色。以下是它们之间的主要区别：

1. 内存与性能：

   • 虚拟DOM：是一个用JavaScript对象表示的树状结构，它存在于内存中，不是真实渲染到页面上的DOM。由于它在内存中，所以操作起来速度很快，性能开销小。
   • 真实DOM：是浏览器的文档对象模型，代表了页面结构。操作真实DOM通常比操作JavaScript对象慢，因为浏览器需要重新布局（layout）和绘制（paint），这会导致性能问题。

2. 响应性：

   • 虚拟DOM：当状态变化时，虚拟DOM可以快速重新渲染，因为它仅仅是内存中的结构。React等框架使用虚拟DOM来优化性能，通过算法（如Diff算法）计算出需要更新的部分，然后才操作真实DOM。
   • 真实DOM：任何对真实DOM的更改都会直接反映在浏览器中，并且可能触发浏览器的重排（reflow）和重绘（repaint），这些操作是性能瓶颈。

3. 跨平台：

   • 虚拟DOM：不依赖于浏览器的实现，可以在不同的平台和环境中使用，如Web、移动应用（React Native）、虚拟现实（VR）等。
   • 真实DOM：是浏览器特有的概念，与平台紧密相关。

4. 编程复杂性：

   • 虚拟DOM：提供了一种更简单的编程模型，开发者可以像操作普通JavaScript对象一样操作虚拟DOM，而不必担心性能问题。
   • 真实DOM：直接操作真实DOM需要考虑跨浏览器兼容性和性能优化，这增加了编程的复杂性。

5. 更新机制：

   • 虚拟DOM：通过Diff算法来计算出最小的更新操作，然后批量更新到真实DOM，这减少了不必要的DOM操作。
   • 真实DOM：任何直接的更改都会导致浏览器进行相应的更新，包括可能的重排和重绘。

6. 生命周期：

   • 虚拟DOM：在组件的生命周期中，虚拟DOM的节点会在组件卸载时被销毁，但不会直接影响到真实DOM。
   • 真实DOM：真实DOM的生命周期与浏览器的渲染过程紧密相关，它的节点会在页面上实际存在或被移除。

7. API和操作：

   • 虚拟DOM：通常通过框架提供的API进行操作，如React的createElement或useState。
   • 真实DOM：通过浏览器提供的DOM API进行操作，如document.createElement或element.style.

总结来说，虚拟DOM是一个编程概念，它提供了一种高效的方式来描述UI的状态，而真实DOM是浏览器渲染页面的实际结构。虚拟DOM使得开发者可以以声明式的方式编写代码，而不必担心性能问题，因为框架会处理虚拟DOM到真实DOM的映射和更新。