记录MutationObserver的理解

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知

下方是用来计算某个节点样式改变所用时间

const observerFn = (className, typeName, startTime) => {
  // 选择你想要观察的元素
  // const element = document.getElementById('myElement');
  const element = document.querySelector(className)

  console.log(element)

  // 记录开始时的性能时间
  // const startTime = performance.now();

  // 设置样式改变后的回调函数
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === typeName) {
        // 停止观察
        observer.disconnect();

        // 记录结束时的性能时间
        const endTime = performance.now();

        // 计算时间差并输出结果
        const duration = endTime - startTime;
        console.log(`样式改变耗时 ${duration.toFixed(2)} 毫秒`);
      }
    });
  });
  // 观察元素样式的变化
  observer.observe(element, { attributes: true });
}


const startTime = performance.now();
observerFn(".vxe-loading", "class", startTime);

MutationObserver 的实例方法

• observe：设置观察目标，接受两个参数，target：观察目标，options：通过对象成员来设置观察选项
• disconnect：阻止观察者观察任何改变
• takeRecords：清空记录队列并返回里面的内容

observe 方法中 options 参数有已下几个选项：

1. childList：设置 true，表示观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
2. attributes：设置 true，表示观察目标属性的改变
3. characterData：设置 true，表示观察目标数据的改变
4. subtree：设置为 true，目标以及目标的后代改变都会观察
5. attributeOldValue：如果属性为 true 或者省略，则相当于设置为 true，表示需要记录改变前的目标属性值，设置了 attributeOldValue 可以省略 attributes 设置
6. characterDataOldValue：如果 characterData 为 true 或省略，则相当于设置为 true,表示需要记录改变之前的目标数据，设置了 characterDataOldValue 可以省略 characterData 设置
7. attributeFilter：如果不是所有的属性改变都需要被观察，并且 attributes 设置为 true 或者被忽略，那么设置一个需要观察的属性本地名称（不需要命名空间）的列表