微任务 queueMicrotask和MutationObserver

1. queueMicrotask （排队微任务）

queueMicrotask 是 JavaScript 中的一个全局方法，它允许你将一个回调函数添加到微任务队列中。这个回调函数会在当前执行栈清空后、浏览器渲染前被执行，且它的优先级高于宏任务。

使用方法

queueMicrotask 接受一个回调函数作为参数，这个回调函数没有参数传递，也不返回任何值。你可以像这样使用它：

console.log(1)
queueMicrotask(() => {
  console.log(2);
});
console.log(3)

// 输入 1》3》2

2. MutationObserver （DOM变化观察员）

MutationObserver 是一个用于监视 DOM 更改的 JavaScript API。它允许你检测 DOM 树中的变化，并在检测到变化时执行相应的回调函数。这对于需要响应 DOM 更改的应用程序非常有用，例如，当你需要更新某些界面元素以反映底层数据的变化时。

Mutation /mjuːˈteɪʃn/ 突变

使用方法

第1步：创建实例

‌创建一个 MutationObserver 实例‌：

你需要首先创建一个 MutationObserver 实例，并传入一个回调函数。这个回调函数会在每次检测到 DOM 更改时被调用。

const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('已添加或删除子节点');
    } else if (mutation.type === 'attributes') {
      console.log( mutation.attributeName + ' 标签属性已修改');
    }
  }
});

第2步：配置观察选项‌

你需要指定一个配置对象，以定义你想要观察的 DOM 更改类型。这个对象可以包含以下属性：

• attributes: 布尔值，表示是否观察属性变动。
• childList: 布尔值，表示是否观察子节点的变动（新增、删除）。
• subtree: 布尔值，表示是否观察所有后代节点的变动。
• characterData: 布尔值，表示是否观察节点内容或节点文本的变动。
• attributeFilter: 字符串数组，表示需要观察的特定属性名。
• attributeOldValue: 布尔值，表示是否需要记录变动前的属性值。
• characterDataOldValue: 布尔值，表示是否需要记录变动前的节点内容。

const config = { attributes: true, childList: true, subtree: true };

第3步：绑定 MutationObserver 到目标节点‌

使用 observe 方法，将 MutationObserver 绑定到你想要观察的目标节点上，并传入配置对象。

observer.observe(targetNode, config);

第4步：停止观察

当你不再需要观察 DOM 更改时，可以调用 disconnect 方法来停止观察。

observer.disconnect();

完整示例

// 获取目标节点
const targetNode = document.getElementById('myElement');

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
});

// 配置观察选项
const config = { attributes: false, childList: true, subtree: false };

// 传入目标节点和观察选项
observer.observe(targetNode, config);

// （可选）在适当的时候停止观察
// observer.disconnect();

兼容性

‌兼容性‌：MutationObserver 是现代浏览器中的一个功能，它在大多数现代浏览器中都是可用的。然而，在一些较旧的浏览器中可能不受支持。你可以使用功能检测来确保浏览器的兼容性。

function supportsMutationObserver() {
  return 'MutationObserver' in window || 'MutationObserver' in global || 'WebKitMutationObserver' in window;
}

if (supportsMutationObserver()) {
  console.log('MutationObserver is supported in this browser.');
  // 你可以安全地使用 MutationObserver
}