DOM是什么

在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。

所以，浏览器在解析 HTML 文档时，会把每个标签抽象成代码里的对象，按照这种层次分明的结构组织，这就是 DOM。

如下图所示为数据结构里典型的“树”结构。程序员经常说的 DOM 树，其实就是这个意思。浏览器在解析 HTML 时，会在它的内部构建这样一棵 DOM 树，然后按照这棵树上的层次顺序解析每个标签。解析完成后，用户就看到了网页的内容。

 

 

浏览器解析完 HTML，就要开始解析 HTML 里的 JavaScript 代码。程序员可以通过 JavaScript 代码实现一些动态的网页效果。例如，从服务器拉取一段数据来展示，或做一个酷炫的动画效果，都要用到 DOM。

出一个 loading 图标的转圈动画，只有等 JavaScript 从服务器上请求到真正的数据后操纵 DOM 来显示数据，才能看到内容，这就是典型的异步加载。

以 HTML 5 的游戏为例，里面的人物要随着手指或鼠标运动，普遍的做法是通过 JavaScript 操纵 DOM 改变元素的位置来实现。可以说，DOM 使得 JavaScript 在前端世界里几乎无所不能。

但是，有一点要注意，操纵 DOM 本身是一件效率非常低的事情。一个网页往往很复杂，浏览器构造出来的 DOM 树往往很庞大，有的甚至有几千个节点。

在这么庞大的一棵树上频繁地改动，对浏览器（尤其是移动浏览器）来说是不小的工作量，稍不注意就会出现卡顿。

于是，有人发明了一种便捷的方法，叫作虚拟 DOM。

简单来说，就是用 JavaScript 模拟了一棵简单的 DOM 树，然后在这上面演练所有的 DOM 操作，等时机成熟时再把虚拟 DOM树和真正的浏览器的 DOM 树做对比，算出差异，一次性地改变真正的 DOM 树。

这两个步骤从整体上大大提高了 JavaScript 操纵 DOM 树的效率。