浏览器如何监听 DOM 的变化？

浏览器是如何监听 DOM 的变化的？

这个问题看似简单，但其实涉及到浏览器的很多底层原理。为了弄清楚这个问题，我们需要先了解一下 DOM 是什么。

DOM（Document Object Model）是 HTML 文档的树状表示。它将 HTML 文档中的各个元素表示为一个由节点组成的树形结构。节点可以是元素节点、文本节点、注释节点等。当对 DOM 进行修改时，浏览器会触发相应的 DOM 事件。

浏览器监听 DOM 变化的方式经历了三个阶段：轮询、Mutation Event 和 MutationObserver。

1. 轮询

轮询是最简单、最原始的方法。它通过定时器不断地检查 DOM 是否发生变化。如果发现 DOM 发生了变化，则触发相应的 DOM 事件。

轮询的缺点很明显，那就是效率低下。因为定时器会不断地触发，即使 DOM 并没有发生变化。这会消耗大量的 CPU 资源，从而导致浏览器的性能下降。

2. Mutation Event

Mutation Event 是 HTML5 中引入的新特性。它提供了一种新的监听 DOM 变化的方式。Mutation Event 是 DOM 事件的一种，它在 DOM 发生变化时触发。

Mutation Event 的优点是效率高。因为只有在 DOM 发生变化时才会触发，所以不会消耗额外的 CPU 资源。

Mutation Event 的缺点是兼容性差。目前只有部分浏览器支持 Mutation Event。

3. MutationObserver

MutationObserver 是 Mutation Event 的替代方案。它也是 HTML5 中引入的新特性。MutationObserver 提供了一种更简单、更灵活的方式来监听 DOM 变化。

MutationObserver 的优点是效率高、兼容性好。它既解决了轮询的效率问题，又解决了 Mutation Event 的兼容性问题。

目前，MutationObserver 是最推荐的监听 DOM 变化的方式。它可以用于各种场景，例如：

• 表单验证
• 实时更新数据
• 无限滚动

MutationObserver 的使用非常简单。只需要创建一个 MutationObserver 对象，然后将要监听的 DOM 元素作为参数传递给该对象。当 DOM 元素发生变化时，MutationObserver 对象会触发一个回调函数。回调函数中可以执行相应的操作，例如：

• 更新表单中的数据
• 重新渲染数据
• 加载更多数据

MutationObserver 是一个非常强大的工具，它可以帮助我们开发出更具交互性的 Web 应用。