HTML 虚拟DOM和真实DOM的区别

DOM是什么?

DOM指的是文档对象模型，它是HTML文档中所有节点的结构表示。DOM表示您应用程序的UI。需要通过DOM操作来动态更改网页的内容。DOM是一个接口，允许脚本更新文档的内容、样式和结构。

真实DOM

DOM表示网页，常被称为一个逻辑树，树的每个分支以一个节点结束，每个节点包含程序员可以修改的对象。使用脚本语言（如JavaScript）可以修改文档的内容，由于其类似树形结构的特性，DOM的更改和更新非常快，但是在更改后，必须重新渲染更新的元素及其子元素，以更新应用程序的UI，所以UI组件需要在每次DOM更新时重新渲染，因此真实的DOM将渲染整个列表，而不仅仅是那些接收到更新的项目。

举例：

虚拟 DOM

• VDOM 是真实 DOM 的虚拟表示
• React 首先在虚拟 DOM 中更新状态变更，然后将其与真实 DOM 同步
• 虚拟 DOM 就像机器的蓝图，可以在蓝图上进行更改，但这些更改并不直接应用于机器。
• 虚拟 DOM 是一个编程概念，其中 UI 的虚拟表示在内存中保持与“真实 DOM”同步，由诸如 ReactDOM 的库实现，并称此过程为协调
• 虚拟 DOM 使性能更快，原因不是因为处理本身所花费的时间更少。原因是改变信息的数量 – 而不是浪费时间更新整个页面，可以将其划分为小元素和交互

示例：

DOM的方法：

• write（”string”）： 在文档区域中写入字符串
• writeln（”string”）： 在文档区域中写入换行字符串
• getElementById（”id”）： 返回具有传递的ID的元素
• getElementByName（”name”）： 返回具有传递的名称的元素
• getElementByTagName（”tagname”）： 返回具有传递的标签名称的元素
• getElementByClassName（”classname”）： 返回具有传递的类名的元素

现在让我们了解真实DOM和虚拟DOM之间的区别：