dom 与虚拟 dom

📌 相关文章

📜 dom 与虚拟 dom - Javascript (1)

📅 最后修改于: 2023-12-03 14:40:51.454000 🧑 作者: Mango

DOM（Document Object Model）是 Web 页面的基础，是页面的一种结构化表示方法。虚拟 DOM（Virtual DOM）是一种以 JavaScript 对象为基础的, 纯粹的 UI 表现，其本质是 JavaScript 对象树，通过比较新旧两个对象树的差异，减少了真实 DOM 的操作。

DOM

DOM 是页面节点的树形结构，它由节点（Node）和元素（Element）组成，节点包含了元素节点、属性节点、文本节点等。我们可以使用 JavaScript 来操作这些节点，例如添加、删除、修改和移动等。

以下是一个简单的 HTML 页面节点结构示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DOM Example</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my website!</p>
  </body>
</html>

我们可以使用下面的 JavaScript 代码访问 DOM 元素：

// 获取 h1 元素节点
const h1 = document.querySelector('h1');
// 获取 p 元素节点
const p = document.querySelector('p');

虚拟 DOM

虚拟 DOM 是一个 JavaScript 对象树，它是一个轻量级的 DOM，因为它的操作完全发生在内存中。虚拟 DOM 最初被React所开发，并且在其他前端框架中也得到广泛使用，例如Vue等。

React 可以通过对比新旧虚拟 DOM 对象树的差异，并将其转换为一系列操作来更新真实 DOM，这减少了对页面的操作次数，提高了性能。

以下是一个简单的虚拟 DOM 对象树的示例：

{
  tag: 'div',
  children: [
    {
      tag: 'h1',
      children: ['Hello World!']
    },
    {
      tag: 'p',
      children: ['Welcome to my website!']
    }
  ]
}

在实际开发中，我们可以使用虚拟 DOM 来优化页面渲染性能。

结论

DOM 是页面的结构化表示方法，它通过 JavaScript 操作元素节点、属性节点等；虚拟 DOM 是一种以 JavaScript 对象为基础的 UI 表现，并通过比较新旧对象树来减少真实 DOM 操作。

我们可以使用虚拟 DOM 来优化页面渲染性能，减少对真实 DOM 的操作次数，提高性能。