为什么使用虚拟DOM：渲染与性能-原创手记-慕课网

在这篇文章中，我们将详细讲解DOM（文档对象模型）以及什么是虚拟DOM。

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

当一个网页被加载到浏览器中后，浏览器生成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>文档对象模型</title>
    </head>
    <body>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" alt="卡片图片描述">
            <div class="card-body">
              <h5 class="card-title">文档对象模型示例</h5>
              <p class="card-text">这是一个示例文档对象模型内容。</p>
              <a href="#" class="btn btn-primary">文档对象模型按钮</a>
            </div>
          </div>

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

切换到全屏，退出全屏

控制台输出(document)

点击进入全屏，点击退出全屏

结果:

（图片描述：这里是一张示例图片）

通过 console.log(document)，我们可以访问 DOM。这里，document 对象就是我们所说的文档对象。当我们查看这个 Document 对象 的时候，我们发现它代表的是一个 HTML 文档，换句话说，它包含了所有 HTML 文档中的标签。

使用 Javascript ，我们可以访问文档对象中的标签，并操作文档对象中的标签，来创建动态网页。我们来看一个访问的例子：

    const wrapper = document.getElementById("card");  // 获取id为"card"的元素

    console.log(wrapper);  // 输出wrapper元素

全屏模式, 退出全屏

输出：

什么是虚拟DOM（文档对象模型）?

如图所示图片描述

我们现在知道，更改DOM（也就是修改HTML）最简单的方法是修改元素的 innerHTML 属性。这种方法在更新用户看到的DOM（也就是重新绘制页面）方面表现不佳。这是因为 innerHTML 需要从字符串中解析DOM节点，进行预处理并追加这些节点。如果网页上有太多的HTML修改，性能问题就可能发生。

性能问题是怎么解决的？

这个问题通过创建一个虚拟DOM来解决。虚拟DOM是真实DOM的一个内存副本。当网页状态变化时，会在内存中创建一个新虚拟DOM。将新虚拟DOM与旧虚拟DOM进行对比，识别变化，并将这些变化应用到真实DOM中，展示给用户。

这是你使用的现代库的工作原理，并使用了diff算法进行比较。虽然虚拟DOM的方法很快，但在性能方面仍有一些需要考虑的细节。虚拟DOM中的任何更改都会导致整个网页重新渲染，库中提供了钩子以进行性能优化。

结论

在这篇文章里，我们讨论了 DOM 和 虚拟 DOM 是什么。我们了解了使用虚拟 DOM 的原因。