《用得上的前端知识》系列 - 你我都很忙，能用100字说清楚，绝不写万字长文

MutationObserver

MutationObserver 可以用来监听 DOM 的任何变化，比如子元素、属性和文本内容的变化。它有以下特点：

• 它等待所有脚本任务完成后，才会触发（异步触发，属于微任务）。
• 它把所有 DOM 变动记录封装成一个数组进行处理，而不是单独处理每个 DOM 变动。
• 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类型的变动。

DEMO:

const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach((mutation) => {
    console.log(mutation);
  });
});

const article = document.querySelector('article');
const options = {
  childList: true,
  attributes: true,
};

observer.observe(article, options);

兼容性：

大部分设备上都可以使用。

IntersectionObserver

这个 API 可以观察目标元素与视口或指定根元素产生的交叉区的变化，所以这个 API 也叫做“交叉观察器”，只在线程空闲时才会执行观察器，优先级比较低。

DEMO：

const opts = { 
  root: document.querySelector('.container'),
  rootMargin: '500px 0px',
  threshold: [0, 0.25, 0.5, 0.75, 1]
};
const io = new IntersectionObserver(callback, opts);

// 开始观察
io.observe(document.getElementById('example'));
// 观察多个节点
io.observe(elementA);
io.observe(elementB);

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

兼容性：

大部分设备上都能使用。

参考资料

• juejin.cn/post/699995…
• juejin.cn/post/684490… – 还有 Resize Observer 和 Performance Observer