IntersectionObserver和ResizeObserver回调函数的执行时机：微任务还是宏任务？
虽然MutationObserver的回调函数明确运行在微任务队列中，但IntersectionObserver和ResizeObserver回调函数的执行环境却并非显而易见。本文将通过测试和分析，探究其运行机制。
规范中的描述：
MDN文档中对IntersectionObserver和ResizeObserver的构造函数部分都描述了其回调函数类型：IntersectionObserverCallback和ResizeObserverCallback，分别接收IntersectionObserverEntry列表和IntersectionObserver或ResizeObserverEntry列表和ResizeObserver作为参数。然而，文档并未明确指出回调函数的执行时机。
测试代码及结果分析：
为了确定IntersectionObserver和ResizeObserver回调函数的执行时机，我们设计了以下测试代码：
console.log("代码开始");
// MutationObserver (微任务)
const mo = new MutationObserver(() => {
console.log("微任务", "Mutation Observer");
});
mo.observe(document.body, { childList: true });
// IntersectionObserver (测试对象)
const io = new IntersectionObserver((entries) => {
console.log("测试对象", "Intersection Observer");
});
io.observe(document.body);
// ResizeObserver (测试对象)
const ro = new ResizeObserver((entries) => {
console.log("测试对象", "Resize Observer");
});
ro.observe(document.body);
// Promise (微任务)
Promise.resolve().then(() => {
console.log("微任务", "Promise then");
});
// setTimeout (宏任务)
setTimeout(() => {
console.log("宏任务");
}, 0);
console.log("代码结束");
运行结果通常如下（顺序可能略有差异，但IntersectionObserver和ResizeObserver始终在Promise之后，宏任务之前）：
代码开始 代码结束 微任务 Mutation Observer 微任务 Promise then 测试对象 Intersection Observer 测试对象 Resize Observer 宏任务
结论：
通过以上测试，我们可以得出结论：IntersectionObserver和ResizeObserver的回调函数也运行在微任务队列中，其执行时机在Promise的then回调之后，setTimeout回调之前。 这与MutationObserver的执行环境一致，都属于微任务。 这确保了这些回调函数在浏览器渲染下一帧之前执行，从而保证了页面更新的流畅性。
