MutationObserver接口用于监控DOM树的变化。其基本用法包括以下几个步骤：

• 创建一个MutationObserver实例。这需要通过调用MutationObserver构造函数并传入一个回调函数来创建。

• 使用observe()方法将新创建的MutationObserver实例与DOM节点关联起来。这个方法接收两个必需的参数：要观察其变化的DOM节点和一个MutationObserverInit对象。MutationObserverInit对象用于控制观察哪些方面的变化，是一个键值对形式的配置选项字典。

• 在回调函数中处理DOM节点的变化。每当符合观察条件的DOM节点发生变化时，MutationObserver实例都会异步执行注册的回调函数，并传入一个包含按顺序入队的MutationRecord实例的数组。

以下是一个MutationObserver接口应用示例的简化版代码：

// 创建观察者  
var observer = new MutationObserver(function(mutations) {  
  mutations.forEach(function(mutation) {  
    console.log(mutation.type);  
  });  
});  
  
// 配置观察选项  
var config = { attributes: true, childList: true, subtree: true };  
  
// 开始观察指定的节点  
var targetNode = document.getElementById('someElement');  
observer.observe(targetNode, config);

这个示例中创建了一个MutationObserver实例，然后定义了一个回调函数，该函数会在DOM发生变化时被调用。在回调函数内，它将遍历所有发生的变动，并打印出每个变动的类型。接下来，定义了一个配置对象，用于指定要观察哪些类型的变动（如：属性变动、子节点变动、后代节点的变动）。最后，将目标节点和配置对象传给observe()方法，以开始观察指定的DOM节点。

在实际使用中，可以根据需要调整观察选项和回调函数以实现特定的功能。

MutationObserverInit对象用于在MutationObserver接口的observe()方法中配置观察范围。该对象的属性可以控制的观察的范围具体包括：

• attributes：该属性设置为true时，观察目标节点的属性变化。

• characterData：该属性设置为true时，观察目标节点的文本节点内容（characterData）的变化。

• childList：该属性设置为true时，观察目标节点的子节点（包括添加和移除）的变化。

注意：在调用observe()方法时，MutationObserverInit对象中必须有至少一个属性值为true，否则将没有任何变化事件触发回调函数，导致报错。

MutationObserver接口的回调函数是一个异步函数，也就是说，当DOM发生变动时，不会立即执行该函数，而是将这些变动记录到一个队列中，等到同步代码执行完毕后，再将队列中的所有变动一次性以异步的方式执行回调函数。

MutationObserver实例会持续监听DOM树的变化，一旦发生变化，就会将这些变化封装成MutationRecord对象并存入一个队列中。然后，在满足以下两个条件之一时，将会执行回调函数：

1. 当前没有分派任务（意即同步代码已经执行完毕）；

2. 队列中有足够多的变动记录（默认情况下，当队列中有100个变动记录时，就会触发回调函数）。

因此，MutationObserver的回调函数执行的时间是不确定的，它依赖于浏览器的调度策略和当前系统的繁忙程度。如果队列中的变动记录非常多，那么回调函数可能会一次性执行大量的变动记录。

在回调函数中，可以通过参数获取到这次变动中所有变动记录的数组，这个数组中的每个元素都是一个MutationRecord对象，包含了发生变动的详细信息（比如变动的类型、发生变动的节点等）。