为什么使用虚拟 DOM：渲染和性能

在本文中，我们将详细研究 dom 以及虚拟 dom 是什么。

什么是 DOM（文档对象模型）？

当网页加载到浏览器中时，浏览器会生成HTML来显示所请求的页面。这个 HTML 结构就像一棵树。DOM是由浏览器将网页文档（HTML 或 XML）的内容转换为面向对象的结构而形成的。得益于这种结构，页面内容在浏览器中以树状结构组织，每个HTML标签或内容都表示为一个“节点”。

现在探索文档对象模型：

让我们编写一个示例代码来访问文档对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

console.log(document)

输出：

我们可以使用console.log(document)访问 DOM 。检查Document 对象时，我们明白该对象代表一个 HTML 文档。换句话说，document 对象包含HTML 文档中的所有标签。

使用Javascript，我们可以访问 document 对象内的标签，并操作该document 对象内的标签来创建动态网页。让我们举一个如何访问的例子：

const wrapper = document.getElementById("card")

console.log(wrapper)

输出：

什么是虚拟 DOM？

我们现在知道，更改 DOM（“更改 HTML”）最简单的方法是更改​​元素中的innerHTML属性。这种修改 HTML 的方法在DOM重绘（“更新用户所见内容”）中性能不佳。这是因为innerHTML需要从字符串解析 DOM 节点，进行预处理并附加到元素中。如果网页上的 HTML 变化过多，就会出现性能问题。

那么性能问题是如何解决的呢？

这个问题通过创建虚拟 DOM解决了。虚拟 DOM是存储在内存中的真实 DOM的副本。当用户与网页交互并更新网页状态时，会在内存中创建一个新的虚拟 DOM。新的虚拟 DOM 会与之前的虚拟 DOM进行比较以识别更改，并将这些更改应用到真实 DOM上以显示给用户。

这是你使用的现代库的工作逻辑，并使用dif 算法进行比较。它们都使用虚拟 DOM。虽然虚拟 DOM方法速度很快，但仍有一些性能方面需要考虑的点。虚拟域的更改会渲染整个网页。库具有性能优化的钩子。

结论

在本文中，我们研究了什么是 DOM 和虚拟 DOM。我们了解了使用虚拟 DOM 的原因。现在你应该知道什么是 DOM 和虚拟 DOM 了吧。