关于MutationObserver 引发的 IntersectionObserver和ResizeObserver的callback类型？

Question

MutationObserver 我们知道，他的callback会被加入到微任务队列中，后面在逛帖子的时候又遇到了 IntersectionObserver和ResizeObserver的callback ，我在想他们俩得callback是什么类型，然后去MDN上面看文档，发现MutationObserverMDN上面也没有明确说明（也可能是我看漏了）。IntersectionObserver和ResizeObserver也没有说明，所以才有了这个问题！

Answer 1

有啊，在各自的构造函数小节都有介绍：

参考文档：
MDN-IntersectionObserver
MDN-ResizeObserver

补充

已知条件：
微任务： Promise、MutationObserver
宏任务：setTimeout

判断宏任务或微任务的方案如下（测试环境为 谷歌浏览器 ，不同浏览器可能有不同实现）

首先是 MutationObserver

console.log("代码开始");

// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
console.log("微任务", "mutation observer");
});
observer.observe(document.body, { childList: true });

document.body.appendChild(document.createElement("div"));

// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));

// 宏任务
setTimeout(() => {
console.log('宏任务');
}, 0);

console.log("代码结束");

输出结果为：

代码开始
代码结束
微任务 mutation observer
微任务 promise then
微任务 mutation observer
宏任务

可以确认为微任务

再来看 IntersectionObserver：

console.log("代码开始");

// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
console.log("mutation observer");
});
observer.observe(document.body, { childList: true });

// 宏任务
setTimeout(() => {
console.log('宏任务');
}, 0);

const observer2 = new IntersectionObserver ((mutations) => {
console.log("intersection observer");
});
observer2.observe(document.body);
document.body.appendChild(document.createElement("div"));

// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));

// 宏任务2
setTimeout(() => {
console.log('宏任务2');
}, 0);

console.log("代码结束");

输出为：

代码开始
代码结束
mutation observer
微任务 promise then
mutation observer
intersection observer
宏任务
宏任务2

显然，Intersection 也是微任务

最后是 ResizeObserver：

console.log("代码开始");

// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
    console.log("mutation observer");
});
observer.observe(document.body, { childList: true });

// 宏任务
setTimeout(() => {
    console.log('宏任务');
}, 0);

const observer2 = new ResizeObserver((mutations) => {
    console.log("resize observer");
});
observer2.observe(document.body);

document.body.style.width = '1000px'

// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));

// 宏任务2
setTimeout(() => {
    console.log('宏任务2');
}, 0);

console.log("代码结束");

结果为：

代码开始
代码结束
微任务 promise then
mutation observer
resize observer
宏任务
宏任务2

所以 ResizeObserver 也是微任务