浏览器解析完 HTML，就要开始解析 HTML 里的 JavaScript 代码。程序员可以通过 JavaScript 代码实现一些动态的网页效果。例如，从服务器拉取一段数据来展示，或做一个酷炫的动画效果，都要用到 DOM。
举个简单的例子（代码如下所示），想要在网页里显示一行字“this is from javascript”，首先要找到那个可以显示文字的标签。这是非常容易的，因为浏览器已经把 DOM 都交给 JavaScript 了。
DOM 里的对象(标签)，正好就是 JavaScript 语言里的对象。JavaScript 可以通过下面的方法修改 DOM 树上的标签对象。
<body>
<p id="display">hello world</p>
<script type="text/javascript">
document.getElementById("display").innerText="this is from javascript";
</script>
</body>
随着对前端知识学习的深入，我们会发现 JavaScript 操纵 DOM 是非常普遍的事情。例如，很多网页一开始加载出来的只是个架子，只显示出一个 loading 图标的转圈动画，只有等 JavaScript 从服务器上请求到真正的数据后操纵 DOM 来显示数据，才能看到内容，这就是典型的异步加载。
以 HTML 5 的游戏为例，里面的人物要随着手指或鼠标运动，普遍的做法是通过 JavaScript 操纵 DOM 改变元素的位置来实现。可以说，DOM 使得 JavaScript 在前端世界里几乎无所不能。
但是，有一点要注意，操纵 DOM 本身是一件效率非常低的事情。一个网页往往很复杂，浏览器构造出来的 DOM 树往往很庞大，有的甚至有几千个节点。
在这么庞大的一棵树上频繁地改动，对浏览器（尤其是移动浏览器）来说是不小的工作量，稍不注意就会出现卡顿。
于是，有人发明了一种便捷的方法，叫作虚拟 DOM。
简单来说，就是用 JavaScript 模拟了一棵简单的 DOM 树，然后在这上面演练所有的 DOM 操作，等时机成熟时再把虚拟 DOM树和真正的浏览器的 DOM 树做对比，算出差异，一次性地改变真正的 DOM 树。
这两个步骤从整体上大大提高了 JavaScript 操纵 DOM 树的效率。
上一篇：HTML中的DOM是什么
相关新闻
- 小程序登录流程图理解 2020-08-18
- 在C#中获取web.config中的配置信息 2021-08-23
- 小程序open-data头像样式 2021-04-10
- 小程序rich-text 富文本解析图片过大和图片路径的问题 2020-11-25
- C#中去掉字符串的最后一个字符 2020-11-23
