首页 > 文章列表 > IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中?

IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中?

269 2025-03-11

IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中?

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的执行环境一致,都属于微任务。 这确保了这些回调函数在浏览器渲染下一帧之前执行,从而保证了页面更新的流畅性。

来源:1740327490