DEV Community
·
真实 DOM 与 虚拟 DOM
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
Real DOM是网页的实际结构，以对象树的形式表示。当您更新Real DOM中的元素时，浏览器必须重新渲染页面的那部分。Virtual DOM是Real DOM的轻量级副本，通过React等库将其与Real DOM同步。Virtual DOM通过计算当前状态和先前状态之间的差异，只更新实际改变的部分。Virtual DOM通过减少对Real DOM的不必要更新来提高性能，使应用程序运行更流畅快速。
🎯
关键要点
- Real DOM是网页的实际结构，以对象树的形式表示。
- 更新Real DOM中的元素时，浏览器必须重新渲染页面的那部分，可能会很慢。
- Real DOM的优点是可以直接操作用户界面，没有额外的抽象层。
- Real DOM的缺点是更新速度慢，内存使用高。
- Virtual DOM是Real DOM的轻量级副本，保存在内存中并与Real DOM同步。
- 更新Virtual DOM时，通过计算当前状态和先前状态之间的差异，只更新实际改变的部分。
- Virtual DOM的优点是更新速度快，内存和处理能力使用高效。
- Virtual DOM的缺点是增加了抽象层，可能更难调试，初始设置比直接操作Real DOM更复杂。
- Real DOM的比喻是重新布置房间，Virtual DOM的比喻是先用应用程序可视化房间布局。
- Virtual DOM通过减少对Real DOM的不必要更新来提高性能，使应用程序运行更流畅快速。
➡️
